線性 liner()坟冲,平滑 ease撤嫩,緩入ease_in 窃诉,緩出ease_out
結(jié)構(gòu):linear(t, t_min,t_max, value1, value2)
ease(t, t_min, t_max, value1, value2)
ease_in(...)乐纸;ease_out(..)
t:目標(biāo)參數(shù)(該參數(shù)必須是一維的)常柄。例如想讓位移來(lái)控制旋轉(zhuǎn)鲤氢,則表達(dá)式應(yīng)該寫在旋轉(zhuǎn)的屬性上(當(dāng)前參數(shù)),位移屬性就是目標(biāo)參數(shù)
t_min:目標(biāo)參數(shù)范圍的下限(如果不填西潘,默認(rèn)0)卷玉,可填或不填。
t_max:目標(biāo)參數(shù)范圍的上限(如果不填喷市,默認(rèn)1)
value1:當(dāng)前參數(shù)范圍下限相种,當(dāng)目標(biāo)參數(shù)到達(dá)t_min時(shí),表達(dá)式返回該值(value1)
value2:當(dāng)前參數(shù)范圍上限品姓,當(dāng)目標(biāo)參數(shù)到達(dá)t_max時(shí)寝并,表達(dá)式返回該值(value2)
舉例:linear(time,0,5,0,360);//通過(guò)時(shí)間來(lái)控制旋轉(zhuǎn),在5秒內(nèi)旋轉(zhuǎn)360°的線性變化
linear:得知整個(gè)變化過(guò)程是線性的
目標(biāo)參數(shù):時(shí)間(時(shí)間的變化范圍是0到5)
當(dāng)前參數(shù):旋轉(zhuǎn)(旋轉(zhuǎn)的變化范圍是0°到360°)
如果將該表達(dá)式應(yīng)用到某個(gè)圖層的旋轉(zhuǎn)屬性上腹备,那么該圖層會(huì)在5秒內(nèi)完成一周的旋轉(zhuǎn)衬潦,且圖層在第五秒停止旋轉(zhuǎn)
當(dāng)然你可能會(huì)想,為什么要那么麻煩植酥,直接time/5*360不就可以了镀岛?
但是,如果你想在5秒后停止旋轉(zhuǎn),不還得寫個(gè)判斷語(yǔ)句才可以哎媚,反而復(fù)雜化了。
這就是為什么用插值算法的原因喊儡,而且還可以使用ease等算法拨与,讓動(dòng)作得到更流暢的變化效果,僅僅使用前面手寫公式是做不到這一點(diǎn)的艾猜。
示例:模擬網(wǎng)頁(yè)的滾動(dòng)欄买喧;進(jìn)度條與數(shù)值百分比的變化