Interpolator插值器詳解

動畫的基本原理是從開始時間到結束時間一幀一幀的播放靜態圖像。Interpolator插值器來指定動畫如何變化的東東。Interpolator本質上講是一種數學函數,參數是0.0到1.0之間的浮點數,輸出值也是0.0到1.0的浮點數,曲線的斜率是速度。

Android系統的插值器有9種:
這裏寫圖片描述

Interpolators的使用方式有兩種:一種是通過xml文件來設置,另一種在代碼中設置
xml中的使用

<?xml version="1.0" encoding="utf-8"?>
<linearInterpolator       xmlns:android="http://schemas.android.com/apk/res/android"
    android:factor="2"
  />
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:interpolator="@anim/linearpolator_alpha"
    />

本篇文章使用的動畫效果是在平移動畫上進行的說明,關於alpha scale rotate上的效果與此類似,開動你的腦筋自己想象吧。

1.LinearInterpolator 線性插值器

資源ID:@android:anim/linear_interpolator
xml標籤:linearInterpolator
函數公式:y = t
座標系解釋:x軸表示的是動畫的進度,取值範圍是[0.0,1.0],y軸表示的得到的值,取值可以爲正可以爲負,1.0是他的目標值,下面的座標圖表示的含義都相同

這裏寫圖片描述      這裏寫圖片描述

2.AccelerateInterpolator加速插值器

資源ID: @android:anim/accelerate_interpolator
XML標記: accelerateInterpolator
函數公式: y=t^(2f)
有參構造函數:public AccelerateInterpolator(float factor) xml中屬性:android:factor
描述:起始速度是0,速度越來越快,加速運動。factor的大小對曲線的影響看圖吧。

這裏寫圖片描述    這裏寫圖片描述 
關鍵源碼:

 public AccelerateInterpolator(float factor) {
        mFactor = factor;
        mDoubleFactor = 2 * mFactor;
    }
 public float getInterpolation(float input) {
        if (mFactor == 1.0f) {
            return input * input;
        } else {
            return (float)Math.pow(input, mDoubleFactor);//冪函數y = input^mDoubleFactor  
        }
    }

3.DecelerateInterpolator減速插值器

資源ID: @android:anim/decelerate_interpolator
XML標記: decelerateInterpolator
函數公式: y=1-(1-t)^(2f)
有參構造函數:public DecelerateInterpolator(float factor) xml中屬性:android:factor
描述:起始速度不爲0,速度越來越慢,最後速度爲0,減速運動。factor的大小對曲線的影響看圖吧。

這裏寫圖片描述      這裏寫圖片描述
關鍵源碼:

 public float getInterpolation(float input) {
        float result;
        if (mFactor == 1.0f) {
            result = (float)(1.0f - (1.0f - input) * (1.0f - input));
        } else {
            result = (float)(1.0f - Math.pow((1.0f - input), 2 * mFactor));
        }
        return result;
    }

4.AccelerateDecelerateInterpolator先加速後減速插值器

資源ID: @android:anim/accelerate_decelerate_interpolator
XML標記: accelerateDecelerateInterpolator
函數公式: y=cos((t+1)π)/2+0.5
描述:速度從0開始,先加速後加速,最後速度爲0

這裏寫圖片描述      這裏寫圖片描述
關鍵源碼:

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

5.AnticipateInterpolator

資源ID: @android:anim/anticipate_interpolator
XML標記: anticipateInterpolator
函數公式: y=(T+1)×t^3–T×t^2
有參的構造函數:public AnticipateInterpolator(float tension) xml中的屬性:android:tension
描述:第一步運動,反方向運動,先加速後減速至0,此時運動到的位置爲負值,第二步運動,正方向加速運動,速度越來越快。就像跳遠一樣,先向後退幾步,增大助跑距離。tension大小對曲線的影響請看圖

這裏寫圖片描述      這裏寫圖片描述
關鍵源碼:

 public float getInterpolation(float t) {
        return t * t * ((mTension + 1) * t - mTension);
    }

6.OvershootInterpolator

資源ID: @android:anim/overshoot_interpolator
XML標記: overshootInterpolator
函數公式: y=(T+1)x(t1)^3+T×(t1)^2 +1
有參的構造函數:public OvershootInterpolator(float tension) xml中的屬性:android:tension
描述:第一步正方向運動,速度從0開始,先加速後減速至0,此時y的值大於1了,第二步反方向運動至y值爲1。就像跑步速度過快一樣,沒有留住,跑過終點了,然後再往回跑,回到終點。tension對曲線的影響看圖。

