Android動畫系列：

介紹

對於Interpolator(內插器)，寫過動畫的都不會陌生，其本身看做是一個時間計算器，用於定義動畫的執行的速率。

public class ValueAnimator extends Animator implements AnimationHandler.AnimationFrameCallback {

     ***            

    // The time interpolator to be used if none is set on the animation
    private static final TimeInterpolator sDefaultInterpolator =
            new AccelerateDecelerateInterpolator();
    /**
     * The time interpolator to be used. The elapsed fraction of the animation will be passed
     * through this interpolator to calculate the interpolated fraction, which is then used to
     * calculate the animated values.
     */
    private TimeInterpolator mInterpolator = sDefaultInterpolator;

    ***  

}
 

上面是ValueAnimator原始碼的一部分，在這裡可以清晰的看出來，在我們不為ValueAnimator設定Interpolator為AccelerateDecelerateInterpolator，也就是說系統預設是先加速後減速這樣一種動畫執行速率。

    LinearInterpolator ll = new LinearInterpolator();
    ObjectAnimator animator = ObjectAnimator.ofFloat(btnProperty, "rotation",
            0f, 360f);
    animator.setInterpolator(ll);
    animator.setDuration(5000);
    animator.setRepeatCount(ValueAnimator.INFINITE);

    ObjectAnimator animatorA = ObjectAnimator.ofFloat(btnPropertyA, "rotation",
            0f, 360f);

    animatorA.setRepeatCount(ValueAnimator.INFINITE);
    animatorA.setDuration(5000);

    animator.start();
    animatorA.start();
 

先定義兩個Button,其中，btnProperty背景色設定為紅色，而btnPropertyA的背景色設定為藍色.對兩個Button分別定義了動畫，btnProperty的動畫的Interpolator設定為LinearInterpolator，即動畫的執行速率為勻速運動，而btnPropertyA的動畫的Interpolator設定未設定使用的是預設的。從實際執行的效果可以清晰的看出，剛開始時，btnProperty動畫執行速率快於btnPropertyA，隨著動畫的執行，btnPropertyA逐漸追上了btnProperty,在同一輪動畫時，它們同時處於結束位置。對於動畫的預設Interpolator為AccelerateDecelerateInterpolator，也就有了合理的解釋了。

原始碼分析

對於動畫的執行速率，Interpolator是怎麼計算的呢？先看Interpolator的原始碼：

public interface Interpolator extends TimeInterpolator {
}

public interface TimeInterpolator {
    /**
     * Maps a value representing the elapsed fraction of an animation to a value that represents
     * the interpolated fraction. This interpolated value is then multiplied by the change in
     * value of an animation to derive the animated value at the current elapsed animation time.
     */
    float getInterpolation(float input);
}

從Interpolator的原始碼可以看出，Interpolator其實就是一個空的介面，繼承與TimeInterpolator。再看看TimeInterpolator這個介面，其內只聲明瞭getInterpolation(float)這一個方法。傳入getInterpolation(float)方法的引數實際上是動畫的進度，其值在0和1之間，0表示動畫開始，1表示動畫結束。而其返回值是表示內插器計算出來的值，其可以小於0或者大於1。然後將內插值乘以動畫中屬性值的差量即為畫的當前屬性值。

剛才我們用到了LinearInterpolator，表示動畫勻速執行，下面看看勻速效果是怎麼現實的。

public class LinearInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {

    public LinearInterpolator() {
    }

    public LinearInterpolator(Context context, AttributeSet attrs) {
    }

    public float getInterpolation(float input) {
        return input;
    }

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

從LinearInterpolator原始碼中可以看出，在getInterpolation(float input)方法中並沒有對input值做任何處理。由於input值是動畫執行的百分比，這個值是均勻的。故而LinearInterpolator計算出的內插值其實就是動畫執行的百分比，沒有啥變化。

public class AccelerateDecelerateInterpolator extends BaseInterpolator
        implements NativeInterpolatorFactory {
    public AccelerateDecelerateInterpolator() {
    }

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

    public float getInterpolation(float input) {
        return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
    }

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

對於AccelerateDecelerateInterpolator而言，其getInterpolation(input)方法中對intput做了處理，下圖為其處理方式所對應的函式影象，從影象可以清晰的看出，內插值開始時增長趨勢很快，然後在減小。相對應內插值計算動畫屬性時，應該是起初動畫屬性值逐漸增大很快，然後增大趨勢減弱，意味著表現出來的動畫效果為先加速再減速。

自定義Interpolator

1.自定義一個Interpolator,命名為MyInterpolator

public class MyInterpolator implements TimeInterpolator {
    @Override
    public float getInterpolation(float input) {
        float inter;
        inter = 1 - input * input;
        return inter;
    }
}animatorA

2.將animator的Interpolator設定為LinearInterpolator，而animatorA的設定為剛定義的MyInterpolator。

    LinearInterpolator ll = new LinearInterpolator();
    ObjectAnimator animator = ObjectAnimator.ofFloat(btnProperty, "rotation",
            0f, 360f);
    animator.setInterpolator(ll);
    animator.setDuration(5000);
    animator.setRepeatCount(ValueAnimator.INFINITE);

    ObjectAnimator animatorA = ObjectAnimator.ofFloat(btnPropertyA, "rotation",
            0f, 360f);
    animatorA.setInterpolator(new MyInterpolator());
    animatorA.setRepeatCount(ValueAnimator.INFINITE);
    animatorA.setDuration(5000);

    animator.start();
    animatorA.start();

從效果圖上，可以看出btnPropertyA的實際動畫效果是倒著轉的，而且是先加速後減速，為啥會出現這種情況呢？百思不得其解，前面已經說過btnPropertyA的動畫的內插器為MyInterpolator，那麼此種效果必然與內插器有關。先不管效果到底是為啥，先MyInterpolator中，從1 - input * input的函式影象和實際值，來看看getInterpolation(input)的處理結果。

1. 函式影象
   下圖為在0-1之間的函式影象，從函式影象可以看出，其函式值先加速後減速。

1. 實際值

從函式影象和實際值的差值，我們清楚的看到，動畫屬性值的變化幅度先逐漸變大然後再逐漸減少的，這也能夠解釋動畫的執行速率問題了。

接下來看看動畫為啥倒轉呢。在宣告動畫時，開始旋轉角度為0f，結束的旋轉角度為360.0f,也就是動畫的實際效果是旋轉一週，這個沒有問題，實際上也就是選擇一週的。而動畫的旋轉角度差值為360.0f。假如動畫的執行百分比為0.1時，MyInterpolator內插器計算出來的內插值為0.99f.
前面說過將內插值乘以動畫中屬性值的差量即為畫的當前屬性值，此時動畫當前的屬性值應為356.4f，也就是此時，btnPropertyA旋轉了356.4。同理當動畫執行百分比為0.2時，btnPropertyA旋轉了345.6度。也就是btnPropertyA的動畫效果實際上是先旋轉到360度，然後慢慢旋轉到0度(初始位置)。這也就是btnPropertyA的動畫倒轉的原因。

也就是說動畫的屬性值的計算是由Interpolator和Evaluators共同計算出來的。當動畫開始以後，Interpolator先獲取動畫執行的百分比並計算出來內插值，Evaluators在獲取Interpolator計算出的內差值並在evaluate(float fraction, MyPoint pointStart, MyPoint pointEnd)內計算出動畫的屬性值。有說過fraction為動畫的執行的百分比，其實描述的並不準確，其實際值因為Interpolator計算出的內插值。既然瞭解到了Interpolator、Evaluators和動畫屬性值之間的計算關係，以後隨心所欲的自定義動畫了。