GSAP学习（三）——基本的补间动画

转自：http://bbs.9ria.com/thread-421653-1-1.html

//创建一个普通物体，并指定一个任意的属性，然后使其2秒内从0补间到100，像这样:
//var obj={myProp:0};
//TweenLite.to(OBJ,2,{myProp:100});

//解析
//填入tween的第一个参数是目标( 您想补间属性的物件 )，第二是持续时间(通常以秒计),最后是有着要被补间的一个或多个属性和结束值的物件。比方说，您有一个id为"photo"的<img>,你想于1.5秒的过程补间其width属性值到100.您可以使用TweenLite的to()方法：
//var photo=document.getElementById("photo");
//TweenLite.to(photo,1.5,{width:800});
//由于这是一个to()补间，不论开始补间时是多少，width属性都会补间到100.如果您想同时补间height属性为500时，您可以只要做
//TweenLite.to(photo,1.5,{width:800,height:500});
//补间属性的数量没有限制。并且顺序不重要。请注意上面我们使用document.getElementById()获得"photo"元素，使我们可以补间它。如果你可以只传递字符串给TweenLite/Max,并让TweenLite/Max帮您找到元素，那岂不是很好？在1.8.0版本，GSAP把字符串目标作为选择器文本并将其送入您所选择的选择器引擎。它会先寻找window.$,然后window.jQuery，如果都找不到，它会预设为document.getElementById()在这种情况下，自行使用任何您想要的选择器:jquery,zepto,sizzle或你自己的。这样设置：
//TweenLite.selector = YOUR_SELECTOR_ENGINE;
//如果载入jQuery(或被定义为业界标准的任何window.$ )，您不需要做任何事情-GSAP会自动感应和使用的。但GSAP不依存于jQuery或任何特定的选择器引擎。

//补间ID为"myID"的元素
TweenLite.to("#myID",2,{backgroundColor:"#ff0000", width:"50%", top:"100px", color:"#fff", ease:Power2.easeInOut});
//或者是载入jQuery，您可以做更高级的选择，如选择所有类为"myClass"的元素，像这样:
TweenLite.to(".myClass",2,{backgroundColor:"#ff0000", width:"50%", top:"100px", color:"#fff", ease:Power2.easeInOut});

//定义母庙为选择器文本的字符串是一个简单方便的——它完全是可选的。无论如何最终目标必须是一个物件,这样您就可以如上方定义之。可以传递一个jQuery物件或阵列或一个HTML元素或一个普通物件作为目标。有一个很有用的方法from(),可以让您完全相反，定义初始值和补间到目前值。这很容易使动画到目前状态。例如：
//不管目前的scaleX和scaleY是多少，都从0开始动画到目前的scaleX和scaleY
//TweenLite.from(photo, 1.5, {scaleX:0, scaleY:0});

//还有一个fromTo()方法，它允许您定义起始值和结束值：
TweenLite.fromTo(photo, 1.5, {width:0, height:0}, {width:100, height:200}); //补间宽度0到100，高度0到200

//如果您喜欢更物件导向的方法或想用变量存储补间的引用，以便之后可以控制补间（例如，pause()、resume()\reverse()、restart()您可以创建一个这样的补间动画(这样同于to()补间)）
var myTween = new TweenLite(photo, 1.5, {width:100, height:200});

//预设情况下，会立刻播放所有的补间，但是您可以经由在参数传递paused:true或在实例呼叫pause()来一开始就暂停之。

var myTween=TweenLite.to(photo,2,{width:100,puased:true});

//之后继续
myTween.resume();