TweenMax.set()

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()效果展示

  • HTML
  • CSS
  • JS
  • 展示

右边的方块设置了透视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([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%)。

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