Interpolators詳解

原文來自於:Android Animations Tutorial 5: More on Interpolators


譯者注:這篇文章是一系列動畫教程中的一篇,對Android內置的幾種Interpolator(插值器)講解得非常清楚,特作翻譯,其他幾篇文章有空也可以考慮翻譯。這一系列的文章依次是:

Android Animations Tutorial 1: Introduction 

Android Animations Tutorial 2: View Animations Overview 

Android Animations Tutorial 3: Customising Animations 

Android Animations Tutorial 4: Programming View Animations 

Android Animations Tutorial 5: More on Interpolators 

Android Animations Tutorial 6: Animation Sets and Start Offset 

Android Animations Tutorial 7: The secret of fillBefore, fillAfter and fillEnabled

相關概念

在動手實現自定義Interpolator之前,我們需要明白其背後的原理和概念。動畫的基本原理是從開始時間到結束時間一幀一幀地播放靜態圖像,如果我們用0.0表示動畫的開始時間點,用1.0表示動畫的結束時間點,則動畫時間軸上的每個點都可以轉換成0.0到1.0之間的一個浮點數,本文中我們稱爲Time Index。比如,動畫中間的時間點可以用0.5來表示。對於使用了LinearInterpolator(線性插值器)的平移動畫來講,在0.3這個時間點視圖則剛好移動了整個動畫的30%。


我們一般不會將Time Index直接帶入到動畫計算公式,這也是Interpolator的存在的意義。

wKiom1OfAomyMDR-AAA6n23bvAw712.jpg

從本質上來講,Interpolator是一種數學函數,參數是0.0到1.0之間的浮點數,輸出也是一個浮點數。如上圖所示,這是一個AccelerateInterpolator(加速插值器)的圖。目標對象的起始速度是0,然後逐漸增大(譯者注:曲線的斜率是速度)。默認情況下,可以用下面的表達式來表示:

y = t^2

這裏的y就是Interpolator的輸出,t是Time Index。我們可以增加一個參數來對AccelerateInterpolator的行爲進行自定義:

y = t ^(2f)

這裏的f越大,起始速度越慢,但是後期加速度會更大;如果f=0.5,則和LinearInterpolator的行爲一模一樣了。

配置Inerpolators

很多Interpolator都可以通過XML或者編程的方式來設置參數。通過XML方式需要在res/anim文件夾裏面創建一個XML文件。比如,你想將AccelerateInterpolator的f參數設置爲2,你可以創建這樣一個文件

res/anim/my_accelerate_interpolator.xml,其內容如下:

<?xml version="1.0" encoding="utf-8"?>
<accelerateInterpolator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:factor="2" />

注意,accelerateInterpolator表示這是一個AccelerateInterpolator,第一個字符小寫。


創建了這個文件後,你可以在通過@anim/my_accelerate_interpolator來使用這個Interpolator。比如下面這個縮放的動畫效果:

<scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@anim/my_accelerate_interpolator"
        android:fromXScale="0.0"
        android:toXScale="1.0"
        android:fromYScale="0.0"
        android:toYScale="1.0"
        android:duration="300" />

Interpolator概覽

1. Linear Interpolator / 線性插值器

類名: LinearInterpolator

資源ID: @android:anim/linear_interpolator

XML標記: linearInterpolator

公式: y=t

構造函數: public LinearInterpolator()

屬性: 無

wKioL1OfBX2i24iLAACVw04NLps987.jpg

2. Accelerate Interpolator / 加速度插值器

類名: AccelerateInterpolator

資源ID: @android:anim/accelerate_interpolator

XML標記: accelerateInterpolator

公式: y=t^(2f)

構造函數: public AccelerateInterpolator(float factor)

參數:

    名稱: f

    XML屬性: android:factor

    描述: 加速度參數. f越大,起始速度越慢,但是速度越來越快

wKioL1OfBg7RSunbAAEfeaz5sDM514.jpg

3. Decelerate Interpolator / 減速插值器

類名: DecelerateInterpolator

資源ID: @android:anim/decelerate_interpolator

XML標記: decelerateInterpolator

公式: y=1-(1-t)^(2f)

構造函數: public DecelerateInterpolator(float factor)

參數:

    名稱: f

    XML屬性: android:factor

    描述: 加速度參數.  f越大,起始速度越快,但是速度越來越慢


