TweenMax.to()

优质

小牛编辑

129浏览

2023-12-01

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() 示例

.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()返回值

TweenMax.to()的补充说明

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