CSSPlugin文档

TweenMax包含了CSSPlugin。

365体育官网-ribo88_365手机体育投注_365体育在线国外网址关键词:CSS(一般可以省略)

CSSPlugin用于在TweenMax中对DOM元素的CSS相关属性进行365体育官网-ribo88_365手机体育投注_365体育在线国外网址,如width, height, margin, padding, top, left还有一些很有趣的例如transforms (rotation, scaleX, scaleY, skewX, skewY, x, y, rotationX, and rotationY), colors, opacity等。

与Jquery等365体育官网-ribo88_365手机体育投注_365体育在线国外网址相似,在CSSPlugin中CSS属性需要写成驼峰式,例如font-size应当写作fontSize。有时候你可以在一些默认px为单位的属性中省略单位,CSSPlugin还可以在不同的单位间做365体育官网-ribo88_365手机体育投注_365体育在线国外网址:

TweenLite.fromTo(obj, 3, {width:"50%"}, {width:200});//宽度从50%补间至200px

CSSPlugin可以为复杂数值设置365体育官网-ribo88_365手机体育投注_365体育在线国外网址,例如boxShadow:"0px 0px 20px 20px red"borderRadius:"50% 50%" border:"5px solid rgb(0,255,0)"

CSSPlugin中的2D Transforms

CSSPlugin内置了2D transform效果,包括位移、旋转、缩放、斜切。

//用法简洁
TweenLite.to(element, 2, {rotation:30, scaleX:0.8});
//可使用角度和弧度"deg" or "rad"
TweenLite.to(element, 2, {rotation:"1.25rad", skewX:"30deg"});

2D Transforms列表

属性 说明
x 水平方向位移,相当于CSS3的translateX,如x:200
?
y 垂直方向位移,相当于CSS3的translateY,如y:30
?
xPercent 水平方向位移,以百分比为单位,如xPercent:100%
?
yPercent 垂直方向位移,以百分比为单位,如yPercent:100%
?
rotation 旋转,相当于CSS3的rotate,默认是角度deg,也可以设为弧度rad,3.14弧度等于180度 rotation:45 rotation:"1.5rad"
?
scale 缩放,scale:0.8
?
,可单独设置scaleX、scaleY
skewX 水平斜切,默认是角度deg,也可以设为弧度rad,3.14弧度等于180度skewX:30
?
skewY 垂直斜切,默认是角度deg,也可以设为弧度rad,3.14弧度等于180度skewY:30
?
?
CSSPlugin中skewX、skewY斜切与CSS3的skew斜切是有差别的。例如你在CSS3中设置斜切70度,目标对象会被拉得非常长
?
,而在CSSPlugin中则不会
?
。如果你想达到CSS3的那种斜切效果,可以设置全局CSSPlugin.defaultSkewType = "simple"或者单个365体育官网-ribo88_365手机体育投注_365体育在线国外网址skewType:"simple"。默认是 skewType:"compensated"
?
rotation可设置旋转方向,只需添加后缀,顺时针:"_cw" ,逆时针:"_ccw" ,自动计算最小旋转角度"_short"。还可配合"+=""-="计算相对角度。例如:?TweenLite.to(element, 2, {rotation:"-170_short", rotationX:"-=30_cw", rotationY:"1.5rad_ccw"});
?

CSSPlugin中的3D Transforms

3D变形只适用于现代主流浏览器,效果包括3D旋转和纵深位移。

//2D和3D混用
TweenLite.to(element, 2, {rotationX:45, scaleX:0.8, z:-300});

3D Transforms列表

属性 说明
z 纵深方向位移,相当于CSS3的translateZ,如z:200
?
rotationX X轴旋转,相当于CSS3的rotateX,默认是角度deg,也可以设为弧度rad,3.14弧度等于180度。如rotationX:60
?
rotationY y轴旋转,相当于CSS3的rotateY,默认是角度deg,也可以设为弧度rad,3.14弧度等于180度。如rotationY:60
?
rotationZ z轴旋转,相当于CSS3的rotateZ,默认是角度deg,也可以设为弧度rad,3.14弧度等于180度。如rotationZ:60
?
?
全部transform属性都存储于元素的_gsTransform中,你可以通过类似element._gsTransform.scaleX读取,或者TweenLite.set(element, {clearProps:"transform"});清除。如果你想强制从元素的CSS中读取transform数值(而不是补间365体育官网-ribo88_365手机体育投注_365体育在线国外网址所记录的值,例如元素的实际角度和365体育官网-ribo88_365手机体育投注_365体育在线国外网址的记录角度稍有误差),可以设置parseTransform:true
element._gsTransform.rotation; //365体育官网-ribo88_365手机体育投注_365体育在线国外网址数值
TweenLite.set(element, {parseTransform:true});
element._gsTransform.rotation; //元素真实数值


