Android基于贝塞尔曲线实现的点赞效果

前一阶段由于项目需要实现一个点赞效果，后来通过贝塞尔曲线实现了该效果。效果如下

我们这里使用的是三阶贝塞尔曲线。

三阶贝塞尔曲线代码如下

import android.animation.TypeEvaluator;
import android.graphics.PointF;

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 time, PointF startValue,
                           PointF endValue) {

        float timeLeft = 1.0f - time;
        PointF point = new PointF();//结果

        point.x = timeLeft * timeLeft * timeLeft * (startValue.x)
                + 3 * timeLeft * timeLeft * time * (pointF1.x)
                + 3 * timeLeft * time * time * (pointF2.x)
                + time * time * time * (endValue.x);

        point.y = timeLeft * timeLeft * timeLeft * (startValue.y)
                + 3 * timeLeft * timeLeft * time * (pointF1.y)
                + 3 * timeLeft * time * time * (pointF2.y)
                + time * time * time * (endValue.y);
        return point;
    }
}

   @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        like = (ImageView) findViewById(R.id.like);
        like.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                PointF pointP0 = new PointF();//p0
                pointP0.x = like.getX();
                pointP0.y = like.getY();
                original = pointP0;

                PointF pointP3 = new PointF();//p3
                pointP3.x = pointP0.x - 250;
                pointP3.y = pointP0.y - 300;

                PointF pointP1 = new PointF();//p1
                pointP1.x = pointP0.x - 50;
                pointP1.y = pointP0.y - 300;

                PointF pointP2 = new PointF();//p2
                pointP2.x = pointP0.x - 200;
                pointP2.y = pointP0.y - 300;

                // 初始化一个贝塞尔计算器- - 传入
                BezierEvaluator evaluator = new BezierEvaluator(pointP1,
                        pointP2);
                ValueAnimator animator = ValueAnimator.ofObject(evaluator, pointP0,
                        pointP3);
                animator.addUpdateListener(new BezierListener(like));
                animator.setTarget(like);
                animator.setDuration(1500);
                animator.start();
            }
        });

    }

  private class BezierListener implements ValueAnimator.AnimatorUpdateListener {
        private ImageView target;

        public BezierListener(ImageView target) {
            this.target = target;
        }

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            //更新值之后更新UI
            PointF pointF = (PointF) animation.getAnimatedValue();
            target.setX(pointF.x);
            target.setY(pointF.y);
            // 这里顺便做一个alpha动画
            target.setAlpha(1 - animation.getAnimatedFraction());
            target.setScaleX(1 + animation.getAnimatedFraction());
            target.setScaleY(1 + animation.getAnimatedFraction());
            if (animation.getAnimatedFraction() == 1) {
                target.setX(original.x);
                target.setY(original.y);
                target.setAlpha(1.0f);
                target.setScaleX(1);
                target.setScaleY(1);
            }
        }
    }

这里扩展效果很多，各位看官可以自己打开脑洞去实现了。