終於找齊了夢寐以求的物體緩動演算法(Tween)

2021-07-24 06:20:27 字數 2980 閱讀 2982

先說一下演算法原理:

x軸是時間,y軸是當前值,b是y軸的初始值,x軸的初始值是0,t是當前時間。當t(x軸)逐漸增加到達d時,當前值(y軸)會到達目標值(b+c)。

想詳細理解的話可以找資料看看吧(貌似跟數學關係比較大)。

下面就介紹如何使用這個tween了,首先b、c、d三個引數(即初始值,變化量,持續時間)在緩動開始前,是需要先確定好的。

舉乙個簡單的例子,乙個div要向右緩動,left初始值是50,那麼b就是50,要向右移動100,那c就是100,如果知道的是目標值,例如要向右移動到150,那就把目標值150減初始值b就是變化量c了。

至於d的設定就比較靈活,只要符合t是從0向d遞增(或遞減)就可以了。

d跟步長配合使用來設定持續時間,例如d設定為100,如果設定步長是1,那麼從0到100就有100步,即分100次來完成這個過程,步數越多那麼持續時間就越長。

至於t的變化相當於時間的變化,一般是均勻變化的,每次變化都增加乙個步長,當t從0遞增(或遞減)到d時,緩動就結束了。

要注意的是t是從0開始的,設定步長時必須確定t確實能到達d,如果上面的步長是3,那麼t就永遠都到不了d了。更好的處理是當t等於或超過d之後,就停止定時器並設定當前值為目標值。

了解了tween的使用後就可以實現動畫效果了。繼續上面的例子,已經確定b是50,c是100,d是100,步長是1,使用tween.quad.easeout演算法。那麼可以用以下程式實現緩動: 

varb=50

,c=100,d

=100,t=

0;function

run()

}run();

完整tween如下:

vartween =,

quad: ,

easeout: 

function

(t,b,c,d),

easeinout: 

function

(t,b,c,d)

},cubic: ,

easeout: 

function

(t,b,c,d),

easeinout: 

function

(t,b,c,d)

},quart: ,

easeout: 

function

(t,b,c,d),

easeinout: 

function

(t,b,c,d)

},quint: ,

easeout: 

function

(t,b,c,d),

easeinout: 

function

(t,b,c,d)

},sine: ,

easeout: 

function

(t,b,c,d),

easeinout: 

function

(t,b,c,d)

},expo: ,

easeout: 

function

(t,b,c,d),

easeinout: 

function

(t,b,c,d)

},circ: ,

easeout: 

function

(t,b,c,d),

easeinout: 

function

(t,b,c,d)

},elastic: 

else

vars =p

/(2*math.pi) * math.asin (c

/a);

return-(a

*math.pow(2,

10*(t-=

1)) 

*math.sin( (t*d

-s)*(

2*math.pi)

/p )) + b;

},easeout: 

function

(t,b,c,d,a,p)

else

vars =p

/(2*math.pi) * math.asin (c

/a);

return(a*

math.pow(2,

-10*t) 

*math.sin( (t*d

-s)*(

2*math.pi)

/p ) + c + b);

},easeinout: 

function

(t,b,c,d,a,p)

else

vars =p

/(2*math.pi) * math.asin (c

/a);

if(t 

<1) 

return-.

5*(a*

math.pow(2,

10*(t-=

1)) 

*math.sin( (t*d

-s)*(

2*math.pi)

/p )) + b;

returna*

math.pow(2,

-10*(t

-=1)) *

math.sin( (t*d

-s)*(

2*math.pi)

/p )*.5 + c + b;}},

back: ,

easeout: 

function

(t,b,c,d,s),

easeinout: 

function

(t,b,c,d,s)

},bounce: ,

easeout: 

function

(t,b,c,d) 

else

if(t 

<(2

/2.75))  

else

if(t 

<

(2.5

/2.75))  

else

},easeinout: 

function

(t,b,c,d)}}

夢寐以求的Quicklisp來了!

quicklisp 這就是我夢想中的工具 極其方便的lisp庫管理工具。在一周前quicklisp發布了公開的beta版本,今天試用下,非常爽。簡單說,quicklisp就是乙個類似linux上面 apt get 的庫安裝工具,只需要一條命令就能安裝好乙個庫,同時會自己搞定依賴庫。更重要的一點是它維...

計算變為人們夢寐以求的公用設施

本文選自 智慧型的雲計算 一書 推薦序1 在過去幾年中,雲計算 物聯網和智慧型地球等頗具前瞻性的概念,在某種程度上打破了我們原來對電信技術及其應用的固有看法。人們正擺脫自建資訊系統的慣常模式,逐步認識到硬體也好,平台也好,軟體也好,都可以以雲計算的服務租用模式實現,並進一步拓展到商業智慧型和社會智慧...

教師節,蹊徑課堂的老師們最夢寐以求的節日禮物

一年一度的教師節已經落下了帷幕,節日的餘溫還未散去,辛勤的教師又要準時地回到自己的崗位上,實現他們作為教師的承諾。在教書育人面前,他們沒有更多的怨言,面對著性格迥異的孩子們,他們始終飽含著愛意去教育並呵護著這群祖國的花朵。春風化雨,潤物無聲,他們點亮了每一位孩子心中的光,然mtmotsnlyo後,指...