這裏寫圖片描述      這裏寫圖片描述
關鍵源碼:

 public float getInterpolation(float t) {      
        t -= 1.0f;
        return t * t * ((mTension + 1) * t + mTension) + 1.0f;
    }

7.AnticipateOvershootInterpolator

資源ID: @android:anim/anticipate_overshoot_interpolator
XML標記: anticipateOvershootInterpolator
函數公式: 這裏寫圖片描述
有參的構造函數:
public AnticipateOvershootInterpolator(float tension)
public AnticipateOvershootInterpolator(float tension, float extraTension)
描述:效果是AnticipateInterpolator 和OvershootInterpolator兩個加起來的效果,T的值爲tension*extraTension

這裏寫圖片描述      這裏寫圖片描述
關鍵源碼:

 public AnticipateOvershootInterpolator(float tension, float extraTension) {
        mTension = tension * extraTension;
    }
     public AnticipateOvershootInterpolator(Resources res, Theme theme, AttributeSet attrs) {
        TypedArray a;
        ....
        mTension = a.getFloat(AnticipateOvershootInterpolator_tension, 2.0f) *
                a.getFloat(AnticipateOvershootInterpolator_extraTension, 1.5f);
        ...
    }
     private static float a(float t, float s) {
        return t * t * ((s + 1) * t - s);
    }

    private static float o(float t, float s) {
        return t * t * ((s + 1) * t + s);
    }
 public float getInterpolation(float t) {        
        if (t < 0.5f) {
            return 0.5f * a(t * 2.0f, mTension);
        }else {
            return 0.5f * (o(t * 2.0f - 2.0f, mTension) + 2.0f);
         }
    }

8.BounceInterpolator彈跳插值器

資源ID: @android:anim/bounce_interpolator
XML標記: bounceInterpolator
函數公式:  這裏寫圖片描述
描述:就像跳跳球掉落在地面一樣的效果

這裏寫圖片描述      這裏寫圖片描述
關鍵源碼:

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

    public float getInterpolation(float t) {        
        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;
    }

9.CycleInterpolator週期插值器

資源ID: @android:anim/cycle_interpolator
XML標記: cycleInterpolator
函數公式: y=sin(2π×C×t)
有參構造函數: public CycleInterpolator(float cycles) xml中屬性:android:cycles
描述:cycles是週期值,默認爲1,cycles=2表示動畫會執行兩次

這裏寫圖片描述     這裏寫圖片描述
關鍵源碼:

  public float getInterpolation(float input) {
        return (float)(Math.sin(2 * mCycles * Math.PI * input));
    }

10.自定義插值器

想要實現的函數公式: 這裏寫圖片描述

public class MyInterpolator implements Interpolator {

    @Override
    public float getInterpolation(float input) {
        float x=2.0f*input-1.0f;
        return 0.5f*(x*x*x + 1.0f);
    }
}

這裏寫圖片描述      這裏寫圖片描述

自定義插值器要實現Interpolator ,Interpolator直接繼承TimeInterpolator(注意源碼版本有些改動,但是實現思路是沒變的)
TimeInterpolator源碼:

package android.animation;

/**
 * A time interpolator defines the rate of change of an animation. This allows animations
 * to have non-linear motion, such as acceleration and deceleration.
 */
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.
     *
     * @param input A value between 0 and 1.0 indicating our current point
     *        in the animation where 0 represents the start and 1.0 represents
     *        the end
     * @return The interpolation value. This value can be more than 1.0 for
     *         interpolators which overshoot their targets, or less than 0 for
     *         interpolators that undershoot their targets.
     */
    float getInterpolation(float input);
}

參數 input:input 參數是一個 float 類型,它取值範圍是 0 到 1,表示當前動畫的進度,取 0 時表示動畫剛開始,取 1 時表示動畫結束,取 0.5 時表示動畫中間的位置,其它類推。 返回值:表示當前實際想要顯示的進度。取值可以超過 1 也可以小於 0,超過 1 表示已經超過目標值,小於 0 表示小於開始位置。 對於 input 參數,它表示的是當前動畫的進度,勻速增加的。什麼叫動畫的進度,動畫的進度就是動畫在時間上的進度,與我們的任何設置無關,隨着時間的增長,動畫的進度自然的增加,從 0 到 1;input 參數相當於時間的概念,我們通過 setDuration()指定了動畫的時長,在這個時間範圍內,動畫進度肯定是一點點增加的;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章