Android用Animation實現完整的拋物線效果

最近需求要做一個小球上升再下降的拋物線運動，類似太陽東昇西落的動畫。

在網上找了好久，好多的拋物線都是平拋，用於購物車添加效果。

於是自己動手，做了一個完整的向上拋物線的動畫。

首先要區分兩個概念，一個是VIew的座標系，如下圖（來自網絡）

另外一個就是Animation動畫的座標，最開始，我以爲動畫是在View座標系上進行的。研究之後才發現，Animation有自己的座標，跟View的座標沒有關係。如下（圖片來源於網絡），動畫的座標原點是VIew動畫開始的起點（左上角）

所以要實現完整的拋物線運動，首先要通過計算，算出拋物線的起點、頂點、終點。通過設置動畫參數就可以了

首先確定拋物線的原點（TextView的中心），然後在通過對這個座標在X軸Y軸上加減得到起點。頂點、終點。

private void initLocation(TextView textView) {
        //獲取拋物線原點座標
        int[] point_location = new int[2];
        textView.getLocationInWindow(point_location);
        int pointX = point_location[0] - textView.getWidth() / 2;
        int pointY = point_location[1] - textView.getHeight() / 2;

        //獲取拋物線起點座標
        startX = pointX - 500;
        startY = pointY;
        
       //獲取拋物線頂點座標
        topX = pointX;
        topY = pointY - 800;

        //獲取拋物線終點座標
        endX = pointX + 500;
        endY = pointY;
    }

最後就可以做動畫啦，動畫分爲上升和下降兩個部分

    /**
     * 拋物線 上升動畫
     */
    @TargetApi(11)
    public void playUpAnimation() {
        initLocation(tvPoint);
        moveingIV = (ImageView) getLayoutInflater().inflate(R.layout.animator_image, null);
        anim_mask_layout.addView(moveingIV);//把動畫圖片添加到動畫層

        addViewToAnimLayout(moveingIV, startX, startY);

        //拋物線動畫，原理：兩個位移動畫，一個橫向勻速移動，一個縱向變速移動，兩個動畫同時執行，就有了拋物線的效果。
        ObjectAnimator translateAnimationX = ObjectAnimator.ofFloat(moveingIV, "translationX", 0, topX - startX);
        translateAnimationX.setDuration(800);
        translateAnimationX.setInterpolator(new AccelerateInterpolator());

        ObjectAnimator translateAnimationY = ObjectAnimator.ofFloat(moveingIV, "translationY", 0, topY - startY);
        translateAnimationY.setDuration(800);
        translateAnimationY.setInterpolator(new LinearInterpolator());

        AnimatorSet animatorSet = new AnimatorSet();//設置動畫播放順序
        animatorSet.play(translateAnimationX).with(translateAnimationY);
        animatorSet.start();
    }

     /**
     * 拋物線 下降動畫
     */
    @TargetApi(11)
    public void playDownAnimation() {

        //拋物線動畫，原理：兩個位移動畫，一個橫向勻速移動，一個縱向變速移動，兩個動畫同時執行，就有了拋物線的效果。
        ObjectAnimator translateAnimationX = ObjectAnimator.ofFloat(moveingIV, "translationX", topX - startX, endX - startX);
        translateAnimationX.setDuration(800);
        translateAnimationX.setInterpolator(new LinearInterpolator());

        ObjectAnimator translateAnimationY = ObjectAnimator.ofFloat(moveingIV, "translationY", topY - startY, 0);
        translateAnimationY.setDuration(800);
        translateAnimationY.setInterpolator(new AccelerateInterpolator());
        AnimatorSet animatorSet = new AnimatorSet();//設置動畫播放順序
        animatorSet.play(translateAnimationX).with(translateAnimationY);
        translateAnimationY.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                anim_mask_layout.removeView(moveingIV); //動畫結束後移除動畫圖片
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
        animatorSet.start();
    }

完整DEMO

https://download.csdn.net/download/y280903468/11970396