TweenMax.to()

TweenMax.to( target:Object, duration:Number, vars:Object ) : TweenMax
此方法用于创建一个从当前属性到指定目标属性的TweenMax动画对象。
以下几种方式效果相同。 
TweenMax.to(obj, 1, {x:100});
var myTween = new TweenMax(obj, 1, {x:100})
var myTween = TweenMax.to(obj, 1, {x:100});
对多个目标进行动画 
TweenMax.to([obj1, obj2, obj3], 1, {x:100});
TweenMax.to()适用于TweenMaxTweenLite

TweenMax.to()的参数

参数名 类型 是否必填 描述
target object 是 需要动画的对象
duration number 是 动画持续时间，一般是秒
vars object 是 动画参数（CSS属性、延迟、重复次数等）

TweenMax.to()效果展示

  • HTML
  • CSS
  • JS
  • 展示

  

  

  


.box {
    width:50px;
    height:50px;
    border-radius:6px;
    margin-top:4px;
  }
.green{
    background-color:#6fb936;
  }
.orange {
    background-color: #f38630;
}
.grey {
    background-color: #989898;
}
var myTween = TweenMax.to(".box", 1, {
  x: function(index, target) {
    console.log(index, target);
    return (index + 1) * 100 // 100, 200, 300
  }
})
重播

TweenMax.to()的补充说明

以上例子对三个元素进行动画，分别向X轴方向运动100px、200px、300px

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

TweenMax API