在上一篇博文Android 圖片彈跳動畫裡，我用兩種方法實現了一個彈跳的動畫，實現效果上篇博文裡面有，這裡就不再貼了，雖說是兩種方法，但實現機制是大同小異，核心思想就是遞迴的不斷啟動動畫，來實現View的上升和下降，後來發現還有另一種方法，不需要遞迴的去啟動多個動畫，只需要啟動一個動畫即可。

這裡核心思想是自定義Interpolator，也就是插值器，關於插值器是什麼網上有很多詳細的介紹，我們上篇博文也用到了，只不過用的是系統定義好的。這裡簡單說就是它不會改變動畫的執行順序，但可以改變動畫的執行效果，它的原理就是實現一個插值器的公共介面，完後具體實現getInterpolation方法，這個方法有一個引數是input，它表示了動畫執行的過程，它的值從0到1，在動畫執行過程中會不斷呼叫這個方法，並且input線性遞增，通過這個值，我們就可以根據自己動畫的函式來返回我們想要的效果。

在上篇博文中，我們說過這個動畫的幾個要點，這裡重新貼下：

1. 動畫彈起的高度越來越小，我這裡是第一次彈起螢幕的高度的1/2，第二次彈起1/4，第三次彈起1/8，以此類推

2. 我們將圖片的一次落下或彈起看成一次動畫，動畫的時間越來越短，假設第一次落下動畫需要1秒，那第一次彈起就需要1/2秒，第二次落下也是1/2秒，第二次彈起則需要1/4秒，以此類推

3. 下落的時候，速度越來越快，彈起的時候，速度越來越慢

其實Android本身已經寫好了一個彈起落下的Interpolator，叫BounceInterpolator，我們先簡單看看

public class BounceInterpolator implements Interpolator, NativeInterpolatorFactory {
    public BounceInterpolator() {
    }

    @SuppressWarnings({"UnusedDeclaration"})
    public BounceInterpolator(Context context, AttributeSet attrs) {
    }

    private static float bounce(float t) {
        return t * t * 8.0f;
    }

    public float getInterpolation(float t) {
        // _b(t) = t * t * 8
        // bs(t) = _b(t) for t < 0.3535
        // bs(t) = _b(t - 0.54719) + 0.7 for t < 0.7408
        // bs(t) = _b(t - 0.8526) + 0.9 for t < 0.9644
        // bs(t) = _b(t - 1.0435) + 0.95 for t <= 1.0
        // b(t) = bs(t * 1.1226)
        t *= 1.1226f;
        if (t < 0.3535f) return bounce(t);
        else if (t < 0.7408f) return bounce(t - 0.54719f) + 0.7f;
        else if (t < 0.9644f) return bounce(t - 0.8526f) + 0.9f;
        else return bounce(t - 1.0435f) + 0.95f;
    }

    /** @hide */
    @Override
    public long createNativeInterpolator() {
        return NativeInterpolatorFactoryHelper.createBounceInterpolator();
    }
}
 

這裡我們要關注的就是getInterpolation這個方法，上面已經解釋過它的實現原理，我們來看看對應的圖

這是網上找的圖片，這裡x軸是時間，也就是上面提到的input，y軸是動畫的過程，對照上面的實現，我們可以看到t < 0.3535f時，是一個遞增的拋物線，在0.3535f時，y為1，也就是動畫第一次落下，而t < 0.7408f時，是一個先遞減，再遞增的拋物線，也就是彈起又落下，而t < 0.9644f類似的，再一次彈起又落下，最後的0.9644到1是最後一次彈起落下，至於這裡的函式為什麼這樣定義，說實話我沒看懂，物理渣傷不起，估計可能跟重力感應還多少有些聯絡，不管這些，物理不是我們研究的重點，我們自己來實現類似的。為了簡化問題，我們就以圖片彈起兩次為例進行說明，至於彈起三次、四次、五次，原理都是類似的。

我們將動畫過程進行分解，圖片彈起兩次，經歷了5個過程：

1. 圖片第一次落下，從螢幕的頂部出現，直到螢幕底部

2. 圖片第一次彈起，從螢幕的底部彈起到螢幕高度的1/2

