仿QQ好友点赞效果，属性动画+贝塞尔曲线实现

前言

属性动画 和 贝赛尔曲线 已经出来很久了，很多前辈写了很多不错的文章，在此不得不感谢这些前辈无私奉献的开源精神，能让我们站在巨人的肩膀上望得更远.如果你对属性动画还不太了解可以看看郭林的文章，贝塞尔曲线的使用可以参考Lin_Zero

效果图

image

实现思路

整体实现思路还是比较简单的，首先要有一个容器来装点出来的赞，然后通过属性动画对赞加一些动画效果，最后通过贝塞尔曲线使其做不规则的运动。

代码实现

好了，思路有了，咱们也废话不多说，直接上代码，首先是所有动画的实现

    /**
     *  实现点赞效果 平移 缩放 渐变
     * @param imageView
     * @return 所有动画的集合
     */
    private AnimatorSet getAnimator(final ImageView imageView) {

        //缩放
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(imageView,"scaleX",0.4f,1f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(imageView,"scaleY",0.4f,1f);
        //alpha
        ObjectAnimator alpha = ObjectAnimator.ofFloat(imageView,"alpha",0.4f,1f);

        //执行三个动画
        AnimatorSet enterSet = new AnimatorSet();
        enterSet.setDuration(500);
        enterSet.playTogether(scaleX,scaleY,alpha);

        //用贝塞尔曲线控制点赞的走向
        ValueAnimator bezierAnimator = getBezierAnimator(imageView);

        //综合所有动画
        AnimatorSet set = new AnimatorSet();
        //按顺序执行
        set.playSequentially(enterSet,bezierAnimator);
        //添加插值器
        set.setInterpolator(interpolators[random.nextInt(3)]);
        set.setTarget(imageView);

        set.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                removeView(imageView);
            }
        });
        return set;
    }

然后是通过贝塞尔曲线对赞的走向做了控制，代码如下

    /**
     * 通过贝塞尔曲线对赞走向做控制
     * @param imageView
     * @return
     */
    private ValueAnimator getBezierAnimator(final ImageView imageView) {

        //准备控制贝塞尔曲线的四个点（起始点p0,拐点p1,拐点p2,终点p3）
        PointF pointF0 = new PointF((mWidth-dWidth)/2,mHeight-dHeight);
        PointF pointF1 = getTogglePointF(1);
        PointF pointF2 = getTogglePointF(2);
        PointF pointF3 = new PointF(random.nextInt(mWidth),0);
        BezierEvaluator bezierEvaluator = new BezierEvaluator(pointF1,pointF2);

        final ValueAnimator animator = ValueAnimator.ofObject(bezierEvaluator,pointF0,pointF3);
        animator.setDuration(3000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                PointF pointF = (PointF) valueAnimator.getAnimatedValue();
                //控制属性变化
                imageView.setX(pointF.x);
                imageView.setY(pointF.y);
                imageView.setAlpha(1 - valueAnimator.getAnimatedFraction());//从可见到不可见
            }
        });

        return animator;
    }

这是估值器的实现

/**
 *
 * @author Liuzj
 * 功能描述: 贝塞尔曲线估值器
 */
public class BezierEvaluator implements TypeEvaluator<PointF> {
    /**
     * 拐点
     */
    private PointF pointF1;
    private PointF pointF2;

    public BezierEvaluator(PointF pointF1,PointF pointF2) {
        this.pointF1 = pointF1;
        this.pointF2 = pointF2;
    }

    @Override
    public PointF evaluate(float v, PointF pointF, PointF t1) {
        PointF point = new PointF();
        point.x = pointF.x*(1-v)*(1-v)*(1-v)
                +3*pointF1.x*v*(1-v)* (1-v)
                +3*pointF2.x*v*v*(1-v)
                +t1.x*v*v*v;
        point.y = pointF.y*(1-v)*(1-v)*(1-v)
                +3*pointF1.y*v*(1-v)* (1-v)
                +3*pointF2.y*v*v*(1-v)
                +t1.y*v*v*v;

        return point;
    }
}

可能有的朋友对evaluate方法里的实现有所疑惑，其实调用贝塞尔的三阶公式,然后把点跟公式里的对应上就ok了

image

END！

Thanks

本项目源码