在Android中, 属性动画是非常有意思的功能, 控制参数变换动画效果. 与使用gif图片相比, 动画控件要节约空间和增加响应速度. 本文介绍使用属性动画实现星光四射的动画效果, 可以作为点赞按钮.
要点:
(1) 使用PercentLayout设置自定义控件的大小.
(2) 属性动画的两个重要函数, 中值和映射.
(3) 擦除画笔(PorterDuff.Mode.CLEAR)的使用方法.
(4) 使用颜色估值器(ArgbEvaluator)控制颜色变换.
(5) 自定义控件的延迟重绘(postInvalidate)方法.
(6) 属性动画(Property<View, Float>)的设置和使用.
(7) 使用映射函数, 控制变换节奏.
(8) 插值器(Interpolator)的使用方法.
(9) 动画集合(AnimatorSet)的使用方法.
(10) 点击事件(onTouchEvent)的设置.
掌握这些之后, 我们就可以使用属性动画完成一些自定义控件, 让我们来看看是如何实现的.
本文源码的GitHub下载地址
欢迎Follow我的GitHub: https://github.com/SpikeKing
主页
主页加载自定义的星型控件, 所有逻辑都在控件中实现.
逻辑
|
1 2 3 4 5 6 7 |
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } } |
布局
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="clwang.chunyu.me.wcl_like_anim_demo.MainActivity"> <clwang.chunyu.me.wcl_like_anim_demo.LikeButtonView android:layout_width="200dp" android:layout_height="200dp" android:layout_gravity="center"/> </FrameLayout> |
星型控件
控件主要分为三个部分:
(1) 圆环的爆炸效果.
(2) 点状的散射效果.
(3) 星星的明暗变化.
布局, 使用PercentLayout, 圆环和星星占控件宽度的40%, 高度与宽度相同.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <clwang.chunyu.me.wcl_like_anim_demo.DotsView android:id="@+id/like_button_dv_dots" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center"/> <android.support.percent.PercentRelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <clwang.chunyu.me.wcl_like_anim_demo.CircleView android:id="@+id/like_button_cv_circle" android:layout_width="0dp" android:layout_height="0dp" app:layout_aspectRatio="100%" app:layout_widthPercent="40%"/> </android.support.percent.PercentRelativeLayout> <android.support.percent.PercentRelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <ImageView android:id="@+id/like_button_iv_star" android:layout_width="0dp" android:layout_height="0dp" android:layout_gravity="center" android:contentDescription="@null" android:src="@drawable/ic_star_rate_off" app:layout_aspectRatio="100%" app:layout_widthPercent="40%"/> </android.support.percent.PercentRelativeLayout> </FrameLayout> |
属性动画常用工具类, 映射函数和中值函数.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/** * 工具类 * <p> * Created by wangchenlong on 16/1/5. */ public class Utils { // 映射到下一个域 public static double mapValueFromRangeToRange(double value, double fromLow, double fromHigh, double toLow, double toHigh) { return toLow + ((value - fromLow) / (fromHigh - fromLow) * (toHigh - toLow)); } // 中间值, value<low, 返回low, value>high, 返回high. public static double clamp(double value, double low, double high) { return Math.min(Math.max(value, low), high); } } |
圆环
圆环要实现爆炸效果. 外圆是实心圆圈, 颜色渐变; 内圆是擦除效果.
逻辑
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
/** * 圆形视图, 外圆是实心圆圈, 颜色渐变; 内圆是擦除效果. * <p> * Created by wangchenlong on 16/1/5. */ public class CircleView extends View { private static final int START_COLOR = 0xFFFF5722; private static final int END_COLOR = 0xFFFFC107; |