要产生3D效果,还需要设置视觉距离,例如CSS的transform: perspective(500px),也可在TweenMax中设置

//为父级元素设置视觉距离(推荐方式)
TweenLite.set(container, {perspective:500});
 
//全局设置视觉距离
CSSPlugin.defaultTransformPerspective = 500;
 
//单个元素设置视觉距离 "transformPerspective"
TweenLite.set(element, {transformPerspective:500});

通常我们在设置CSS3的Transforms时会按照一定的顺序排列,如translation (x, y, z) -> scale -> rotationX -> rotationY -> skew -> rotation (rotationZ),但是在CSSPlugin中需要将数值转化为数字矩阵,因此你应当把顺序倒转。

//你的CSS:
.myClass {
    transform: translate3d(10px, 0px, -200px) rotateY(45deg) scale(1.5, 1.5);
}
 
//转化为TweenMax数值
TweenLite.to(element, 2, {scale:1.5, rotationY:45, x:10, y:0, z:-200});
 
//你的CSS:
.myClass {
    transform: perspective(500px) translateY(50px) rotate(120deg)
}
 
//转化为TweenMax数值
TweenLite.set(element, {transformPerspective:500, rotation:120, y:50});

CSSPlugin 其他属性

属性 说明
transformOrigin 设置2D、3D变换(transform)的原点,与CSS3 transform-origin 属性类似,但多了一个纵深值。可使用"top", "left", "right", "bottom"或百分比或像素值。
transformOrigin:"left top"
?
transformOrigin:"50px 20px"transformOrigin:"50% 50% -400px"}
svgOrigin(只适用于SVG) 与transformOrigin类似,只接受像素值 TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"})
smoothOrigin(只适用于SVG) 平滑改变SVG的变换原点,可通过 CSSPlugin.defaultSmoothOrigin = false关闭
force3D 是否强制3D(matrix3d()代替matrix(),translate3d()代替translate()),使用GPU加速,默认是"auto",仅在需要时加速。可设置为true:强制开启和false:不开启
alpha 透明度,等于opacity。
?
autoAlpha 自动透明度,类似于opacity。但与opacity不同的是,当元素透明度为0时,其visibility属性是"hidden",不为0时是"inherit",这可以提高365体育官网-ribo88_365手机体育投注_365体育在线国外网址性能。 TweenLite.to(element, 2, {autoAlpha:0}); TweenLite.to(element, 2, {autoAlpha:1, delay:2});
?
className 将元素365体育官网-ribo88_365手机体育投注_365体育在线国外网址至其他类名的属性。TweenLite.to(myElement, 1, {className:"class2"});。如果想保留元素的原属性(例如保留原来的width和height,只365体育官网-ribo88_365手机体育投注_365体育在线国外网址background),可以使用+= TweenLite.to(myElement, 1, {className:"+=class2"});
autoRound 将像素值和z-index四舍五入取整,可设为false。
bezier 使用贝塞尔曲线,具体参考BezierPlugin说明。
?
css CSS365体育官网-ribo88_365手机体育投注_365体育在线国外网址前缀,如TweenLite.to(element, 1, {css:{left:"100px", top:"50px"}}); 默认开启autoCSS后可省略
clearProps 在365体育官网-ribo88_365手机体育投注_365体育在线国外网址完成前清除属性,例如TweenLite.from(element, 5, {scale:0, left:200, backgroundColor:"red", clearProps:"scale,left"});清除left和scale


CSSPlugin还可365体育官网-ribo88_365手机体育投注_365体育在线国外网址CSS变量,例如:

html {
  --myColor: green;
}

TweenMax.to("html", 1, {"--myColor":"orange", yoyo:true, repeat:20});