1. 程式人生 > >JavaScript Tween演算法及緩動效果

JavaScript Tween演算法及緩動效果

Flash做動畫時會用到Tween類,利用它可以做很多動畫效果,例如緩動、彈簧等等。 我這裡要教大家的是怎麼利用flash的Tween類的演算法,來做js的Tween演算法,並利用它做一些簡單的緩動效果。

效果說明 首先大家到這裡下載flash的as指令碼(建議看看這裡的demo),1.0和2.0都可以(裡面的演算法都一樣)。 例如開啟2.0的可以看到幾個as檔案,每個檔案對應一個Tween效果,分別有(參考裡面的說明): Linear:無緩動效果; Quadratic:二次方的緩動(t^2); Cubic:三次方的緩動(t^3); Quartic:四次方的緩動(t^4); Quintic:五次方的緩動(t^5); Sinusoidal:正弦曲線的緩動(sin(t)); Exponential:指數曲線的緩動(2^t); Circular:圓形曲線的緩動(sqrt(1-t^2)); Elastic:指數衰減的正弦曲線緩動; Back:超過範圍的三次方緩動((s+1)*t^3 - s*t^2); Bounce:指數衰減的反彈緩動。 ps:以上都是自己的爛翻譯,希望各位修正。 每個效果都分三個緩動方式(方法),分別是: easeIn:從0開始加速的緩動; easeOut:減速到0的緩動; easeInOut:前半段從0開始加速,後半段減速到0的緩動。 其中Linear是無緩動效果,沒有以上效果。

要實現不同的緩動,只需要使用對應的Tween演算法就行了,以前看來遙不可及的效果,現在這麼容易就實現了(當然那些演算法才是最難的地方)。 這樣關於緩動的效果就介紹完了,但其實遠遠不止這些,我們還可以自己定義一些演算法,發揮想象力,做一些好玩的效果。

轉載請註明出處:

如有任何建議或疑問,歡迎留言討論。

程式中包含的js工具庫CJL.0.1.min.js,原文在這裡