3. 圖片第二次落下，從螢幕高度的1/2落下到螢幕底部

4. 圖片第二次彈起，從螢幕的底部彈起到螢幕高度的1/4

5. 圖片第三次落下，從螢幕高度的1/4落下到螢幕底部

按照上面提到的動畫的要點2，我們假設第一步花費時間為x，則第二步和第三步花費時間分別為x / 2，第四步和第五步花費時間分別為x / 4，則有公式：

x + x / 2 * 2 + x / 4 * 2 = 1

一元方程， x的值為 2 / 5

有了這個值後，我們就可以得到類似上圖的一個分段拋物線，之前有免費畫拋物線的軟體，現在開始收費了，其它軟體畫有點麻煩，所以我就用文字描述下，對應上面動畫過程的五步：
1. 在x軸的【0，2/5】這個區間，是一個遞增的拋物線，y從0變為1，也就是圖片第一次落下，我們可以得到拋物線的函式為 y = 25 / 4 * x * x（至於這個函式怎麼來的，可能需要大家懂一點拋物線的知識，我們初中還是高中肯定學過，只不過時間長了忘了，我們可以先回憶一個簡單的拋物線，y = x * x，也就是AccelerateInterpolator的實現中用到的，x軸從0開始勻速到1，y軸的值從0開始加速到1，我們這裡只不過是將x的區間換成了【0，2/5】而已）

2. 在x軸的【2/5，3/5】這個區間，是一個遞減的拋物線，y從1變為1/2，也就是圖片第一次彈起

3. 在x軸的【3/5，4/5】這個區間，是一個遞增的拋物線，y從1/2變為1，也就是圖片第二次落下，2、3步是同一個拋物線，函式為y = 1/ 2 + 25 / 2 * (x - 3 / 5) * (x - 3 / 5)

4. 在x軸的【4/5，9/10】這個區間，是一個遞減的拋物線，y從1變為3/4，也就是圖片的第二次彈起

5. 在x軸的【9/10，1】這個區間，是一個遞增的拋物線，y從3/4變為1，也就是圖片的第三次落下，4、5步是同一個拋物線，函式為y = 3/4 + 25 * (x - 9/10) * (x - 9/10)

通過上面的分析，我們實現自己的插值器就很簡單了

public class JumpInterpolator implements TimeInterpolator {

    @Override
    public float getInterpolation(float input) {

        if (input <= 2/5f) {
            return 25 / 4f * input * input;
        } else if (input <= 4/5f) {
            return 1 / 2f + 25 / 2f * (input - 3 / 5f) * (input - 3 / 5f);
        } else {
            return 3 / 4f + 25 * (input - 9 / 10f) * (input - 9 / 10f);
        }

    }
}

看下MainActivity的實現

public class MainActivity extends Activity {
    private ImageView jump;
    private int mHeight;

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

        jump = (ImageView) findViewById(R.id.move);
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);

        if (hasFocus) {
            Rect outRect = new Rect();
            getWindow().findViewById(Window.ID_ANDROID_CONTENT).getDrawingRect(outRect);
            mHeight = outRect.height();

            beginTransAnimation();
        }
    }

    private void beginTransAtranslationYnimation() {
        ObjectAnimator animator = ObjectAnimator.ofFloat(jump, "translationY", -mHeight, 0);
        animator.setInterpolator(new JumpInterpolator());
        animator.setDuration(5000);
        animator.start();
    }
}

在頁面載入完成時，我們首先獲取螢幕的高度，並賦值給mHeight變數，完後啟動動畫，這裡動畫還是用的屬性動畫，指定動畫變化的部分為translationY，也就是y軸的座標，初始值為-mHeight，也就是初始時圖片的下邊緣跟螢幕的上邊緣重合（所以初始時看不到圖片），而動畫的終點為0，也就是圖片完全顯示在螢幕中，這裡最重要的是我們指定了插值器為我們剛剛定義的JumpInterpolator，完後指定動畫時間，最後啟動動畫即可，比較上一篇部落格的兩種實現方式，我們發現過程還是簡化了許多，沒有遞迴，也不會多次啟動動畫，一次就搞定。 原始碼下載