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。

以下可直接配合easeIneaseOuteaseInOut使用

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