GreenSock2

TweenLite

TweenLite.to(Obj, time, { ( attr : val) , ( funkey) : ( funObj) } )
TweenLite会将某一对象Object，在制定的时间time内，进行如第三个参数所描述的进行变换，第三个参数中的描述可以是对象Object的属性，例如：

var demo = {score:0},
    scoreDisplay = document.getElementById("scoreDisplay");

//create a tween that changes the value of the score property of the demo object from 0 to 100 over the course of 20 seconds.
var tween = TweenLite.to(demo, 20, {score:100, onUpdate:showScore})

//each time the tween updates this function will be called.
function showScore() {
  scoreDisplay.innerHTML = demo.score.toFixed(2);
}

也可以是css当中的样式，例如

window.onload = function() {
  var logo = document.getElementById("logo");
  TweenLite.to(logo, 2, {left:"542px", backgroundColor:"black", borderBottomColor:"#90e500", color:"white"});
}

TweenLite中支持的函数关键字都在GreenSock中
TweenLite支持字符串选择，默认用window.$

TweenLite.to(".myClass", 2, {boxShadow:"0px 0px 20px red", color:"#FC0"});

不仅有TweenLite.to，TweenLite.from，还有TweenLite.fromTo

//tweens from width 0 to 100 and height 0 to 200
TweenLite.fromTo(photo, 1.5, {width:0, height:0}, {width:100, height:200});

---

TweenLite控制函数（Control）

将TweenLite作为对象创建可以对动画的每一帧进行控制

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

//then later, resume
myTween.resume();

动画的每一帧（tween）都是可控的，
tween.play();//继续动画，如果当前动画被reverse，play会正向播放，不会按照reverse的方向播放
tween.pause();//暂停动画
tween.reverse();//动画反向
tween.resume();//在当前动画播放方向上继续播放，在reverse时会继续方向进行播放
tween.play(5);//从动画的第5秒开始播放
tween.reverse(1);//从动画的第1秒回放
tween.seek(3);//在保持当前动画状态的基础上将动画平移至3秒（seek会保持当前动画状态，包括pause、reverse、timeScale等）
tween.timeScale(0.5);//动画速度变成当前的0.5倍（慢一倍）
tween.timeScale(1);//动画速度正常
tween.timeScale(2);//动画速度2倍
tween.restart();//动画重新播放

TweenMax

TweenMax是TweenLite升级版，特有属性：repeat, repeatDelay, yoyo & onRepeat
repeat：动画重复次数
repeatDelay：重复动画延迟时间
yoyo：是否荡过来荡过去
onRepeat：动画执行完一次后，重复播放动画前的回调函数
特有方法: staggerTo，staggerFrom，staggerFromTo

var box = document.getElementById("greenBox"),
    count = 0,
    tween;

tween = TweenMax.to(box, 2, {left:"700px", repeat:10, yoyo:true, onRepeat:onRepeat, repeatDelay:0.5, ease:Linear.easeNone});

function onRepeat() {
  count++;
  box.innerHTML = count;
  TweenLite.set(box, {backgroundColor:"hsl(" + Math.random() * 255 + ", 90%, 60%)"});
} 

TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5);

//The stagger parameter (0.5) controls the amount of time between the start of each tween.