CSSPlugin文档

优质

小牛编辑

122浏览

2023-12-01

TweenMax包含了CSSPlugin。

动画关键词：CSS（一般可以省略）

CSSPlugin用于在TweenMax中对DOM元素的CSS相关属性进行动画，如width, height, margin, padding, top, left还有一些很有趣的例如transforms (rotation, scaleX, scaleY, skewX, skewY, x, y, rotationX, and rotationY), colors, opacity等。

与Jquery等动画相似，在CSSPlugin中CSS属性需要写成驼峰式，例如font-size应当写作fontSize。有时候你可以在一些默认px为单位的属性中省略单位，CSSPlugin还可以在不同的单位间做动画：

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

CSSPlugin可以为复杂数值设置动画，例如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"`或者单个动画`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数值（而不是补间动画所记录的值，例如元素的实际角度和动画的记录角度稍有误差），可以设置`parseTransform:true` `element._gsTransform.rotation; //动画数值 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"，这可以提高动画性能。 `TweenLite.to(element, 2, {autoAlpha:0});` `TweenLite.to(element, 2, {autoAlpha:1, delay:2});`
className	将元素动画至其他类名的属性。`TweenLite.to(myElement, 1, {className:"class2"});`。如果想保留元素的原属性（例如保留原来的width和height，只动画background），可以使用+= `TweenLite.to(myElement, 1, {className:"+=class2"});`
autoRound	将像素值和z-index四舍五入取整，可设为false。
bezier	使用贝塞尔曲线，具体参考BezierPlugin说明。
css	CSS动画前缀，如`TweenLite.to(element, 1, {css:{left:"100px", top:"50px"}});`默认开启autoCSS后可省略
clearProps	在动画完成前清除属性，例如`TweenLite.from(element, 5, {scale:0, left:200, backgroundColor:"red", clearProps:"scale,left"});`清除left和scale

CSSPlugin还可动画CSS变量，例如：

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