先說一下演算法原理:
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後,指...