TweenMax.set()

优质

小牛编辑

119浏览

2023-12-01

TweenMax.set( target:Object, vars:Object ) : TweenMax 立即设置目标的属性值而不产生过渡动画，相当于0的动画时间。
返回TweenMax对象。

//以下两个设置作用相同
TweenMax.set(myObject, {x:100});
TweenMax.to(myObject, 0, {x:100});

TweenMax.set()适用于TweenMaxTweenLite

TweenMax.set()的参数

参数名	类型	是否必填	描述
target	object	是	需要移动的对象
vars	object	是	动画参数

TweenMax.set() 示例

右边的方块设置了透视transformPerspective，因此产生了3D效果

.box {
  width:100px;
  height:100px;
  background-color:#6fb936;
  margin:10px 100px 0;
  display:inline-block;
}
.600box {
  margin-top: 10px;
}
.nbox {
  display:inline-block;
  margin: 10px auto 0;
  width:100px;
  height:100px;
}

TweenMax.set(".nbox",{transformPerspective:300});
//或者设置父级元素，使其全部子元素产生3D效果 TweenMax.set(".wrapper",{perspective:200});
TweenMax.to(".box", 3, {rotationY:360, transformOrigin:"left top"})

TweenMax.set()返回值

TweenMax.set()的补充说明

为一个数组设置属性

TweenMax.set([obj1, obj2, obj3], {x:100, y:50, opacity:0});

3D效果

在平时的动效开发中，为了使动效具有立体的效果，一般会用到CSS3中的3D transform这一属性。在TweenMax中也提供了3D transform功能，支持CSS3D的全部属性，使用起来比CSS3更加方便。
perspective和transformPerspective两个属性。它们是TweenMax中运行的基础，使用它们才能使元素具有一个3D空间透视的表现能力。

transformPerspective是针对单个元素使用的，而perspective则是使用在父级元素上，使用它会使该父级元素下的子元素具有3D空间透视的一个展现形式。
只需要在父级使用perspective的方法，可以同时使它的子元素都具有3D的展现。

transformOrigin

transformOrigin是用来设置元素在做transform位移变换时的原点的。默认值是元素的中心点即("50%,50%")。transformOrigin有三个值(x,y,z)，z值是一个可选项。

可以使用"top", "left", "right",或者是"bottom"值亦或是百分值(比如bottom right可以设置为 "100% 100%)。