使用属性动画实现星光四射的动画效果

在Android中, 属性动画是非常有意思的功能, 控制参数变换动画效果. 与使用gif图片相比, 动画控件要节约空间和增加响应速度. 本文介绍使用属性动画实现星光四射的动画效果, 可以作为点赞按钮.

更多: http://www.wangchenlong.org/

要点:
(1) 使用PercentLayout设置自定义控件的大小.
(2) 属性动画的两个重要函数, 中值和映射.
(3) 擦除画笔(PorterDuff.Mode.CLEAR)的使用方法.
(4) 使用颜色估值器(ArgbEvaluator)控制颜色变换.
(5) 自定义控件的延迟重绘(postInvalidate)方法.
(6) 属性动画(Property<View, Float>)的设置和使用.
(7) 使用映射函数, 控制变换节奏.
(8) 插值器(Interpolator)的使用方法.
(9) 动画集合(AnimatorSet)的使用方法.
(10) 点击事件(onTouchEvent)的设置.

star-logo

掌握这些之后, 我们就可以使用属性动画完成一些自定义控件, 让我们来看看是如何实现的.

本文源码的GitHub下载地址

欢迎Follow我的GitHub: https://github.com/SpikeKing

star-anim


主页

主页加载自定义的星型控件, 所有逻辑都在控件中实现.

逻辑

布局


星型控件

控件主要分为三个部分:
(1) 圆环的爆炸效果.
(2) 点状的散射效果.
(3) 星星的明暗变化.

布局, 使用PercentLayout, 圆环和星星占控件宽度的40%, 高度与宽度相同.

属性动画常用工具类, 映射函数和中值函数.


圆环

圆环要实现爆炸效果. 外圆是实心圆圈, 颜色渐变; 内圆是擦除效果.

逻辑

初始化, 外圆使用实心画笔(Paint), 内圆使用擦除画笔. ArgbEvaluator控制颜色变换.

圆圈, 内圆和外圆绘制在画布的中心, 半径是画布当前宽度的一半.

通过控制Progress控制内外圆圈的半径.

postInvalidate(), 延迟重绘, 不会阻碍UI线程.

设置动画属性, 通过设置progress的值, 改变圆圈的大小和颜色.


散射点

散射点, 由大点小点组成, 两类点排列和颜色均错开, 速度先慢后快向外发射.

初始化圆圈, 设置点的大小和半径, 大小点错开排列.

设置点的大小和半径, 颜色变化, 透明度, 使用映射函数控制速度变化.

添加属性


控件逻辑

喜欢按钮, 通过属性值变化(0-1), 设置子控件状态, 使用插值器控制速度变化.

初始化, 减速插值器用于圆环控件, 超出插值器用于星星图片, 加速再减速插值器用于散射点.

依次设计三个控件的动画, 放入动画集合, 设置初始状态, 启动.

点击事件


参考

属性动画虽然有些复杂, 但是掌握其中原理, 特别有意思, 类似于数学公式, 及其锻炼智商.

OK, that’s all! Enjoy it!

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

2 6 收藏 2 评论

关于作者:Spike

硕士毕业, 任职于春雨移动健康, 从事移动端架构工作. 做了六年技术研发, 还会一直坚持下去. 分享一些自己的开发经验. 个人主页 · 我的文章 · 6 ·    

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部