`
南瓜猿
  • 浏览: 45031 次
  • 性别: Icon_minigender_1
  • 来自: 长沙市
社区版块
存档分类
最新评论

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

阅读更多

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

然后在默认生成的第一个项目发现了一个新的控件,即FloatingActionButton,联想到知乎上也有这个控件,于是模仿知乎的效果试一试。

大概分为四个步骤:

Step1:修改原生FloatingActionButton的背景颜色和点击颜色。

Step2:描绘FloatingActionButton的点击动画效果。

Step3:设置蒙版模拟点击以后的界面雾化效果。

Step4:设置点击出现的子按钮与描绘子按钮出现的动画效果(下篇博客详述)。

 

Step1:

首先在MainActivity中找到初始化FloatingActionButton的语句:

 

ctrl+左键这个fab资源链接,可以看到原生的FloatingActionButton的xml布局:

 

以及图片预览:

下面开始修改背景颜色,在xml中加入

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <span>    </span>app:backgroundTint="#ff000099"  
  2.         app:rippleColor="#33728dff"  

这里之所以设定app的背景颜色和点触颜色,可以从FloatingActionButton的类里看出来:

 

可以看到,设置背景颜色和背景资源的方法都是被禁用的,下面再看类中获得背景颜色和点击颜色的地方:

可以看到,都是从默认的属性文件中获得的,所以我们只能修改系统的属性文件才能改变这个按钮的颜色和点击色。

修改后的颜色:

Step2:

下图演示知乎的FloatingActionButton动画效果:

 

可以看到,第一次点击,按钮先向左旋转135度(左摇小角度再右摇)停止,第二次点击,按钮回到原位置(左摇小角度)。由此可见这是一个模拟了惯性,看起来十分精致的动画效果。

设计思路:

通过两段旋转动画实现模拟惯性效果,虽然看起来效果几乎差不多,但是知乎的可能还用了插值器来设置加速度使得惯性更为逼真。

首先在FloatingActionButton的点击事件中调用两个方法:

分别为openMenu():

以及closeMenu():

这个textview是step3里的蒙版。。。可以直接先跳到step3设置好再写进来QAQ

运行效果:

 

Step3:

首先在xml文件中设置一个白板:

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

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

 

 

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

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

0
2
分享到:
评论

相关推荐

    微信小程序——仿知乎(截图+源码).zip

    微信小程序——仿知乎(截图+源码).zip 微信小程序——仿知乎(截图+源码).zip 微信小程序——仿知乎(截图+源码).zip 微信小程序——仿知乎(截图+源码).zip 微信小程序——仿知乎(截图+源码).zip 微信小程序...

    Android仿知乎悬浮功能按钮FloatingActionButton效果

    本篇将详细介绍如何在Android中仿照知乎的悬浮功能按钮实现类似的效果,包括使用属性动画、自定义ViewGroup以及组合使用CardView和FloatingActionButton。 首先,我们要创建一个自定义的`TagView`,它是一个带有...

    仿知乎加号按钮

    在Android开发中,为了实现类似知乎加号按钮的动画效果,我们需要借助于Android的Animation库,特别是`android.support.v7.widget`包中的某些组件和工具。这个加号按钮的动画通常涉及按钮的展开和收缩,这可以是通过...

    仿知乎前端页面

    【标题】"仿知乎前端页面"的实现是一个前端开发项目,旨在模仿知名问答社区知乎的用户界面和交互体验。这个项目涵盖了多个关键的技术领域,包括前端框架和后端服务的集成,以及网页的布局和功能设计。 【描述】中...

    仿知乎背景动画

    "仿知乎背景动画"是一种借鉴了知名问答社区知乎的动态背景效果,它能够使网页更具活力,同时也能为用户带来更舒适的浏览体验。接下来,我们将深入探讨这个话题,包括动画原理、实现方式以及如何自适应不同分辨率。 ...

    仿知乎material design

    仿知乎App会采用Material Design的组件,如Buttons、Cards、FAB(浮动操作按钮)等,同时可能运用过渡动画和触摸反馈来增强用户体验。 4. **CardView**:这是Material Design中的一种视图容器,通常用于展示具有...

    运营版仿知乎问答社区响应式源码带打赏功能.zip

    仿知乎问答社区响应式源码带... 知乎更像一个论坛:用户围绕着某一感兴趣的话题进行相关的讨论,同时可以关注兴趣一致的人  支持文章、话题、第三方登录、文章和问题打赏,作者打赏,回答者打赏。设置好可以在线充值

    仿知乎界面源码

    6. **Material Design**:Google推出的 Material Design 设计语言提供了丰富的UI组件和交互规范,仿知乎界面可能参考了其中的设计原则,如颜色系统、动画效果和触控反馈等。 7. **数据绑定(Data Binding)**:为了...

    ios-仿知乎滑动显示广告效果.zip

    在iOS开发中,实现类似知乎滑动显示广告的效果是一种常见的用户界面交互设计,它能够吸引用户的注意力并提供信息展示。这种效果通常是通过结合滚动视图(UIScrollView)和自定义动画来实现的。在这个名为"ios-仿知乎...

    仿知乎的微信小程序源代码分享

    仿知乎的微信小程序源代码分享仿知乎的微信小程序源代码分享仿知乎的微信小程序源代码分享仿知乎的微信小程序源代码分享仿知乎的微信小程序源代码分享仿知乎的微信小程序源代码分享仿知乎的微信小程序源代码分享仿...

    微信小程序——[新闻资讯类]仿知乎(截图+源码).zip

    微信小程序——[新闻资讯类]仿知乎(截图+源码).zip 微信小程序——[新闻资讯类]仿知乎(截图+源码).zip 微信小程序——[新闻资讯类]仿知乎(截图+源码).zip 微信小程序——[新闻资讯类]仿知乎(截图+源码).zip ...

    精品源码 / 网页模板 / 仿知乎 / PC端 / 登录注册 / 二维码登录

    "精品源码 / 网页模板 / 仿知乎 / PC端 / 登录注册 / 二维码登录" 这个标题揭示了这是一个针对网页设计的资源,特别是前端开发领域。它是一个仿制知乎网站PC端登录和注册界面的模板,还包含了二维码登录功能,意味着...

    Android大作业-仿知乎日报.zip

    Android大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业...

    ThinkPhp框架仿知乎问答社区响应式源码.zip

    ThinkPhp框架仿知乎问答社区响应式源码 程序测试: 运行环境:PHP56+MYSQL5.5+伪静态 程序测试 上传到网站根目录   2、用phpMyadmin导入数据库文件youyacao.sql   3、修改数据库链接文件/system...

    Vue3.0+TS 仿知乎

    仿知乎每天更新好文章,包括权威的时事解读、有趣的生活建议  更符合用户口味的「主题日报」,覆盖电影、财经、设计、体育等领域  长评优先展示  离线下载功能,及时缓存近期的 30 篇文章

    使用vue全家桶做的高仿知乎日报

    8. **响应式设计**:为了适应不同设备的屏幕尺寸,项目需要采用响应式设计,Vue.js配合Flex布局和媒体查询可以轻松实现这一目标。 通过以上知识点的学习和实践,你不仅可以掌握Vue.js全家桶的使用,还能理解如何...

    悬停抽屉控件 —— 仿知乎收藏夹

    在知乎收藏夹的实现中,这种控件被巧妙地应用,以实现一个既可悬停在屏幕中央,又能平滑滑动至全屏的动态效果。下面将详细解析这种控件的设计原理、实现方法以及相关的Android开发知识。 首先,"悬停抽屉控件"的...

    仿知乎登录界面

    本文将深入探讨如何构建一个“仿知乎登录界面”,重点关注其蓝色背景与渐变效果的设计实现。 首先,我们从颜色心理学的角度来看,蓝色通常给人一种专业、信任和宁静的感觉,这正是知乎品牌形象的核心元素。因此,...

Global site tag (gtag.js) - Google Analytics