wKiom1OfBajjXqiMAAEhQLqnW7c574.jpg

4. Accelerate Decelerate Interpolator / 先加速後減速插值器

類名: AccelerateDecelerateInterpolator

資源ID: @android:anim/accelerate_decelerate_interpolator

XML標記: accelerateDecelerateInterpolator

公式: y=cos((t+1)π)/2+0.5

構造函數: public AccelerateDecelerateInterpolator()

參數: 無

wKioL1OfBXviFOI8AACS1BUkSAc421.jpg

5. Anticipate Interpolator

類名: AnticipateInterpolator

資源ID: @android:anim/anticipate_interpolator

XML標記: anticipateInterpolator

公式: y=(T+1)×t^3–T×t^2

構造函數: public AnticipateInterpolator(float tension)

參數:

    名稱: T

    XML屬性: android:tension

    描述: 張力值, 默認爲2,T越大,初始的偏移越大,而且速度越快

wKiom1OfBajRBsJJAAETcvHNUBE521.jpg

6. Overshoot Interpolator

類名: OvershootInterpolator

資源ID: @android:anim/overshoot_interpolator

XML標記: overshootInterpolator

公式: y=(T+1)x(t1)^3+T×(t1)^2 +1

構造函數: public OvershootInterpolator (float tension)

參數:

    名稱: T

    XML屬性: android:tension

   描述: 張力值,默認爲2,T越大,結束時的偏移越大,而且速度越快

wKioL1OfBXuhcPNnAAEOoi-2cW4445.jpg

7. Anticipate Overshoot Interpolator

類名: AnticipateOvershootInterpolator

資源ID: @android:anim/anticipate_overshoot_interpolator

XML標記: anticipateOvershootInterpolator

公式:

wKioL1OfC22RgSlMAABoTvVneig089.jpg

構造函數:

public AnticipateOvershootInterpolator(float tension)

public AnticipateOvershootInterpolator(float tension, float extraTension)

參數:

    XML屬性: android:tension

    描述: 張力值,默認爲2,張力越大,起始和結束時的偏移越大,而且速度越快

    XML屬性: android:extraTension

    描述: 額外張力值,默認爲1.5。公式中T的值爲tension*extraTension

wKiom1OfBajzrFbnAADZ0xYSpt8664.jpg

8. Bounce Interpolator / 彈跳插值器

類名: BounceInterpolator

資源ID: @android:anim/bounce_interpolator

XML標記: bounceInterpolator

公式: 

wKiom1OfCynDRnvhAADOnd02em0121.jpg


構造函數: public BounceInterpolator ()

參數: 無


wKiom1OfBaiiarvZAACscX-uQmE120.jpg

9. Cycle Interpolator / 週期插值器

類名: CycleInterpolator

資源ID: @android:anim/cycle_interpolator

XML標記: cycleInterpolator

公式: y=sin(2π×C×t)

構造函數: public CycleInterpolator(float cycles)

參數:

    名稱: C

    XML屬性: android:cycles

   描述: 週期值,默認爲1;2表示動畫會執行兩次

wKioL1OfBXrQcMwtAAGa9t3aYx4374.jpg

創建自定義Interpolators

下面,我們就來創建自己的Interpolator。上面已經講得非常清楚了,Interpolator的關鍵在於公式。我想創建的Interpolator名字叫HesitateInterPolator:起始時速度全速,快到一半時減速到0,然後加速直到終點,用圖形來表示即:

wKiom1OfdjbiHyniAACO8liEKxU986.jpg

用數學公式來表示即:

wKioL1OfdlDyqOUVAAAac5qaISI552.jpg

我們只需要實現Interpolator接口,然後實現其中的float getInterpolation(float t)接口即可:

public class HesitateInterpolator implements Interpolator {
    public HesitateInterpolator() {}
    public float getInterpolation(float t) {
      float x=2.0f*t-1.0f;
      return 0.5f*(x*x*x + 1.0f);
    }
}

通過編程方式來使用自定義Interpolator很簡單,比如:

ScaleAnimation scale = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f);
scale.setInterpolator(new HesitateInterpolator());

這樣就好了。遺憾的是,我們無法在XML資源中使用自定義Interpolator。


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