原文來自於: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的存在的意義。
從本質上來講,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()
屬性: 無
2. Accelerate Interpolator / 加速度插值器
類名: AccelerateInterpolator
資源ID: @android:anim/accelerate_interpolator
XML標記: accelerateInterpolator
公式: y=t^(2f)
構造函數: public AccelerateInterpolator(float factor)
參數:
名稱: f
XML屬性: android:factor
描述: 加速度參數. f越大,起始速度越慢,但是速度越來越快
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越大,起始速度越快,但是速度越來越慢
4. Accelerate Decelerate Interpolator / 先加速後減速插值器
類名: AccelerateDecelerateInterpolator
資源ID: @android:anim/accelerate_decelerate_interpolator
XML標記: accelerateDecelerateInterpolator
公式: y=cos((t+1)π)/2+0.5
構造函數: public AccelerateDecelerateInterpolator()
參數: 無
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越大,初始的偏移越大,而且速度越快
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越大,結束時的偏移越大,而且速度越快
7. Anticipate Overshoot Interpolator
類名: AnticipateOvershootInterpolator
資源ID: @android:anim/anticipate_overshoot_interpolator
XML標記: anticipateOvershootInterpolator
公式:
構造函數:
public AnticipateOvershootInterpolator(float tension)
public AnticipateOvershootInterpolator(float tension, float extraTension)
參數:
XML屬性: android:tension
描述: 張力值,默認爲2,張力越大,起始和結束時的偏移越大,而且速度越快
XML屬性: android:extraTension
描述: 額外張力值,默認爲1.5。公式中T的值爲tension*extraTension
8. Bounce Interpolator / 彈跳插值器
類名: BounceInterpolator
資源ID: @android:anim/bounce_interpolator
XML標記: bounceInterpolator
公式:
構造函數: public BounceInterpolator ()
參數: 無
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表示動畫會執行兩次
創建自定義Interpolators
下面,我們就來創建自己的Interpolator。上面已經講得非常清楚了,Interpolator的關鍵在於公式。我想創建的Interpolator名字叫HesitateInterPolator:起始時速度全速,快到一半時減速到0,然後加速直到終點,用圖形來表示即:
用數學公式來表示即:
我們只需要實現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。