.to()

.to( target:Object, duration:Number, vars:Object, position:* ) : *
添加一个TweenLite.to()动画到时间轴，相当于add(TweenLite.to(...))，以下两行产生相同的结果：

myTimeline.add( TweenLite.to(element, 1, {left:100, opacity:0.5}) );
myTimeline.to(element, 1, {left:100, opacity:0.5});

链式调用：你可以将这些调用链接在一起，并使用其他便捷方法（如 fromTo(), call(), set(), staggerTo() 等），快速构建动画序列。

//创建一个时间轴
var tl = new TimelineLite({onComplete:myFunction});
//以下是链式调用，为了方便观看我们把他们换行了
tl.to(element, 1, {left:100})        //添加一个动画
  .to(element, 1, {top:50}, "-=0.25")    //在时间轴末端前0.25秒（即时间轴0.75秒）处添加动画
  .set(element, {opacity:0})        //设置动画元素的透明度
  .call(otherFunction)        //执行函数otherFunction()
  .staggerTo([e1, e2, e3], 1.5, {rotation:45}, 0.25); //最后旋转e1, e2, e3，他们的起始间隔是0.25秒

使用position参数控制插入点。

tl.to(element, 1, {left:100});  //添加至时间轴末尾
tl.to(element, 1, {left:100}, 2);  //添加至2秒处（绝对位置）
tl.to(element, 1, {left:100}, "+=2");  //添加至时间轴末尾后2秒处（相对位置）
tl.to(element, 1, {left:100}, "myLabel");  //添加至标记处
tl.to(element, 1, {left:100}, "myLabel+=2");  //添加至标记后2秒处

.to()适用于TimelineMaxTimelineLite

.to()的参数

.to() 示例

.box {
    width:50px;
    height:50px;
    border-radius:6px;
    margin-top:4px;
  }
.green{
    background-color:#6fb936;
  }

var tl = new TimelineMax();
tl.to(".box", 4, {x:500}, 1) //在1秒处添加动画
  .to(".box", 1, {y:100}, "-=3"); //在2秒处添加动画

.to()返回值

返回该时间轴以便链式调用。

.to()的补充说明