今天來學習用TweenLite操作元素的各種屬性，以Div為例，其他元素的操作也是一樣的，只是可能一些元素有它們的特殊屬性，就可能不同罷了。
代碼里用詳細注釋，我就不再重復啦，大家看代碼就可以啦！
注：要一條條撤銷注釋看效果哦
！！！！！！！！！！
！！！！！！！！！！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>GSAP JS基礎教程--TweenLite操作元素的相關屬性</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 src="../greensock/easing/EasePack.min.js" type="text/javascript"></script> <script type="text/javascript"> window.onload=init; //之所以把代碼寫在onload函數里，是因為頁面沒加載之前是讀取不到網頁的節點的 function init(){ //第一部分：操作div的二維相關屬性: //位置操作：CSS的(left top margin) 和 GSAP里的(x y) 和 js里的(offsetLeft offsetHeight) //left和top是相對網頁或元素的父類的位置來計算的坐標，而x,y則是相對元素起始位置來計算的坐標，即元素的起始位置的x,y的值為(0,0) TweenLite.to("#rect",1,{left:500,top:200,ease:Back.easeOut}); //TweenLite.to("#rect",1,{x:300,y:50,ease:Back.easeOut}); //注意GSAP里margin-left padding-left等屬性的寫法要寫成marginLeft paddingLeft，即不要“-”，接在“-”后的單詞的首字母要大寫 //padding不算是位置的操作，但為了方便，還是和margin寫在一起吧 //TweenLite.to("#rect",1,{marginLeft:100,paddingTop:10,ease:Back.easeOut}); //大小操作scaleX scaleY scale width height //注意:雖然scale（縮放比例）和width height都可以讓元素放大，但是，scale會元素內的內容也一起放大，而width height只是把容器放大啦，里面的內容不大小不變 //TweenLite.to("#rect",1,{scaleX:2,scale:1.5,ease:Back.easeOut}); //TweenLite.to("#rect",1,{scale:2,ease:Back.easeOut}); //TweenLite.to("#rect",1,{width:200,height:200,ease:Back.easeOut}); //變換(transform)操作: //其實剛才說的rotation scale x y都屬於變換的操作，這里說另外的兩個變換（rotation(旋轉) skew（傾斜）） //TweenLite.to("#rect",1,{rotation:45,ease:Back.easeOut}); //TweenLite.to("#rect",1,{skewX:30,ease:Back.easeOut}); //TweenLite.to("#rect",1,{skewY:-30,ease:Back.easeOut}); //第二部分，其他非二維屬性操作 //如果你以為GSAP只能用來移動、放大縮小一些東西來做一些小動畫，那你就大錯特錯啦！ //來看一下下面的相關屬性的操作 //邊框的操作，因為前面我們用css定義的方塊（rect）是沒有邊框的，所以我們先來設置一下它的邊框，方法如下 //TweenLite.set("#rect",{border:"solid 1px #000"});//其他的屬性也可以使用TweenLite.set來設置 //TweenLite.to("#rect",1,{borderWidth:10,ease:Back.easeOut}); //TweenLite.to("#rect",2,{backgroundColor:"#FF00FF",ease:Back.easeOut});//背景色 //TweenLite.to("#rect",2,{color:"#FFF",ease:Back.easeOut});//字體顏色 //TweenLite.to("#rect",1,{fontSize:24,ease:Back.easeOut});//字體大小 //行高也是可以設置的,這個一定要使用單位，不然會發生錯誤 //TweenLite.to("#rect",1,{lineHeight:"50px",ease:Back.easeOut}); //TweenLite.to("#rect",1,{opacity:0.5,ease:Back.easeOut});//透明度(兼容所有主流瀏覽器，包括IE6); //既然說到opacity，就是一下另一個調整元素透明度的屬性autoAlpha(GSAP里的，CSS里沒有)。當元素的透明度為0時，它會自動把元素的display屬性值設置為0，即把元素隱藏 //TweenLite.to("#rect",1,{autoAlpha:0,ease:Back.easeOut}); //第二部分就說到這里，說得不怎 么全面，也不可能說得全面，我也是小白一個，只是把學習筆記記錄下來了罷了，沒說到的，就請同學們自己動手嘗試一下啦！如果，你在使用一個屬性，學得不需 要緩動或漸變時，TweenLite依然是很有用的，你只需要使用TweenLite.set方法，就可以快速設置一個元素的多個屬性，例如： //TweenLite.set("#rect",{width:"400px",height:"400px",position:"static",margin:"0 auto"}); //第三部分，三維屬性操作（rotationX rotationY rotationZ z等等,不懂這幾個屬性的意思的同學請百度） //並不是所有的瀏覽器都支持CSS3的3D屬性，可以到以下網址(http://caniuse.com/transforms3d)查看都有哪些瀏覽器支持3D屬性 //也就是說使用之前你應該： //設置元素的父元素的perspactive的值， //TweenLite.set("body",{perspactive:500}); //或設置元素自身的transformPerspactive的值 //TweenLite.set("#rect",{transformPerspacity:500}); //再或者，就直接設置CSS的默認transformPerspactive的值 //CSSPlugin.defaultTransformPerspactve=500; //好吧，我們來試一下↓ //TweenLite.to("#rect",1,{rotationX:30,ease:Back.easeOut}); //TweenLite.to("#rect",1,{rotationY:100,ease:Back.easeOut}); //TweenLite.to("#rect",1,{rotationZ:45,ease:Back.easeOut}); } </script> </head> <body> <!--我們用一個div來模擬一個小方塊--> <div id="rect">測試</div> </body> </html>