仿知乎FloatingActionButton浮动按钮动画效果实现(一)

最近刚接触使用android studio,那酸爽简直停不下来23333,eclipse什么的以后可以放弃了~

然后在默认生成的第一个项目发现了一个新的控件,即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文件中设置一个白板:

再设置好此蒙版的点击事件:

这样逻辑就理顺了,点击白班会使雾化效果消失,再次点击按钮也能达到相同效果。

********************************************************************************分割线(づ ̄ 3 ̄)づ*********************************************************************************

有一段时间没写博客了,阿里网易腾讯的电面笔试接连来袭,被虐的一塌糊涂~~~~(>_<)~~~~深刻认知到了自己当下的水平与期望的差距,但也只有醒悟才能看清现实,知道该通往何方,明年这个时候,不要让自己后悔!

时间: 2024-10-15 04:03:32

仿知乎FloatingActionButton浮动按钮动画效果实现(一)的相关文章

Android自定义View——仿vivo i管家病毒扫描动画效果

技术是永无止境的,如果真的爱技术,那就勇敢的坚持下去.我很喜欢这句话,当我在遇到问题的时候.当我觉得代码枯燥的时候,我就会问自己,到底是不是真的热爱技术,这个时候,我心里总是起着波澜,我的答案是肯定的,我深深的爱着这门技术. 今天我们继续聊聊Android的自定义View系列.先看看效果吧: 这个是我手机杀毒软件的一个动画效果,类似于雷达搜索,所以用途还是很广泛的,特别是先了解一下这里的具体逻辑和写法,对技术的进步一定很有用. 先简单的分析一下这里的元素,主要有四个圆.一个扇形.还有八条虚线.当

仿饿了么+点餐动画效果

仿饿了么+点餐动画效果 高仿饿了么安卓客户端,有相关方面需求的同学可以参考参考,不喜勿喷... 下载地址:http://www.devstore.cn/code/info/727.html 运行截图:   

简单的UIButton按钮动画效果ios源码下载

这个是简单的UIButton按钮动画效果案例,源码,简单的UIButton按钮动画,可以自定义button属性. 效果图: <ignore_js_op> 使用方法: 详细说明:http://ios.662p.com/thread-2272-1-1.html

仿知乎悬浮功能按钮FloatingActionButton

前段时间在看属性动画,恰巧这个按钮的效果可以用属性动画实现,所以就来实践实践.效果基本出来了,大家可以自己去完善. 首先看一下效果图: 我们看到点击FloatingActionButton后会展开一些item,然后会有一个蒙板效果,这都是这个View的功能.那么这整个View肯定是个ViewGroup,我们一部分一部分来看. 首先是这个最小的Tag: 这个Tag带文字,可以是一个TextView,但为了美观,我们使用CardView,CardView是一个FrameLayout,我们要让它具有显

【凯子哥带你夯实应用层】都说“知乎”逼格高,我们来实现“知乎”回答详情页动画效果

转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 2014已经远去,2015年的目标很简单,就是继续熟悉Android的上层API,虽然偶尔会为了某个问题去研究下FrameWork的代码,但是对于我们这种新手来说,只有对上层的API用的熟练了,才能更好的往下研究原理.所以,今年的任务就是继续学习和研究Android的上层API的使用,顺便写一篇毕业论文,然后毕个业. OK,从这篇开始,咱们就开始[凯子哥带你夯实应用层]系列,如果你有想要实现的界面效果,或

Swift版本仿网易云音乐播放音乐动画效果

个人技术博客站欢迎您 创建一个继承于UIView的视图我们叫他XTActivityView /// 立方柱的个数 var numberOfRect = 0; /// 立方柱的颜色 var rectBackgroundColor: UIColor? /// 立方柱初始化大小 var defaultSize: CGSize? /// 立方柱之间的间距 var space: CGFloat = 0.0 进行初始化 override init(frame: CGRect) { super.init(fr

按钮动画效果

<a href="#" class="a-btn">中秋节快乐啊...</a> .a-btn{ display:block; position:relative; width:300px; margin:30px auto; height:40px; line-height:40px; border:2px ridge #fff; color:#fff; text-align:center; background:#343434; z-ind

仿知乎/途家导航栏渐变文字动画效果-b

demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了毛玻璃效果,背景是一张图片 4.下拉放大图片效果 5.title文字动画效果 通过简单分析,系统的导航栏实现以上效果有点困难,直接自定义一个假的导航栏更容易点 分布拆解实现以上效果 一.下拉放大header图片 - (void)viewDidLoad {        [super viewDidL

android 仿ppt进入动画效果合集

EnterAnimation android 仿ppt进入动画效果合集, 百叶窗效果,擦除效果,盒状效果,阶梯效果,菱形效果,轮子效果,劈裂效果,棋盘效果, 切入效果,扇形展开效果,十字扩展效果,随机线条效果,向内溶解效果,圆形扩展效果, 适用于各种view和viewgroup,activity即用于页面根部viewgroup, 自定义viewgroup自动换行layout, 看效果图 Series of entrance animation effects just like ppt in A