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

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

前言

通过自定义控件,意欲模仿Twitter的点赞效果。
主要涉及:
1.三次贝塞尔曲线应用;
2.属性动画的综合应用;
3.自定义View流程.

拆解原效果

我们先看一下Twitter上的原版效果是怎样的.
放大后:

好吧!原速的看不太清楚,逐帧延迟后:

因为这个效果有需要使用多个动画杂糅而成,为了更确切得出每个子动画阶段所占比例还是用PS大法把它打开,根据该阶段的帧数以及总帧数来确定动画时长如何分配。

实现

1.动画控制

这里使用ValueAnimator并设置插值器为LinearInterpolator来获得随时间正比例变化的逐渐增大的整数值。这个整数值在这里有三个作用。

  1. 每监听到一个整数值变化重绘一次View.
  2. 根据整数值的大小范围来划分所处的不同阶段,这里共划分为五个状态.
    • 绘制心形并伴随缩小和颜色渐变.
    • 绘制圆并伴随放大和颜色渐变.
    • 绘制圆环并伴随放大和颜色渐变.
    • 圆环减消失、心形放大、周围环绕十四圆点.
    • 环绕的十四圆点向外移动并缩小、透明度渐变、渐隐.
  3. 以整数值为基础来实现其他动画效果避免出现大量的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 =
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值