在创建这个android浮动气泡动画时，我做错了什么？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Android 如何实现气泡选择动画

这种动画类型对丰富应用的内容由很大帮助，主要使用场景是：用户要从一系列选项中进行选择时的页面。例如，我们使用气泡来选择旅游应用中潜在目的地名字。气泡自由的浮动，当用户点击一个气泡时，选中的气泡会变大。...再来看看开发者的挑战当我决定实现这个动画时，我面临的第一个问题就是使用什么工具开发。...幸运地是，Android 支持部分版本的 OpenGL。我需要圆自然地运动，就像碳酸饮料中的气泡那样。对 Android 来说有许多可用的物理引擎，同时我又有一些特定需要，使得选择变得更加困难。...此外，本文后面我会解释我为什么选择 Kotlin 语言开发，以及这样做的好处。需要了解 Java 和 Kotlin 更多不同之处可以阅读我之前的文章。如何创建着色器？...在动画中圆有两种状态 —— 普通和选中。在普通状态下圆的 texture包含文字和颜色，在选中状态下同时包含图像。因此我需要为每个圆创建两个不同的 texture。

2.7K2 0

iOS 与 Android 的APP 设计差异

本文将聚焦于iOS和Android上的交互设计模式之间的区别，阐明iOS和Android上的应用看起来不同的原因，以及它们为什么应该这样做。...（译者注：这个特性我原来还真不知道，现在已经用的很顺手了。）...左边是标准的Android按钮；右边是标准的iOS按钮还有一种非常有特点的按钮类型——在Android上叫做浮动按钮，在iOS上叫做活动按钮。浮动按钮用来展示应用的主要操作。...例如，在邮件APP中写邮件，或者在社交APP中发状态都会用到这个浮动按钮。...在APP开发设计过程中,我们可以通过做好微交互和动画来为用户创建一个有吸引力的体验。让我们明确下两个平台的交互和动画的规则和建议，并查看官方给出的一些标准示例。

3.5K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

你离高效制作动画只差一篇文章的距离

爱的是加上动画动效后H5会变得生动有趣，吸引力Max；恨的是做动画时都是一边在脑海中yy效果，一边用css、js代码模拟出来，既低效又不直观，正所谓“产品一句话，设计一根线，重构一身汗”。...当我们将图片拖到舞台上时，图片只是一个位图，并没有很多诸如创建补间动画、设置透明度等编辑功能。而当它转换为图片元件后，就有了上述的功能了。...接着再当你满心欢喜地拿起安卓手机欣赏动画时，顿时就晕了：为什么会卡得那么惨不忍睹？莫急莫急，你该再次庆幸现在看到了这篇文章，让我慢慢道来，给你一些优化建议吧。 ...Animate CC 2018 在时间轴上新增了秒数的显示，大大方便了制作动画时的时间考虑，不用再像以前那样用当前帧除以fps来估算目前在什么时间点。 ...于是我将雪碧图改为1024*1024（当位置不够放时，会自动创建新的雪碧图来存放，所以也不用担心），并更改了雪碧图按jpg和png分开放、不导出无用的资源等设置，具体改为下图：经调整后，内存占用没有快速攀升

1.2K2 0

自定义View学习——仿QQ消息气泡拖拽黏连删除

因为我发现这个QQ消息气泡开源控件是规则的圆，所以稍加修改，对onDraw()绘画图形做了变动，更加接近于QQ气泡了。...参考博客：仿 QQ 未读消息气泡，可拖拽删除，粘连效果参考博客中的实现思路：首先我们需要两个圆，一个是在原点不需要跟随手指的圆，一个是跟随手指的圆，当用户开始点击时，绘制跟随手指的圆和圆上的未读消息数量...，同时在手指移动时，不停地判断两圆之间的距离是否超过我们所设定的最远距离，如果未超过这个距离，则在两圆之间，以两圆圆心的中间点为控制点绘制贝塞尔曲线，如果超过距离，则停止绘制贝塞尔曲线，两圆成独立状态移动...注意：使用时需要在所有父布局中加入android:clipChildren="false"属性，使气泡可以在父布局中拖动。...*/ void onRestore(); /** * 拖动时超出了最大粘连距离，气泡单独移动时 */

1.5K3 0

iOS开发常用之网络

MGSwipeTableCell - 另一个常见于很多应用中的UI组件，苹果应该考虑在标准的iOS SDK中加入一些类似的内容.Swipeable表格cell是这个pod的最佳描述，也是最好的。...基于轻扫的方向，你可以决定执行什么样的行为，并且你可以自定义文本颜色和图片。该项目适用于教学用的抽认卡，图片查看器以及其他等。...SwiftyFORM - swift表单输入框架（亮点是表单验证规则引擎），是我见过地最易用的Swift表单组件。...KYFloatingBubble - 类似iOS7中Game Center浮动气泡的效果。 DKNightVersion - DKNightVersion是一个支持夜间模式切换的框架。...SIFloatingCollection_Swift - 可定制的Apple Music风格浮动形状动画组件及演示。 Cheetah - 可用，高可读链式动画类库。

