浅谈渐变动画的实现

2017-01-18 本文已影响40人岁月留痕

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

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