TweenLite

TweenLite.to(Obj, time, { ( attr : val) , ( funkey) : ( funObj) } )
TweenLite會將某一對象Object，在制定的時間time內，進行如第三個參數所描述的進行變換，第三個參數中的描述可以是對象Object的屬性，例如：

var demo = {score:0},scoreDisplay = document.getElementById("scoreDisplay");//create a tween that changes the value of the score property of the demo object from 0 to 100 over the course of 20 seconds. var tween = TweenLite.to(demo, 20, {score:100, onUpdate:showScore})//each time the tween updates this function will be called. function showScore() {scoreDisplay.innerHTML = demo.score.toFixed(2); }

也可以是css當中的樣式，例如

window.onload = function() {var logo = document.getElementById("logo");TweenLite.to(logo, 2, {left:"542px", backgroundColor:"black", borderBottomColor:"#90e500", color:"white"}); }

TweenLite中支持的函數關鍵字都在GreenSock中
TweenLite支持字符串選擇，默認用window.$

TweenLite.to(".myClass", 2, {boxShadow:"0px 0px 20px red", color:"#FC0"});

不僅有TweenLite.to，TweenLite.from，還有TweenLite.fromTo

//tweens from width 0 to 100 and height 0 to 200 TweenLite.fromTo(photo, 1.5, {width:0, height:0}, {width:100, height:200});

---

TweenLite控制函數（Control）

將TweenLite作為對象創建可以對動畫的每一幀進行控制

var myTween = TweenLite.to(photo, 1.5, {width:100, paused:true});//then later, resume myTween.resume();

動畫的每一幀（tween）都是可控的，
tween.play();//繼續動畫，如果當前動畫被reverse，play會正向播放，不會按照reverse的方向播放
tween.pause();//暫停動畫
tween.reverse();//動畫反向
tween.resume();//在當前動畫播放方向上繼續播放，在reverse時會繼續方向進行播放
tween.play(5);//從動畫的第5秒開始播放
tween.reverse(1);//從動畫的第1秒回放
tween.seek(3);//在保持當前動畫狀態的基礎上將動畫平移至3秒（seek會保持當前動畫狀態，包括pause、reverse、timeScale等）
tween.timeScale(0.5);//動畫速度變成當前的0.5倍（慢一倍）
tween.timeScale(1);//動畫速度正常
tween.timeScale(2);//動畫速度2倍
tween.restart();//動畫重新播放

TweenMax

TweenMax是TweenLite升級版，特有屬性：repeat, repeatDelay, yoyo & onRepeat
repeat：動畫重復次數
repeatDelay：重復動畫延遲時間
yoyo：是否蕩過來蕩過去
onRepeat：動畫執行完一次后，重復播放動畫前的回調函數
特有方法: staggerTo，staggerFrom，staggerFromTo

var box = document.getElementById("greenBox"),count = 0,tween;tween = TweenMax.to(box, 2, {left:"700px", repeat:10, yoyo:true, onRepeat:onRepeat, repeatDelay:0.5, ease:Linear.easeNone});function onRepeat() {count++;box.innerHTML = count;TweenLite.set(box, {backgroundColor:"hsl(" + Math.random() * 255 + ", 90%, 60%)"}); } TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5);//The stagger parameter (0.5) controls the amount of time between the start of each tween.

總結

以上是生活随笔為你收集整理的GreenSock2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。