最近刚接触使用Android studio,那酸爽简直停不下来23333,eclipse什么的以后可以放弃了~
然后在默认生成的第一个项目发现了一个新的控件,即FloatingActionButton,联想到知乎上也有这个控件,于是模仿知乎的效果试一试。
大概分为四个步骤:
Step1:修改原生FloatingActionButton的背景颜色和点击颜色。
Step2:描绘FloatingActionButton的点击动画效果。
Step3:设置蒙版模拟点击以后的界面雾化效果。
Step4:设置点击出现的子按钮与描绘子按钮出现的动画效果(下篇博客详述)。
Step1:
首先在MainActivity中找到初始化FloatingActionButton的语句:
ctrl+左键这个fab资源链接,可以看到原生的FloatingActionButton的xml布局:
以及图片预览:
下面开始修改背景颜色,在xml中加入
这里之所以设定app的背景颜色和点触颜色,可以从FloatingActionButton的类里看出来:
可以看到,设置背景颜色和背景资源的方法都是被禁用的,下面再看类中获得背景颜色和点击颜色的地方:
可以看到,都是从默认的属性文件中获得的,所以我们只能修改系统的属性文件才能改变这个按钮的颜色和点击色。
修改后的颜色:
Step2:
下图演示知乎的FloatingActionButton动画效果:
可以看到,第一次点击,按钮先向左旋转135度(左摇小角度再右摇)停止,第二次点击,按钮回到原位置(左摇小角度)。由此可见这是一个模拟了惯性,看起来十分精致的动画效果。
设计思路:
通过两段旋转动画实现模拟惯性效果,虽然看起来效果几乎差不多,但是知乎的可能还用了插值器来设置加速度使得惯性更为逼真。
首先在FloatingActionButton的点击事件中调用两个方法:
分别为openMenu():
以及closeMenu():
这个textview是step3里的蒙版。。。可以直接先跳到step3设置好再写进来QAQ
运行效果:
Step3:
首先在xml文件中设置一个白板:
再设置好此蒙版的点击事件:
这样逻辑就理顺了,点击白班会使雾化效果消失,再次点击按钮也能达到相同效果。
********************************************************************************分割线(づ ̄ 3 ̄)づ*********************************************************************************
有一段时间没写博客了,阿里网易腾讯的电面笔试接连来袭,被虐的一塌糊涂~~~~(>_<)~~~~深刻认知到了自己当下的水平与期望的差距,但也只有醒悟才能看清现实,知道该通往何方,明年这个时候,不要让自己后悔!
相关推荐
前段时间在看属性动画,恰巧这个按钮的效果可以用属性动画实现,所以就来实践实践。效果基本出来了,大家可以自己去完善。 首先看一下效果图: 我们看到点击FloatingActionButton后会展开一些item,然后会有一个...
微信小程序——仿知乎(截图+源码).zip 微信小程序——仿知乎(截图+源码).zip 微信小程序——仿知乎(截图+源码).zip 微信小程序——仿知乎(截图+源码).zip 微信小程序——仿知乎(截图+源码).zip 微信小程序...
需要v7包,类似知乎的加号按钮动画效果,
高仿知乎日报(一) 高仿知乎日报(二) 高仿知乎日报(三) 高仿知乎日报(四) 高仿知乎日报(五) 高仿知乎日报(六) 知乎日报API 知乎日报API 来自izzyleung,在此表示感谢 已完成功能 启动动画与启动图片的获取 文章类型...
仿知乎问答社区响应式源码带... 知乎更像一个论坛:用户围绕着某一感兴趣的话题进行相关的讨论,同时可以关注兴趣一致的人 支持文章、话题、第三方登录、文章和问题打赏,作者打赏,回答者打赏。设置好可以在线充值
微信小程序——[新闻资讯类]仿知乎(截图+源码).zip 微信小程序——[新闻资讯类]仿知乎(截图+源码).zip 微信小程序——[新闻资讯类]仿知乎(截图+源码).zip 微信小程序——[新闻资讯类]仿知乎(截图+源码).zip ...
仿知乎每天更新好文章,包括权威的时事解读、有趣的生活建议 更符合用户口味的「主题日报」,覆盖电影、财经、设计、体育等领域 长评优先展示 离线下载功能,及时缓存近期的 30 篇文章
cavas仿知乎动态背景效果,自适应分辨率,里面有详细代码,带注释
使用vue全家桶做的高仿知乎日报
仿知乎登录界面的风格,蓝色背景,渐变效果。
Swift精仿知乎日报iOS端
仿知乎滑动隐藏与显示ToolBar,SwipRefreshLayout刷新
使用 BottomSheetDialog 实现仿知乎分享控件,实现符合要求的自定义控件,详细讲解请看文章讲解:https://blog.csdn.net/lou_liang/article/details/82870831
仿知乎做的App,项目功能并不完整,但是还行,涉及到了eventbus、glide,material design,cardview和volley网络请求
微信小程序——仿知乎日报(截图+源码).zip 微信小程序——仿知乎日报(截图+源码).zip 微信小程序——仿知乎日报(截图+源码).zip 微信小程序——仿知乎日报(截图+源码).zip 微信小程序——仿知乎日报(截图+...
仿知乎界面的源码,界面和知乎界面差不多,有兴趣的可以下载 ,看看Android 代码
(微信小程序毕业设计)仿知乎(源码+截图)(微信小程序毕业设计)仿知乎(源码+截图)(微信小程序毕业设计)仿知乎(源码+截图)(微信小程序毕业设计)仿知乎(源码+截图)(微信小程序毕业设计)仿知乎(源码+截图)(微信小程序毕业...