23.7K1 0

前端|动态发光按钮

问题描述通常我们在HTML表单中使用button元素，是通过标签定义一个按钮，再在button元素内部来放置内容，动态发光按钮原理类似。...解决方案制作动态发光按钮时，要注意以下细节：使用background: linear-gradient标签来设置按钮颜色的渐变效果。制作过程：（1）设置页面背景，使用背景图片填充网页。...list-style: none; } button { outline: none; border: none; } （2）创建一个容器...50%); border-radius: 40px; transition: .8s; overflow: hidden;/*隐藏溢出，清除浮动...：动画名称间隔时间动画的速度曲线*/ } @keyframes fireflymove {/*设置动画效果*/ 100% {

2.9K3 0

Android 高德地图API（详细步骤+源码）三

="18dp" app:pressedTranslationZ="18dp" /> 图标 [在这里插入图片描述] 这里我改变了浮动按钮的大小，然后增加了一个删除标点的按钮，当点击地图时显示这个浮动按钮...[在这里插入图片描述] 可以根据里面的参数进行配置然后达到你要的效果，那么就Marker的绘制动画效果就说到这，如果你有需要我用代码说明其他动画的需求，可以评论一下，我根据你的需求加上去。...Marker的时候就出现这个InfoWindow，你可以这样做， [在这里插入图片描述] 自行运行一下即可。...[在这里插入图片描述] [在这里插入图片描述] 建议在我的源码里面复制，直接在博客中保存图片会有问题。下面在layout下创建两个xml。 custom_info_contents.xml <?...[在这里插入图片描述] 嗯，可能GIF上看着效果不是特别的明显，在自己手机上去体验一下就知道了，这个地图平移动画还是很不错的。下一篇 Android 高德地图API（详细步骤+源码）四

3.9K3 1

强大的高颜值iOS图表框架AAChartKit,支持柱状图、条形图、折线图、曲线图...

Highcharts的基础上,封装的面向对象的,一组简单易用,极其精美的图表绘制控件.可能是这个星球上 UI 最精致的第三方 iOS 开源图表库了(✟我以无神论者的名义向上帝起誓,我真的没有在说鬼话✟)...交互式图形动画 . 有着清晰和充满细节的用户交互方式, 与此同时, 图形渲染动画效果细腻精致, 流畅优美....有三十多种以上渲染动画效果可供选择, 用户可自由设置渲染图形时的动画时间和动画类型, 关于图形渲染动画类型,具体参见 AAChartKit 动画类型. 极简主义 ....import "AAGlobalMacro.h" 在你的项目的 .pch 全局宏定义文件中添加正式开始使用在你的ViewController视图控制器文件中添加#import "AAChartKit.h" 创建视图...4.2, @5.7, @8.5, @11.9, @15.2, @17.0, @16.6, @14.2, @10.3, @6.6, @4.8]), ]) ; 绘制图形(创建

5.5K1 1

Now in Android #13 - 最新 Android 动态分享

为了让大家也能第一时间了解最新信息，我准备同步跟进 Now in Android ，第一时间为大家带来中文介绍。这里不会逐字逐句翻译，根据段落大意提炼总结。...作者首先吐槽了 13 这个数字。13 在西方国家是个不吉利的数字，所以你可以把本篇当做 #14 。当下一篇又发布 #14 的时候，告诉自己这肯定是软件错误。还挺幽默。...气泡。气泡内置于通知系统中。它们悬浮在其他应用内容之上，并会跟随用户移动到任何位置。气泡可以展开以显示应用功能和信息，并可在不使用时收起。...Dynamic Feature Module Testing 这个就不多说了，反正国内也用不了。 Material Motion 动画是个好东西，但是比较难实现，特别是元素和页面之间丰富的过度动画。...关注我，不迷路。后续将继续跟进 Now in Android 。

7802 0

Floating Action Button-Android M新控件

---- 用法谷歌在2015年的 I/O大会上公布了可以创建浮动操作按钮的支持库，但是在这之前，则须使用诸如makovkastar/FloatingActionButton 和 futuresimple...---- 浮动操作按钮的动画官方效果图 ?...操作步骤要让这个过程有动画效果，你需要利用好CoordinatorLayout，CoordinatorLayout帮助协调定义在里面的view之间的动画。...：我这个案例中使用了cardView compile 'com.android.support:recyclerview-v7:23.1.1' compile 'com.android.support...目前浮动操作按钮默认的behavior是为Snackbar让出空间，就如这个视频中的效果。

1.5K4 0

使用纯 CSS 实现超酷炫的粘性气泡效果

最近，在 CodePen 上看到这样一个非常有意思的效果：这个效果的核心难点在于气泡的一种特殊融合效果。...这里，就需要运用我们在深入浅出 CSS 动画这篇文章中所介绍的一种技巧 -- 利用 animation-duration 和 animation-delay 构建随机效果。...2-4 秒范围内随机，让 animation-delay 在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果： CodePen Demo...如果你还不了解这个技巧，可以戳我的这篇文章看看：你所不知道的 CSS 滤镜技巧与细节简述下该技巧：单独将两个滤镜拿出来，它们的作用分别是： filter: blur()：给图像设置高斯模糊效果。...当然，因为这里的 blur(5px) 还需要为气泡与气泡之间的融合服务，所以为了覆盖动画全区域，我们还设置了 top: -300px，扩大了它的作用范围。

1.6K3 0

实现一个带浮动标签的输入框

现在带浮动标签的输入框也是一个很常见的东西了，在材料设计里面有一个 TextInputLayout 的控件，我们可以用它实现这个效果。但是材料设计控件的样式比较固定，并不能满足我们产品设计的脑洞。...这里提供一个用属性动画实现的方法。还是先看看效果吧： image.png 大概的思路是这样的：控件有两层，一层是浮动的标签，一层是输入框。...当点击控件后，标签同时执行一个横向和纵向的缩放动画，还有一个向上移动的动画，让输入框获取到焦点并弹出键盘。当输入框失去焦点时，判断是否有内容，如果没有则让标签执行一个复原的动画。...缩放动画是根据控件的基准坐标来进行缩放的。也就是说，当我们把基准坐标设在控件上方时，缩放的时候也会有一个移动的效果。...所以在布局里面用 android:transformPivotX="0dp" android:transformPivotY="-30dp" 复制代码将标签的基准点设为 (0dp, -30dp)，这样我们就省去了移动动画

1.3K1 0

根据 OS 设计你的应用

图表 2.4 Evernote 登陆页（左 iOS vs 右 Android）如同前面所提到的，在 iOS 版本上倾向于简洁的动画过渡，而 Android 版本上更多的动画效果致力于抓住用户的目光。...这样的结果便是在 iOS 的登陆页上有着极少的图像设计和动画，而 Android 版本上有的动态风富的设计和动画。...图表 3.4 Spotify Home Page（左 iOS vs 右 Android）第一眼观看图 3.4 就不难发现，Spotify 的设计师在统一两个平台上的界面和视觉设计上做的非常好。...混合方法混合的方法在你需要用户体验为品牌代言时，是最佳的选择。我相信这是通往多平台适应的最佳路线。它允许设计师切身为平台，用户和品牌考虑。...而针对平台开发的方法，有时候看起来太刻板太标准化，对品牌提升没什么效果。我举例的这个使用混合方法开发的应用显然是一个多平台适应的成功案例。然而，这样的例子少之又少，因为它需要很多时间和投资的支持。

1.3K11 0

Dimple在左耳听风ARTS打卡（第五期）

，作为曾经狂热的Android开发者，现在是Java开发，还是迫不及待地想了解一番最新版本的Android到底有什么美妙的地方。...文中着重介绍了Android Q Bete1版本有个隐藏的功能，将通知放在浮动的“气泡”中，类似于Facebook的Chat Heads消息。...但是，后面又进行了这个想法的猜想，比如之前说的Facebook有类似的功能，那我们就可以想到，其实我们的短信，微信也是可以这样的。在消息来的第一时间用一个气泡提示框弹出，并且快速回复。...这个勿扰模式貌似现在是不是已经有的了，那就是勿扰增强模式吧。不过都是猜想，要是现在有一台谷歌亲儿子，那是可以考虑升级一下的。噢？什么是谷歌亲儿子？...Tip 一个技术技巧上次聊到的是我学习《Java核心技术36讲》中第26讲的内容，这次我把第27讲做的笔记和大家分享下，主要是描述Java垃圾收集器相关的内容。

3632 0

Android Compose 新闻App（六）导航动画、WebView、浮动按钮、底部导航

Android Compose 新闻App（六）导航动画、WebView、浮动按钮、底部导航前言正文一、导航动画 ① 添加依赖 ② 使用二、WebView使用 ① 导航传递URL参数 ② 配置WebView...popExitTransition：当前页面弹出栈后隐藏时的动画。...这些动画可以直接设置在NavHost中，下面我们设置一下：下面我们运行一下：可以看到当前页面进入到详情页面有动画效果，而返回之前的页面时也是这个动画效果，两者一样，我们再试试其他的动画...三、FloatingActionButton使用浮动按钮在日常开发中，也是很常见的，下面在我们的EpidemicNewsListPage中添加一个浮动按钮。...添加浮动按钮的同时，我把TopAppBar中多余的内容清除掉了，下面我们运行一下：点击时弹出Toast，默认显示在页面的右下角。那如果要改位置呢？

4.9K2 0

如何使用SVG动画来制作游戏

当你在制作一个复杂的动画时，有一点是需要注意的。你完全可以使用一整个SVG当做背景，然后为这个SVG的子元素和路径来制作动画。...我通过创建形状的mixins来为这些柱子里面的小东西添加效果。如果我们看下bublble这个效果的代码，我们就会发现每个圆圈都使用了绝对定位并使用到了这个mixin。...气泡的动画我使用交错动画来做这个效果。这个动画可以操控柱子里面所有的气泡元素，并且可以让每个气泡有一个小小的延时，让他们不会同时开始运动。...因此，有一半的方块是从左向右移动的，而另外一般则做反方向的运动。分数的动画让我们点击重新开始，再看下这个动画吧. 我想要分数的动画有一种“Q弹”的感觉，于是我就写了几行代码来形成这个效果。...让游戏界面可缩放做这个游戏，最重要的事情是让画面变得可缩放。看下这款游戏在不同尺寸的屏幕上达到了完美的效果！如同我说的，我仅仅是使用了 CSS transform，这样做具有它独特的挑战性。

2.1K3 0

Android学习路线权威指南

在Android学习过程中，初学者踩过的坑我也都踩过，我也深深地知道大家在学习过程中最棘手的问题是什么。...这个时候，小明对编程基础、数据结构、C语言都有一定基础，Java语法什么的也都掌握的比较好，Android才有java语言，无奈的是小明并不会搞Android。...这个时候在小明眼里，Android开发很简单很好玩，通过在xml中摆放一些按钮文本框什么的就可以做一些界面了。小明开始跟着他的技术导师做需求，一些简单的小需求小明自然是不在话下了。...技术要求： - 基本知识点比如四大组件如何使用、如何创建Service、如何进行布局、简单的自定义View、动画等常见技术 - 书籍推荐《第一行代码 Android》、《疯狂Android...这个时候小明的Android水平以及不错了，但是小明的目标是资深工程师，小明听说资深工程师月薪可以达到30k+。

5511 0

Android 天气APP（二十八）地图搜索定位

而我在开始动画的时候也加了一个对于定位按钮的判断，因为这个控件和定位按钮在同一水平线上，又因为底层的布局用的是FrameLayout,所以会出现覆盖的情况，这并不是我想要的，所以我加了一个控制，如果展开的时候处于手动定位则隐藏自动定位按钮...相信你已经知道了，好的，我在点击搜索的时候获取输入框的内容，为空则提示一下，不为空就获取内容，那么获取到的内容要怎么办呢？首先想一下获取到的是什么内容？当然是城市的名称了，可以是区/县、市。...通过这个做解析，不光是坐标转地址，也可以地址转坐标 ?...OK，我们还需要与这个底部控件做协调，比如我们之前有过这样一个操作就是当手动定位时，拖动底部布局到顶部然后隐藏这个按钮，回到底部时显示这个按钮，那么同理我是不是也应该对这个搜索布局做同样的事呢？...好的，继续往下看啊，因为我用的不是浮动按钮，所以就没有默认的动画了，那么就需要自己来写动画效果，这个其实也不难啊。 ?

9741 0

玩机汇总（六）：MIUI主题拆包

（6）.com.android.contacts模块—拨号键盘样式。（7）.com.android.mms模块—短信界面（气泡、字体颜色等）。...注：我用的360压缩！！！ *（2）.XML代码修改工具：***notepad++**（百度搜索下载）。（3）.图片编辑器：PS或者其他（光影魔术手）。...（4）. wallpaper文件夹—锁屏壁纸和桌面壁纸（格式：jpg）（5）. clock_2*4模块—桌面时间样式（一般没什么可以改的，有好看的时钟样式，直接替换就行）（6）. com.android.contacts...（气泡、字体颜色等）（8）.com.android.settings模块—设置（自定义设置名字、设置内容图标等）（9）. com.android.systemui模块—状态栏（背景、开关图标、...Lockscreen****模块—锁屏样式注：这个没什么好说的，好看的锁屏直接替换！！！

2.9K3 0

面试必备 css面试必考点

试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。 11 用纯CSS创建一个三角形的原理是什么？...之前写三角形, 都是直接记住代码,没有探究原因,我也是直到有一次面试时,面试大哥让我说说css创建三角形的原理,我就......回来就赶紧翻资料.接下来我就将当时我理解的过程列举出来: （1）写一个我们最熟悉的...可以阻止元素被浮动元素覆盖 20 为什么会出现浮动和什么时候需要清除浮动？...37 position:fixed;在android下无效怎么处理？...三栏布局在开发十分常见，那么什么是三栏布局？

1.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