仿知乎FloatingActionButton浮动按钮动画效果实现(一)
2016-03-25 13:18
746 查看
最近刚接触使用android studio,那酸爽简直停不下来23333,eclipse什么的以后可以放弃了~
然后在默认生成的第一个项目发现了一个新的控件,即FloatingActionButton,联想到知乎上也有这个控件,于是模仿知乎的效果试一试。
大概分为四个步骤:
Step1:修改原生FloatingActionButton的背景颜色和点击颜色。
Step2:描绘FloatingActionButton的点击动画效果。
Step3:设置蒙版模拟点击以后的界面雾化效果。
Step4:设置点击出现的子按钮与描绘子按钮出现的动画效果(下篇博客详述)。
Step1:
首先在MainActivity中找到初始化FloatingActionButton的语句:
ctrl+左键这个fab资源链接,可以看到原生的FloatingActionButton的xml布局:
以及图片预览:
下面开始修改背景颜色,在xml中加入
可以看到,设置背景颜色和背景资源的方法都是被禁用的,下面再看类中获得背景颜色和点击颜色的地方:
可以看到,都是从默认的属性文件中获得的,所以我们只能修改系统的属性文件才能改变这个按钮的颜色和点击色。
修改后的颜色:
Step2:
下图演示知乎的FloatingActionButton动画效果:
可以看到,第一次点击,按钮先向左旋转135度(左摇小角度再右摇)停止,第二次点击,按钮回到原位置(左摇小角度)。由此可见这是一个模拟了惯性,看起来十分精致的动画效果。
设计思路:
通过两段旋转动画实现模拟惯性效果,虽然看起来效果几乎差不多,但是知乎的可能还用了插值器来设置加速度使得惯性更为逼真。
首先在FloatingActionButton的点击事件中调用两个方法:
分别为openMenu():
以及closeMenu():
这个textview是step3里的蒙版。。。可以直接先跳到step3设置好再写进来QAQ
运行效果:
Step3:
首先在xml文件中设置一个白板:
再设置好此蒙版的点击事件:
这样逻辑就理顺了,点击白班会使雾化效果消失,再次点击按钮也能达到相同效果。
***********其余两篇跳转地址:
仿知乎FloatingActionButton浮动按钮动画效果实现(二)
仿知乎FloatingActionButton浮动按钮动画效果实现(三)
然后在默认生成的第一个项目发现了一个新的控件,即FloatingActionButton,联想到知乎上也有这个控件,于是模仿知乎的效果试一试。
大概分为四个步骤:
Step1:修改原生FloatingActionButton的背景颜色和点击颜色。
Step2:描绘FloatingActionButton的点击动画效果。
Step3:设置蒙版模拟点击以后的界面雾化效果。
Step4:设置点击出现的子按钮与描绘子按钮出现的动画效果(下篇博客详述)。
Step1:
首先在MainActivity中找到初始化FloatingActionButton的语句:
ctrl+左键这个fab资源链接,可以看到原生的FloatingActionButton的xml布局:
以及图片预览:
下面开始修改背景颜色,在xml中加入
<span> </span>app:backgroundTint="#ff000099" app:rippleColor="#33728dff"这里之所以设定app的背景颜色和点触颜色,可以从FloatingActionButton的类里看出来:
可以看到,设置背景颜色和背景资源的方法都是被禁用的,下面再看类中获得背景颜色和点击颜色的地方:
可以看到,都是从默认的属性文件中获得的,所以我们只能修改系统的属性文件才能改变这个按钮的颜色和点击色。
修改后的颜色:
Step2:
下图演示知乎的FloatingActionButton动画效果:
可以看到,第一次点击,按钮先向左旋转135度(左摇小角度再右摇)停止,第二次点击,按钮回到原位置(左摇小角度)。由此可见这是一个模拟了惯性,看起来十分精致的动画效果。
设计思路:
通过两段旋转动画实现模拟惯性效果,虽然看起来效果几乎差不多,但是知乎的可能还用了插值器来设置加速度使得惯性更为逼真。
首先在FloatingActionButton的点击事件中调用两个方法:
分别为openMenu():
以及closeMenu():
这个textview是step3里的蒙版。。。可以直接先跳到step3设置好再写进来QAQ
运行效果:
Step3:
首先在xml文件中设置一个白板:
再设置好此蒙版的点击事件:
这样逻辑就理顺了,点击白班会使雾化效果消失,再次点击按钮也能达到相同效果。
***********其余两篇跳转地址:
仿知乎FloatingActionButton浮动按钮动画效果实现(二)
仿知乎FloatingActionButton浮动按钮动画效果实现(三)
相关文章推荐
- Android 动画之AlphaAnimation应用详解
- Android实现动画效果详解
- FloatingActionButton增强版一个按钮跳出多个按钮第三方开源之FloatingActionButton
- Android动画之3D翻转效果实现函数分析
- BaseAnimation是基于开源的APP,致力于收集各种动画效果(最新版本1.2)
- Material Design之FloatingActionButton的使用
- 关于TranslateAnimation()的参数问题
- Android的屏幕切换动画
- Android动画学习笔记-Android Animation
- Android动画笔记
- Android动画之translate(位移动画)
- Android动画之Drawable Animation
- 值动画
- Android常用动画
- Android布局动画和逐帧动画
- 收集android上开源的酷炫的交互动画和视觉效果
- 动画的简单介绍
- Android控件动画
- Interpolator的几种属性
- Android Support Design 控件 FloatingActionButton