好多天没有写无博文啦，今天无聊就再写一下！
今天要讲的是TweenLite的一些事件以及，TweenLite动画的控制，TweenMax类似，请自行参考官方文档：http://api.greensock.com/js/
先说一下TweenLite的常见事件：
onStart 动画开始时的一瞬间触发
onUpdate 动画进行时循环触发（可以理解为一个循环，当动画未结束之前都不会停止）
onComplete 动画结束的一瞬间触发
onReverseComplete 反转动画结束时的一瞬间触发
相应的有
onStartParams 是一个数组，存放onStart事件的参数
onUpdateParams 是一个数组，存放onUpdate事件的参数
onCompleteParams 是一个数组，存放onComplete事件的参数
onReverseCompleteParams 是一个数组，存放onReverseComplete事件的参数
具体用法如下：
TweenLite.to("#rect",2,{left:"900px",top:"400px",ease:Back.easeOut,onComplete:onTCP,onCompleteParams:["结束啦！"]});
function onTCP(pm){
alert(pm);
}
TweenLite的控制：
play 开始
restart 重新开始
pause 暂停
resume 继续
reverse 反转
今天说的内容挺简单的，直接看代码就行啦！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>GSAP JS基础教程--动画的控制及事件</title> <meta name="Generator" content="EditPlus"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <!-- *@author AIJ *@email 1058514799@qq.com *@date 2013-6-28 --> <style type="text/css"> #rect{ position:absolute; width:50px; height:50px; background-color:blue; } h3{ text-align:center; } </style> <script type="text/javascript" src="../greensock/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="../greensock/TweenLite.min.js"></script> <script type="text/javascript" src="../greensock/easing/EasePack.min.js"></script> </head> <body> <!--创建一个“小方块”--> <div id="rect"></div> <!--创建几个按键和一个显示用的标签--> <input type="button" value="重新开始" onclick="go(1);" /> <input type="button" value="暂停" onclick="go(2);" /> <input type="button" value="继续" onclick="go(3);" /> <input type="button" value="反转" onclick="go(4);" /> <h3 id="label"></h3> <script type="text/javascript"> var tw=TweenLite.to("#rect",2,{ left:"900px", top:"400px", ease:Back.easeOut, onStart:TE,onStartParams:["动画开始........"], onUpdate:TE,onUpdateParams:["动画进行ing........"], onComplete:TE,onCompleteParams:["动画结束啦........"], onReverseComplete:TE,onReverseCompleteParams:["已经回到原点！"] }); function TE(pm){ document.getElementById("label").innerHTML=pm; } function go(opt){ switch(opt){ case 1:tw.restart();break; case 2:tw.pause();break; case 3:tw.resume();break; case 4:tw.reverse();break; } } </script> </body> </html>