前言
通过自定义控件,意欲模仿Twitter的点赞效果。
主要涉及:
1.三次贝塞尔曲线应用;
2.属性动画的综合应用;
3.自定义View流程.
拆解原效果
我们先看一下Twitter上的原版效果是怎样的.
放大后:
好吧!原速的看不太清楚,逐帧延迟后:
因为这个效果有需要使用多个动画杂糅而成,为了更确切得出每个子动画阶段所占比例还是用PS大法把它打开,根据该阶段的帧数以及总帧数来确定动画时长如何分配。
实现
1.动画控制
这里使用ValueAnimator并设置插值器为LinearInterpolator来获得随时间正比例变化的逐渐增大的整数值。这个整数值在这里有三个作用。
- 每监听到一个整数值变化重绘一次View.
- 根据整数值的大小范围来划分所处的不同阶段,这里共划分为五个状态.
- 绘制心形并伴随缩小和颜色渐变.
- 绘制圆并伴随放大和颜色渐变.
- 绘制圆环并伴随放大和颜色渐变.
- 圆环减消失、心形放大、周围环绕十四圆点.
- 环绕的十四圆点向外移动并缩小、透明度渐变、渐隐.
- 以整数值为基础来实现其他动画效果避免出现大量的ObjectAnimator.
/**
* 展现View点击后的变化效果
*/
private void startViewMotion() {
if (animatorTime != null && animatorTime.isRunning())
return;
resetState();
animatorTime = ValueAnimator.ofInt(0, 1200);
animatorTime.setDuration(mCycleTime);
animatorTime.setInterpolator(new LinearInterpolator());//需要随时间匀速变化
animatorTime.start();
animatorTime.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int animatedValue =