這是我這個(gè)系列的目錄搁痛,有興趣的可以看下: android 動(dòng)畫系列 - 目錄
首先要了解為什么需要插值器蜓堕,因?yàn)樵谘a(bǔ)間動(dòng)畫中妹萨,我們一般只定義關(guān)鍵幀(首幀或尾幀)孵睬,然后由系統(tǒng)自動(dòng)生成中間幀石窑,生成中間幀的這個(gè)過程可以成為“插值”牌芋。插值器定義了動(dòng)畫變化的速率,提供不同的函數(shù)定義變化值相對于時(shí)間的變化規(guī)則松逊,可以定義各種各樣的非線性變化函數(shù)姜贡,比如加速、減速等棺棵。
9種插值器:
- AccelerateDecelerateInterpolator / 先加速再減速
- AccelerateInterpolator / 加速
- AnticipateInterpolator / 先蓄力楼咳,回退一小步然后加速前進(jìn)
- AnticipateOvershootInterpolator / 在上一個(gè)基礎(chǔ)上超出終點(diǎn)一小步再回到終點(diǎn)
- BounceInterpolator / 最后階段彈球效果
- CycleInterpolator / 周期運(yùn)動(dòng)
- DecelerateInterpolator / 減速
- LinearInterpolator / 勻速
- OvershootInterpolator / 快速到達(dá)終點(diǎn)并超出一小步最后回到終點(diǎn)
上面是系統(tǒng)提供的9種插值器熄捍,都是系統(tǒng)已經(jīng)定義好了的,xml 中調(diào)用方式如下:
<set android:interpolator="@android:anim/accelerate_interpolator">
...
</set>
說句自己的感受母怜,這9個(gè)玩意真不好記啊余耽,全是大段的英文單詞組合啊,對于非英語母語的人真是不友好啊苹熏,因此還是要找規(guī)律記憶啊碟贾,其實(shí)大伙想想google這就是讓我們學(xué)單詞啊,看看里面的插值器實(shí)現(xiàn)的效果轨域,加速袱耽,減速,蓄力干发,超出朱巨,回彈,就是這個(gè)效果的組合枉长,記住這幾個(gè)單詞就行了
- interpolator 插入器
- accelerate 使...加速
- decelerate 使...減速
- anticipate 預(yù)期冀续,提前使用。這里為啥預(yù)期會(huì)是蓄力的效果啊必峰,費(fèi)解
- Overshoot 設(shè)計(jì)洪唐,超出。這個(gè)語義放這我覺得勉強(qiáng)合適吧
- bounce 彈跳
- cycle 循環(huán)
好了吼蚁,這幾個(gè)單詞記住了凭需,再記憶上面這幾個(gè)插值器就好記了,要能從字面意思理解能實(shí)現(xiàn)的效果了肝匆,好了讓我們來看看他的數(shù)值曲線:具體請看 9種Interpolator
1.Linear Interpolator / 線性插值器
公式: y=t
2.Accelerate Interpolator / 加速度插值器
公式: y=t^(2f)描述: 加速度參數(shù). f越大功炮,起始速度越慢,但是速度越來越快
3.Decelerate Interpolator / 減速插值器
公式: y=1-(1-t)^(2f)描述: 加速度參數(shù). f越大术唬,起始速度越快薪伏,但是速度越來越慢
這里寫圖片描述
4.Accelerate Decelerate Interpolator / 先加速后減速插值器
公式: y=cos((t+1)π)/2+0.5
5.Anticipate Interpolator / 蓄力插值器,先后退一段粗仓,在加速
公式: y=(T+1)×t3–T×t2描述: 張力值, 默認(rèn)為2嫁怀,T越大,初始的偏移越大借浊,而且速度越快
6.Overshoot Interpolator / 回彈插值器塘淑,超出目標(biāo)一部分再回彈
公式: y=(T+1)x(t1)3+T×(t1)2 +1描述: 張力值,默認(rèn)為2蚂斤,T越大存捺,結(jié)束時(shí)的偏移越大,而且速度越快
7.Anticipate Overshoot Interpolator / 蓄力,回彈插值器
公式:
描述: 張力值tension捌治,默認(rèn)為2岗钩,張力越大,起始和結(jié)束時(shí)的偏移越大肖油,而且速度越快;額外張力值extraTension兼吓,默認(rèn)為1.5。公式中T的值為tension*extraTension
這里寫圖片描述
8.Bounce Interpolator / 彈跳插值器
公式:
9.Cycle Interpolator / 周期插值器
公式: y=sin(2π×C×t)描述: 周期值森枪,默認(rèn)為1视搏;2表示動(dòng)畫會(huì)執(zhí)行兩次
其實(shí)循環(huán)加速器有點(diǎn)意思,我們來看個(gè)例子:
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="600"
android:fillAfter="true"
android:fromXDelta="0"
android:interpolator="@android:anim/cycle_interpolator"
android:toXDelta="30%"
/>
效果圖:
哈哈县袱,是不是看著像是按鈕點(diǎn)擊抖動(dòng)的效果啊浑娜,這里使用循環(huán)加速器可以代替一次重復(fù)的
上面的數(shù)值曲線上面都是帶有公式的,其實(shí)插值器我們看著挺牛逼的式散,但是實(shí)現(xiàn)還是很簡單的筋遭,核心就是上面數(shù)值曲線圖中的公式,這就是數(shù)學(xué)的魅力啊杂数。
自定義插值器
什么東西都是能自定義的宛畦,插值器也一樣瘸洛,google 提供了代碼和 xml 2種方式的自定義方式揍移。
xml 方式自定義插值器
在/res/anim文件夾下,我們可以自定義xml插值器反肋,根標(biāo)簽寫我們需要的插值器那伐,然后系統(tǒng)提供一些可以設(shè)置的屬性:
- <accelerateDecelerateInterpolator> 無
- <accelerateInterpolator> android:factor 浮點(diǎn)值,加速速率石蔗,默認(rèn)為1
- <anticipateInterploator> android:tension 浮點(diǎn)值罕邀,起始點(diǎn)后退的張力、拉力數(shù)养距,默認(rèn)為2
- <anticipateOvershootInterpolator> android:tension 同上 android:extraTension 浮點(diǎn)值诉探,拉力的倍數(shù),默認(rèn)為1.5(2 * 1.5)
- <bounceInterpolator> 無
- <cycleInterplolator> android:cycles 整數(shù)值棍厌,循環(huán)的個(gè)數(shù)肾胯,默認(rèn)為1
- <decelerateInterpolator> android:factor 浮點(diǎn)值,減速的速率耘纱,默認(rèn)為1
- <linearInterpolator> 無
- <overshootInterpolator> 浮點(diǎn)值敬肚,超出終點(diǎn)后的張力、拉力束析,默認(rèn)為2
系統(tǒng)提供的可以修改的插值器屬性我們配合上面的插值器數(shù)值圖標(biāo)來看就會(huì)很清晰很簡單了艳馒。
我們以循環(huán)插值器為例:
xml文件
<?xml version="1.0" encoding="utf-8"?>
<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:cycles="2"/>
效果圖:
ok,是我們想要的結(jié)果员寇,可以看到動(dòng)畫整體執(zhí)行了2次弄慰,相當(dāng)于 repratCount=3第美。
代碼方式自定義插值器
用代碼來自定義插值器就麻煩一些了,當(dāng)然也更靈活啦曹动,不過你最好還是要知道系統(tǒng)插值器的計(jì)算公式斋日,要不然你也不好寫不是嘛
interpolator 就是一個(gè)接口,我們可以實(shí)現(xiàn)Interpolator接口墓陈,因?yàn)樯厦嫠械腎nterpolator都實(shí)現(xiàn)了Interpolator接口恶守,這個(gè)接口定義了一個(gè)方法:float getInterpolation(float input),此方法由系統(tǒng)調(diào)用贡必,input代表動(dòng)畫的時(shí)間兔港,在0和1之間,也就是開始和結(jié)束之間仔拟。
線性(勻速)插值器定義如下:
public float getInterpolation(float input) {
return input;
}
加速減速插值器定義如下:
public float getInterpolation(float input) {
return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
}
要是細(xì)說起插值器這塊來衫樊,還要細(xì)分成插值器和估值器的。
- 插值器 :根據(jù)時(shí)間流速計(jì)算數(shù)值變化比例利花,重點(diǎn)是數(shù)值變化的比例科侈,而不是最終的具體數(shù)值。舉例:時(shí)間來到50%時(shí)炒事,數(shù)值變化比例是80% = 起始數(shù)值+0.8*(結(jié)束數(shù)值-開始數(shù)值)
-
估值器 :根據(jù)插值器計(jì)算出的數(shù)值變化比例臀栈,計(jì)算最終的具體數(shù)值。為啥有這個(gè)呢挠乳,因?yàn)?view 的屬性大部分是 float 的权薯,但是也有顏色值這樣 int 類型的。另外估值器還可以自定義的睡扬,經(jīng)典的例子看鴻揚(yáng)大神的:
Android 屬性動(dòng)畫(Property Animation) 完全解析 (上)
另外插值器西鄉(xiāng)介紹看這里 Android屬性動(dòng)畫:插值器與估值器