今天来学习用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,{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",{"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>