今天来了解一下缓动easeing函数。
<!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 http-equiv="content-type"content="text/html;charset=utf-8"> <meta name="Generator"content="EditPlus"> <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; top:300px; left:50px; background-color:blue; } </style> <!--使用之前记得导入包(下面的路径为俺的包的路径,改成你们的包的路径就行啦)--> <script src="../greensock/TweenLite.min.js"type="text/javascript"></script> <script src="../greensock/Plugins/CSSPlugin.min.js"type="text/javascript"></script> <script type="text/javascript"> window.onload=init; //之所以把代码写在onload函数里,是因为页面没加载之前是读取不到网页的节点的 functioninit(){ </script> </head> <body> <!--我们用一个div来模拟一个小方块--> <div id="rect"></div> </body> </html>
TweenLite.to("#rect",1,{left:"500px",ease:Power1.easeIn});
TweenLite.to("#rect",1,{left:"500px",ease:Power1.easeInOut});
TweenLite.to("#rect",1,{left:"500px",ease:Power1.easeOut});
TweenLite.to("#rect",1,{left:"500px",ease:Back.easeIn});
TweenLite.to("#rect",1,{left:"500px",ease:Back.easeInOut});
TweenLite.to("#rect",1,{left:"500px",ease:Back.easeOut});