浅谈渐变动画的实现

最近闲来无事,看了下动画特效相关内容,像下面这个就很炫酷,着重关注了它的实现原理,其实类似的交互动画在实际项目中并不常见,不过加上后还挺好看的。

1月-18-2017 17-05-00.gif

刚开始还不知道他的运行轨迹,有点云里雾里,于是录制了一个小视频,放了一个慢动作。


1月-18-2017 17-13-25.gif

动作分解

可以分解成两张图,一张十字,一张勾
1,十字渐变到勾时,缓缓移动横线的右边到竖线底部的位置,左边一点保持不动
2,竖线底部不动,顶部缓缓移动到左边的1/4的位置这样一个勾就形成了
勾变十字就是还原原来的位置

d9542734-6e4d-4b75-8a91-ff06e47f7277.png

260bddce-b4a9-47d1-8eed-ab0f5eb5b5a7.png
障眼法
颜色的渐变

ArgbEvaluator
用于根据一个起始颜色值和一个结束颜色值以及一个偏移量生成一个新的颜色,分分钟实现类似于微信底部栏滑动颜色渐变。

    ObjectAnimator.ofObject(this, mBackgroundColorProperty, mArgbEvaluator, Color.WHITE)
位置的旋转

180 * mRotation,每次旋转180度,mRotation 从0-1

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,980评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,267评论 4 61
  • 想你们了,我的女神老师,你看你发给我的情人节礼物,转眼间我又爱上那个叫“七巧”的日子,我喜欢放天灯祈福,还有我的花...
    谁知谁痴阅读 282评论 0 0
  • 我不断唠叨,我的老家(七十年代中期迁移前,我生活在小河西南边的孤单小村庄里,大家都称作下庄,总称是大黄庄)在双河口...
    金光大道朱应明阅读 244评论 0 0
  • 7.26,大太阳,照在裸露的皮肤上,像被火烤,一片辛辣…… 调到了新部门,里面有两位男同事,特别会吐槽,一会一句金...
    西窗芭蕉阅读 205评论 0 0