不知道大家有没有发现，主流的电商类APP添加商品到购物车时，都会伴随一个小的“添加”动画。你有没有想过它是怎么实现的呢？今天我们就一起来学习下。

其实实现这个效果很简单，主要涉及到两个知识点：贝塞尔曲线和自定义Evaluator估值器。下面我先简单介绍下这两个知识点，如果你之前有了解过这两块的话，可以直接翻到下面看下实现代码。

贝塞尔曲线是数值分析领域的重要参数曲线，在我们的生活中随处都可以看到它的影子，比如：QQ聊天气泡的拖拽效果、直播室送花点赞效果、电量水波纹效果等等。贝塞尔曲线可以分为一阶贝塞尔曲线、二阶贝塞尔曲线、三阶贝塞尔曲线 .....。在这里我们用到了二阶贝塞尔曲线，下面我们先来看下它的计算公式：

公式.jpg

相信大家在开发过程中都有用到过属性动画吧，属性动画中有两个很重要的知识点，那就是差值器Interpolator和估值器Evaluator。简单来讲，差值器就类似于我们物理中所学的“加速度”，比如我们的执行动画需要先加速再减速。Android系统为我们内置了几种常见的差值器，在某些特定情况下不能满足需要的话，我们就需要实现TimeInterpolator接口实现自定义差值器。估值器Evaluator其实就是一个转换器，他能把小数进度转换成对应的具体数值，我们可以实现TypeEvaluator接口来自定义估值器。

我们先思考一下，加入购物车动画效果就相当于数学中常见的抛物线，可以借助二阶贝塞尔曲线来实现，那我们怎么确定起始点P0、控制点P1、终点P2的位置呢？起始点P0的位置就是我们的商品添加按钮所在位置，终点P2位置就是界面左下角购物车Icon图标所在的位置，控制点的位置要怎么选取呢？在这里我们可以沿添加按钮水平向左，沿购物车Icon图标竖直向上，两条线的交点处正可以作为我们的控制点坐标，到此三个点正好构成一个倒立的直角三角形。控制点P1的横坐标等于终点P2的横坐标，控制点P1的纵坐标等于起始点P0的纵坐标。下面我们就可以进行编码工作了。

首先自定义估值器CartEvaluator：

public class CartEvaluator implements TypeEvaluator<PointF>{

    private PointF pointCur;
    private PointF mControlPoint;

    public CartEvaluator(PointF mControlPoint) {

        this.mControlPoint = mControlPoint;
        pointCur = new PointF();
    }

    @Override
    public PointF evaluate(float fraction, PointF startValue, PointF endValue) {
       // 将二阶贝塞尔曲线的计算公式直接代入即可
        pointCur.x = (1 - fraction) * (1 - fraction) * startValue.x
                + 2 * fraction * (1 - fraction) * mControlPoint.x + fraction * fraction * endValue.x;
        pointCur.y = (1 - fraction) * (1 - fraction) * startValue.y
                + 2 * fraction * (1 - fraction) * mControlPoint.y + fraction * fraction * endValue.y;

        return pointCur;
    }
}

在这里我们创建了一个pointCur对象，专门用来存储当前移动点的坐标。

布局文件

最后看下Activity中的代码实现：

public class MainActivity extends AppCompatActivity {

    private ImageView mAddOne;
    private ImageView mAddTwo;
    private ImageView mAddThree;
    private ImageView mCart;
    private ViewGroup mRootView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();

        initListener();
    }

    // 初始化控件
    private void initView(){
        mRootView = (ViewGroup) getWindow().getDecorView();
        mCart = findViewById(R.id.mCart);
        mAddOne = findViewById(R.id.mAddOne);
        mAddTwo = findViewById(R.id.mAddTwo);
        mAddThree = findViewById(R.id.mAddThree);
    }

    // 初始化监听
    private void initListener(){
        mAddOne.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                playAnim(view);
            }
        });

        mAddTwo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                playAnim(view);
            }
        });

        mAddThree.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                playAnim(view);
            }
        });
    }
    
    // 执行动画
    private void playAnim(final View view){

        //创建int数组，用来接收贝塞尔起始点坐标和终点坐标值
        int[] startPosition = new int[2];
        int[] endPosition = new int[2];

        view.getLocationInWindow(startPosition);
        mCart.getLocationInWindow(endPosition);

        PointF startF = new PointF();        //起始点 startF
        PointF endF = new PointF();          //终点 endF
        PointF controlF = new PointF();      //控制点 controlF

        startF.x = startPosition[0];
        startF.y = startPosition[1] ;
        endF.x = endPosition[0]+mCart.getWidth()/2-view.getWidth()/2;             //微调处理，确保动画执行完毕“添加”图标中心点与购物车中心点重合
        endF.y = endPosition[1]+mCart.getHeight()/2 - view.getHeight()/2;
        controlF.x = endF.x;
        controlF.y = startF.y;
 
        // 创建执行动画的“添加”图标
        final ImageView imageView = new ImageView(this);           
        mRootView.addView(imageView);
        imageView.setImageResource(R.mipmap.cartadd);
        imageView.getLayoutParams().width = view.getMeasuredWidth();
        imageView.getLayoutParams().height = view.getMeasuredHeight();

        ValueAnimator valueAnimator = ValueAnimator.ofObject(new CartEvaluator(controlF), startF, endF);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                PointF pointF = (PointF) animation.getAnimatedValue();
                imageView.setX(pointF.x);
                imageView.setY(pointF.y);
            }
        });

        valueAnimator.addListener(new AnimatorListenerAdapter() {

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                // 动画执行完毕，将执行动画的“添加”图标移除掉
                mRootView.removeView(imageView);
                
                // 执行购物车缩放动画
                AnimatorSet animatorSet = new AnimatorSet();
                ObjectAnimator animatorX = ObjectAnimator.ofFloat(mCart, "scaleX", 1f, 1.2f, 1f);
                ObjectAnimator animatorY = ObjectAnimator.ofFloat(mCart, "scaleY", 1f, 1.2f, 1f);
                animatorSet.play(animatorX).with(animatorY);
                animatorSet.setDuration(400);
                animatorSet.start();
            }
        });

        valueAnimator.setDuration(800);
        valueAnimator.start();
    }
}

luping.gif