TweenMax 二
// *param TweenLine 不依存于jquery TweenLine.to(".test") 补间class为test的元素
// 1.to方法
$(".test").toggle(function(){
TweenLite.to("#demo",0.2,{"width":250,"height":300,ease:Bounce.easeOut,onComplete:function(){
TweenLite.to($(".test"),0.2,{"opacity":0.6})
}});
},function(){
TweenLite.to(".test",0.2,{"width":200,"height":200})
})
// 2.from方法
$(".test").click(function(){
TweenLite.from('.test',1,{scaleX:0,scaleY:0});
// 4.fromTo方法
TweenLite.to('.test',1,{width:300,delay:2});
TweenLite.fromTo(".test",1,{width:50,height:50},{width:250,height:250,ease:"SlowMo.easeOut"});
})
// 5.一开始暂停
var myTween = TweenLite.to('.test',1,{width:100,height:100,paused:true});
// 6.之后继续
myTween.resume();
// 7.delay
TweenLite.to('.test',1,{width:300,delay:2});
// 8.最常用的几种运动方式
ease:Power1.easeOut(对于线性ease其感觉更为自然)
8-1.Linear.easeNone 直线运动
8-2.Poswer.eases
8-3.Back.easeOut
8-4.Elastic.easeOut
8-5.SlowMo.ease
8-6.Bounce.ease
8-7.SteppedEase.config(16)
普通格式ease:"Elastic.easeOut" 反向无点语法(jquery风格) ease:"easeOutElastic" 都可以
// 9.css写法
TweenLite.to('.test',1,{css:{width:300,height:300}});
/**
* 一、关于写法格式
* CSS的特定属性需要被包在自己的物件并传入，如TweenLite.to(element, 1, {css:{left:"100px", top:"50px"}});以便引擎知道这些属性应该由CSSPlugin处理，但由于在浏览器中动画DOM元素是如此普遍，TweenLite和TweenMax(1.8.0版本)会自动检查目标是否为一个DOM元素，如果是(且您还没有在参数定义"CSS"物件)，当第一次渲染补间时，引擎会创建CSS物件并转移任何未保留的属性(如onComplete、ease、delay等，或类似的插件关键字scrollTo、raphael、easel等)成为CSS物件。有轻微的性能损失(几乎察觉不到，除非您同时补间很多元素,但在大多数情况下，这样的方便是值得的。在下面的代码范例中，我们将使用更简洁的风格，省略了css:{}物件，但要知道任何风格都是可以接受的。
* 二、关于单位
* 适用于定义一个计量单位(如"24px"而不是"24"或者"50%"而不是"50")，但在大多数情况下预设是像素(px)，这样您就可以省略单位。即使计量单位不符合目前的，GSAP会尝试将变形它们。因此，举例来说，您可以补间宽度从"50%"到"200px"。
* TweenLite.to(element, 2, {rotation:"1.25rad", skewX:"30deg"});
*/
补间动画css属性：
9-1:2D变形像是rotation、scaleX、scaleY、scale、skewX、skewY、x和y-CSSPlugin最方便的功能之一就是极大地简化在不同浏览器使用变形，包括IE6！ 无需麻烦的使用各种浏览器前缀和在IE中使用时髦的矩阵过滤器。您可以直观地设置变形属性。
TweenLite.to('.test', 2, {rotation:30, scaleX:0.8});
9-2:预设情况下rotation、skewX、skewY使用度度，但您也可以使用弧度。只需附加标准后缀("rad"或"deg")，例如
TweenLite.to(element, 2, {rotation:"1.25rad", skewX:"30deg"});
关于2D变形的注意事项：
9-2-1最好以"absolute"设置元素的位置，以避免剪裁(多为旧版本的IE浏览器)。
9-2-2可以用"scale"同时控制"scaleX"和"scaleY"性质。
9-2-3声明的变形属性的顺序没有差别。
9-2-4TweenLite无关在浏览器中元素的呈现品质。有些浏览器似乎呈现精美的转化元素而另一些不处理抗锯齿等。*/
9-3:3D变形 ：除了所有普通2D属性(x、y、scaleX、scaleY、scale、rotation、skewX、skewY)几乎运作于所有的浏览器，您也可以动画3D属性例如rotationX、rotationY、rotationZ(等同于常规的"rotation")、z、perspective和transformPerspective于大多数常见浏览器。再次说明，不须使用浏览器的前缀;CSSPlugin在背后为您处理了这一切。您可以直观的同时动画3D变形属性和2D属性(除了skew)
//CSS范例：
.myClass {
transform: scale(1.5, 1.5) rotateY(45deg) translate3d(10px, 0px,-200px)
}
//对应的GSAP变形(补间2秒)：
TweenLite.to('.test', 2, {scale:0.8, rotationY:45, x:10, y:0, z:-200});*/
关于3D变形的注意事项：
9-3-1在不支持3D变形的浏览器，它们将被忽略。例如，可能rotationX无法正常运作，但旋转却可以运作。
9-3-2所有的变形都会记住，所以可以不用担心会失去补间动画的各个属性。不需要在每个补间定义所有的变形属性-只要定义想要动画的那些。
9-3-3TweenLite无关在浏览器中元素的呈现品质。有些浏览器似乎呈现精美的变形元素而另一些不处理抗锯齿等。
9-3-4要了解更多关于CSS 3D变形，看看这篇文章http://www.smashingmagazine.com/2012/01/adventures-in-the-third-dimension-css-3-d-transforms/
9-4 transformOrigin
9-4-1:transformOrigin-设置所有变形发生的原点。预设情况下会在元素的中心("50% 50%")。您可以使用关键字"top"、"left"，"right"或"bottom"定义值，也可以使用百分比(右下角是"100% 100%")或像素。如果您想要一个物件旋转围绕其左上角可以这样做：
沿着元素的左上角旋转
TweenLite.to(element, 2, {rotation:360, transformOrigin:"left top"});
9-4-2: directionalRotation - 可以特定的方向旋转，可以是顺时针方向 ("_cw"后缀)或是逆时针 ("_ccw"后缀)或在最短的方向上("_short"后缀)在这种情况下，插件选择的方向会根据最短路径。例如，如果目前元素旋转了170度，想补间到-170度，正常旋转补间会以逆时针方向转340度，但如果使用了"_short"后缀，会以顺时针方向转20度来代替。范例:
TweenLite.to(element, 2, {rotation:"-170_short"});
甚至可以用于3D旋转：
TweenLite.to(element, 2, {rotation:"-170_short", rotationX:"-=30_cw", rotationY:"1.5rad_ccw"});
9-4-3:autoAlpha-同于"opacity"属性，除了当值变为"0"时，"visibility"属性将被设为"hidden"，以提高浏览器的渲染性能和防止点击或互动目标。当值不为0时，"visibility"将被设为"visible"。
在2秒内，淡出且visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2})
9-4-4:className
className-可以使元素的类改变。例如目前myElement的类是"class1"，您想要改变为"class2"和造成动画上的区别，您可以这样做：
TweenLite.to('.test',1,{className:"test2"})
如果您想将类添加到现有的，您可以简单地使用"+="前缀。要删除一个类，使用"-="前缀，例如：
TweenLite.to('.test', 1, {className:"+=test2"});
//暂停
tween.pause();
//恢复(方向-反转或不反转)
tween.resume();
//反转(总是回到初始值)
tween.reverse();
//跳转到恰好0.5秒
tween.seek(0.5);
//补间半速
tween.timeScale(0.5);
//补间双速
tween.timeScale(2);
//立即删除补间，并使其符合垃圾收集
tween.kill();
//重复此补间3次(共4次)，并在每个重复之间等待0.5秒
TweenMax.to(element, 1, {width:"50%", repeat:3, repeatDelay:0.5});
//无限次淡入淡出(repeat为-1表示无限次)
TweenMax.to(element, 1, {opacity:0, repeat:-1, yoyo:true});
TweenMax.to('.test', 1, {opacity:0, repeat:-1, yoyo:true,ease:Linear.easeOut});
//立即覆盖myElement的所有补间
TweenLite.to(myElement, 1, {width:"50%", overwrite:"all"});
//不会覆盖任何东西(允许冲突)
TweenLite.to(myElement, 1, {width:"50%", overwrite:"none"});
//只覆盖myElement个别属性的目前补间(这是预设的，所以通常在这种情况下不需要指定任何覆盖)
TweenLite.to(myElement, 1, {width:"50%", overwrite:"auto"});
//设置预设覆盖模式为"all"而不是"auto"
TweenLite.defaultOverwrite = "all";
当然您也可以用TweenLite.killTweensOf()方法手动终止特定物件的所有补间，但定义覆盖模式的好处是必要才会起作用(当补间第一次渲染时)，尤其当序列复杂时这更显的重要。
//淡出所有类为"myClass"的元素[/size]
TweenLite.to(".myClass", 1, {opacity:0});
//补间ID为"myElement"的元素的宽度到500px
TweenLite.to("#myElement", 1, {width:"500px", ease:Elastic.easeOut});
//补间类为"myClass"的所有物件的"marginTop"为交错的方式，使它们从100px跑近来
var tl = new TimelineLite();
tl.staggerFrom(".myClass", 1, {marginTop:"-=100px", opacity:0}, 0.1);
//或使用jQueryeach()方法来遍历结果，并错开淡出
$(".myClass").each( function(index, element) {
TweenLite.to( element, 1, {autoAlpha:0, delay:index * 0.2});
});
//添加使用$的点击处理函数来表示选单元素被点击并且把高补间成100px
$("#menu").click(
function(){
TweenLite.to( $(this), 0.7, { height:"100px", ease:Power2.easeInOut } );
}
);*