TweenMax.js (三) CSS属性，时间曲线，贝塞尔曲线

CSS

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

CSSPlugin用于在TweenMax中对DOM元素的CSS相关属性进行动画
在CSSPlugin中CSS属性需要写成驼峰式，例如font-size应当写作fontSize。有时候你可以在一些默认px为单位的属性中省略单位，CSSPlugin还可以在不同的单位间做动画：
TweenLite.fromTo(obj, 3, {width:"50%"}, {width:200});//宽度从50%补间至200px

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"
- (rotation可设置旋转方向，只需添加后缀，顺时针："_cw" ，逆时针："_ccw" ，自动计算最小旋转角度"_short"。还可配合"+=""-="计算相对角度。例如： TweenLite.to(element, 2, {rotation:"-170_short", rotationX:"-=30_cw", rotationY:"1.5rad_ccw"}); )
scale 缩放，scale:0.8 ，可单独设置scaleX、scaleY
skewX 和 skewY 斜切，默认是角度deg，也可以设为弧度rad，3.14弧度等于180度
- CSSPlugin中skewX、skewY斜切与CSS3的skew斜切是有差别的。例如你在CSS3中设置斜切70度，目标对象会被拉得非常长，而在CSSPlugin中则不会。如果你想达到CSS3的那种斜切效果，可以设置全局CSSPlugin.defaultSkewType = "simple"或者单个动画skewType:"simple"。默认是 skewType:"compensated"

3D Transforms 属性

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

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; //元素真实数值

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

CSSPlugin 其他属性

transformOrigin 设置2D、3D变换（transform）的原点，与CSS3 transform-origin 属性类似，但多了一个纵深值。可使用"top", "left", "right", "bottom"或百分比或像素值。
transformOrigin:"left top" 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

时间曲线Easing

时间曲线关键词是ease，可以设置进场easeIn、出场easeOut 、进出场easeInOut。

以下可直接配合`easeIn`、`easeOut`、`easeInOut`使用

Power0(匀速)、Power1(先加速后减速)、Power2、Power3、Power4(最明显的先加速后减速)
Back、Bounce、Circ、Elastic、Expo、Sine

//匀速运动
new TweenMax('.box', 3, {x:500, ease:Power0.easeNone});
//慢速开始，之后越来越快
new TweenMax('.box', 3, {x:500, ease:Power1.easeIn});
//快速开始，之后越来越慢
new TweenMax('.box', 3, {x:500, ease:Power1.easeOut});
//慢速开始，之后加快，结束前又减速
new TweenMax('.box', 3, {x:500, ease:Power1.easeInOut});

甚至可以自定义时间曲线

TweenLite.to(graph, 2.5, { ease: CustomEase.create("custom", "M0,0 C0.084,0.61 0.214,0.802 0.28,0.856 0.356,0.918 0.374,1 1,1"), y: -500 });

以下需要进行config配置

ExpoScaleEase、RoughEase、SlowMo、SteppedEase

贝塞尔曲线Bezier

通过绘制一组坐标点定义一条Bezier动画路径，使用关键词bezier。

values Array
定义Bezier曲线的锚点/控制点。锚点/控制点是一组坐标点，每个点都应该包含两个坐标值x和y或left和top
type String
锚点/控制点类型。可选"thru"（默认）， "soft"， "quadratic"，和 "cubic"
- "thru"：穿越。即Bezier曲线会穿过你定义的每一个锚点，不必定义起始点。通过定义curviness属性可调整Bezier上的张力。
- "soft"：柔和，Bezier曲线会被控制点吸引就像磁铁一样，通常Bezier曲线不会穿越控制点。不必定义起始点，最后一个点是曲线终点，中间可以定义任意多个控制点。
- "quadratic"：标准的二次Bezier。以锚点开始和锚点结束，锚点之间要有一个控制点，也就是说坐标点数量必须为单数。
- "cubic"：三次Bezier曲线。以锚点开始，锚点结束，每个锚点之间需要有两个控制点，也就是说坐标点数量必须为1+3n。
timeResolution Number
为了使物体在Bezier曲线上运动时，根据控制点的位置和每段的长度来加速或减速。数字越大，时间越准确，默认值6。设为0则直线加速最快，拐点减速最明显。
curviness Number
曲线弯曲度，仅当type为"thru"时有效，默认1。其中0没有曲线（直线），1是正常曲线，2是正常曲线的两倍。
autoRotate Boolean, Number, or Array (default:false)
要根据Bezier路径上的位置自动旋转目标，可以使用autoRotate功能。如果你的Bezier仅影响目标的"x"和"y"（或"left"和"top"）属性，并且你不需要将旋转偏移超过正常值一定量，那么你可以简单地设置autoRotate:true。如果要将旋转偏移一定量（以度为单位），则可以定义一个数字，如autoRotate:90 。或者对于更高级的控件，您可以将其定义 autoRotate 为数组。为了准确调整旋转属性，插件需要5条信息：
- 1. 位置属性1（通常 "x" 或 "left"）
- 1. 位置属性2（通常 "y" 或 "top"）
- 1. 旋转属性（通常 "rotation"）
- 1. 要添加到新旋转的度数（或弧度）（可选）
- 1. 布尔值，指示是否应以弧度而不是度数定义rotation属性（默认值 false 以度为单位）
    例：影响单个属性["x","y","rotation",90*Math.PI/180,true]或影响多个属性[["x","y","rotationZ",0,false], ["z","x","rotationY",0,false], ["z","y","rotationX",0,false]]

type

//使用left和top定义坐标点，由于使用了默认设置，因此可省略"values"关键词
TweenMax.to(document.getElementById("myDiv"), 5, {bezier:[{left:100, top:250}, {left:300, top:0}, {left:500, top:400}], ease:Power1.easeInOut});
 
//如果自定义设置，则需使用"values"关键词来包含坐标点
TweenMax.to(document.getElementById("myDiv"), 5, {bezier:{curviness:1.25, values:[{x:100, y:250}, {x:300, y:0}, {x:500, y:400}], autoRotate:true}, backgroundColor:"#f00", ease:Power1.easeInOut});
 
//定义type为"soft"
TweenMax.to(document.getElementById("myDiv"), 5, {bezier:{type:"soft", values:[{x:100, y:250}, {x:300, y:0}, {x:500, y:400}], autoRotate:true}, ease:Power1.easeInOut});
 
//设定目标自动根据路径旋转
TweenMax.to(document.getElementById("myDiv"), 5, {bezier:{type:"cubic", values:[{x:100, y:250}, {x:150, y:100}, {x:300, y:500}, {x:500, y:400}], autoRotate:["x","y","rotation",45,false]}, ease:Power1.easeInOut});

BezierPlugin的函数

//thru坐标点转化为二次/三次Bezier曲线坐标点
BezierPlugin.bezierThrough( values:Array, curviness:Number, quadratic:Boolean, correlate:String, prepend:Object, calcDifs:Boolean ) : Object
//三次Bezier曲线坐标点转化为二次Bezier坐标点数组
BezierPlugin.cubicToQuadratic( a:Number, b:Number, c:Number, d:Number ) : Array
//二次Bezier曲线坐标点转化为三次Bezier对象
BezierPlugin.quadraticToCubic( a:Number, b:Number, c:Number ) : Object