Android自定义控件——点赞效果(仿Twitter)

最新推荐文章于 2021-05-27 06:29:26 发布

同中书门下平章事jaren

最新推荐文章于 2021-05-27 06:29:26 发布

阅读量5.9k

点赞数 2

分类专栏： Android 文章标签： android 控件点赞 twitter 动画

本文链接：https://blog.csdn.net/l_wwbs/article/details/72781717

版权

本文介绍了如何使用自定义控件在Android中实现类似Twitter的点赞动画，涉及三次贝塞尔曲线、属性动画和自定义View流程。通过分析原版效果并拆解，利用ValueAnimator和插值器控制动画，结合图形绘制实现心形、圆和圆环的动态变化，同时提供点击事件处理点赞状态。

摘要由CSDN通过智能技术生成

前言

通过自定义控件，意欲模仿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 =