.fromTo()

.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object, position:* ) : *
添加一个TweenLite.fromTo()动画到时间轴,相当于add(TweenLite.fromTo(...)),以下两行产生相同的结果:
myTimeline.add( TweenLite.fromTo(element, 1, {left:0, opacity:1}, {left:100, opacity:0.5}) );
myTimeline.fromTo(element, 1, {left:0, opacity:1}, {left:100, opacity:0.5});
你可以使用链式调用快速构建序列:
//创建一个时间轴
var tl = new TimelineLite({onComplete:myFunction});
         
//以下是链式调用,为了方便观看我们把他们换行了
tl.fromTo(element, 1, {left:0}, {left:-100})    //添加一个动画
  .to(element, 1, {top:50}, "-=0.25")        //在时间轴末尾前0.25秒添加一个动画
  .set(element, {opacity:0})            //设置动画元素的透明度
  .call(otherFunction)            //执行函数otherFunction()
  .staggerTo([element1, element2, element3], 1.5, {rotation:45}, 0.25); //最后旋转element1, element2, element3,他们的起始间隔是0.25秒
使用position参数控制插入点。
tl.fromTo(element, 1, {left:0}, {left:100});  //添加至时间轴末尾
tl.fromTo(element, 1, {left:0}, {left:100}, 2);  //添加至2秒处(绝对位置)
tl.fromTo(element, 1, {left:0}, {left:100}, "+=2");  //添加至时间轴末尾后2秒处(相对位置)
tl.fromTo(element, 1, {left:0}, {left:100}, "myLabel");  //添加至标记处
tl.fromTo(element, 1, {left:0}, {left:100}, "myLabel+=2");  //添加至标记后2秒处
.fromTo()适用于TimelineMaxTimelineLite

.fromTo()的参数

参数 类型 必填 说明
target Object 需要动画的对象
duration Number 动画持续的秒数(或帧)
fromVars Object 动画的起始参数(CSS属性)
toVars Object 动画的结束参数及一些特殊参数(CSS属性、延迟、重复次数、回调等),例如myTimeline.fromTo(element, 1, {left:0, top:0}, {left:100, top:200, onComplete:myFunction});
position * 插入动画的位置。秒/帧或标签的绝对和相对位置,默认为"+=0" 。

.fromTo()效果展示

  • HTML
  • CSS
  • JS
  • 展示
.box {
    width:50px;
    height:50px;
    border-radius:6px;
    margin-top:4px;
  }
.green{
    background-color:#6fb936;
  }
var tl = new TimelineMax();
tl.fromTo(".box", 2, {x:50, y:100}, {x:500, y:0, repeat:2}, 2);
重播

.fromTo()返回值

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

.fromTo()的补充说明

在动画的fromTo()方法中immediateRender(立即渲染)一般默认为true,你可以在fromVars或者toVars中设置immediateRender:false

转载原创文章请注明:文章转载自:TweenMax中文网 [https://www.tweenmax.com.cn]
本文地址:https://www.tweenmax.com.cn/api/timelinemax/fromTo()