android 動(dòng)畫系列 (2) - interpolator 插值器

這是我這個(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%"
/>

效果圖:


ezgif.com-video-to-gif.gif

哈哈县袱,是不是看著像是按鈕點(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"/>

效果圖:

ezgif.com-video-to-gif.gif

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)畫:插值器與估值器


參考資料

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末盟蚣,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子卖怜,更是在濱河造成了極大的恐慌屎开,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件马靠,死亡現(xiàn)場離奇詭異奄抽,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)虑粥,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進(jìn)店門如孝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人娩贷,你說我怎么就攤上這事第晰。” “怎么了?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵茁瘦,是天一觀的道長品抽。 經(jīng)常有香客問我,道長甜熔,這世上最難降的妖魔是什么圆恤? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮腔稀,結(jié)果婚禮上盆昙,老公的妹妹穿的比我還像新娘。我一直安慰自己焊虏,他們只是感情好淡喜,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著诵闭,像睡著了一般炼团。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上疏尿,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天瘟芝,我揣著相機(jī)與錄音,去河邊找鬼褥琐。 笑死锌俱,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的踩衩。 我是一名探鬼主播嚼鹉,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼贩汉,長吁一口氣:“原來是場噩夢啊……” “哼驱富!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起匹舞,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤褐鸥,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后赐稽,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體叫榕,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年姊舵,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了晰绎。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,096評論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡括丁,死狀恐怖荞下,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤尖昏,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布仰税,位于F島的核電站,受9級特大地震影響抽诉,放射性物質(zhì)發(fā)生泄漏陨簇。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一迹淌、第九天 我趴在偏房一處隱蔽的房頂上張望河绽。 院中可真熱鬧,春花似錦唉窃、人聲如沸葵姥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽榔幸。三九已至,卻和暖如春矮嫉,著一層夾襖步出監(jiān)牢的瞬間削咆,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工蠢笋, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留拨齐,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓昨寞,卻偏偏與公主長得像瞻惋,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子援岩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內(nèi)容