TweenMax.js (三) CSS屬性，時(shí)間曲線，貝塞爾曲線

CSS

動(dòng)畫關(guān)鍵詞：CSS（一般可以省略）

CSSPlugin用于在TweenMax中對(duì)DOM元素的CSS相關(guān)屬性進(jìn)行動(dòng)畫
在CSSPlugin中CSS屬性需要寫成駝峰式，例如font-size應(yīng)當(dāng)寫作fontSize。有時(shí)候你可以在一些默認(rèn)px為單位的屬性中省略單位，CSSPlugin還可以在不同的單位間做動(dòng)畫：
TweenLite.fromTo(obj, 3, {width:"50%"}, {width:200});//寬度從50%補(bǔ)間至200px

2D Transforms 屬性
  • x 水平方向位移，相當(dāng)于CSS3的translateX，如x:200
  • y 垂直方向位移，相當(dāng)于CSS3的translateY，如y:30
  • xPercent 水平方向位移，以百分比為單位，如xPercent:100%
  • yPercent 垂直方向位移，以百分比為單位，如yPercent:100%
  • rotation 旋轉(zhuǎn)，相當(dāng)于CSS3的rotate，默認(rèn)是角度deg，也可以設(shè)為弧度* rad，3.14弧度等于180度 rotation:45 rotation:"1.5rad"
    • (rotation可設(shè)置旋轉(zhuǎn)方向，只需添加后綴，順時(shí)針："_cw" ，逆時(shí)針："_ccw" ，自動(dòng)計(jì)算最小旋轉(zhuǎn)角度"_short"。還可配合"+=""-="計(jì)算相對(duì)角度。例如： TweenLite.to(element, 2, {rotation:"-170_short", rotationX:"-=30_cw", rotationY:"1.5rad_ccw"}); )
  • scale 縮放，scale:0.8 ，可單獨(dú)設(shè)置scaleX、scaleY
  • skewX 和 skewY 斜切，默認(rèn)是角度deg，也可以設(shè)為弧度rad，3.14弧度等于180度
    • CSSPlugin中skewX、skewY斜切與CSS3的skew斜切是有差別的。例如你在CSS3中設(shè)置斜切70度，目標(biāo)對(duì)象會(huì)被拉得非常長(zhǎng) ，而在CSSPlugin中則不會(huì) 。如果你想達(dá)到CSS3的那種斜切效果，可以設(shè)置全局CSSPlugin.defaultSkewType = "simple"或者單個(gè)動(dòng)畫skewType:"simple"。默認(rèn)是 skewType:"compensated"
3D Transforms 屬性

//為父級(jí)元素設(shè)置視覺距離(推薦方式)
TweenLite.set(container, {perspective:500});
//全局設(shè)置視覺距離
CSSPlugin.defaultTransformPerspective = 500;
//單個(gè)元素設(shè)置視覺距離 "transformPerspective"
TweenLite.set(element, {transformPerspective:500});

  • z 縱深方向位移，相當(dāng)于CSS3的translateZ，如z:200
  • rotationX X軸旋轉(zhuǎn)，相當(dāng)于CSS3的rotateX，默認(rèn)是角度deg，也可以設(shè)為弧度rad，3.14弧度等于180度。如rotationX:60
  • rotationY y軸旋轉(zhuǎn)，相當(dāng)于CSS3的rotateY，默認(rèn)是角度deg，也可以設(shè)為弧度rad，3.14弧度等于180度。如rotationY:60
  • rotationZ z軸旋轉(zhuǎn)，相當(dāng)于CSS3的rotateZ，默認(rèn)是角度deg，也可以設(shè)為弧度rad，3.14弧度等于180度。如rotationZ:60

全部transform屬性都存儲(chǔ)于元素的_gsTransform中，你可以通過(guò)類似element._gsTransform.scaleX讀取，或者TweenLite.set(element, {clearProps:"transform"});清除。如果你想強(qiáng)制從元素的CSS中讀取transform數(shù)值（而不是補(bǔ)間動(dòng)畫所記錄的值，例如元素的實(shí)際角度和動(dòng)畫的記錄角度稍有誤差），可以設(shè)置parseTransform:true

element._gsTransform.rotation; //動(dòng)畫數(shù)值
TweenLite.set(element, {parseTransform:true});
element._gsTransform.rotation; //元素真實(shí)數(shù)值

通常我們?cè)谠O(shè)置CSS3的Transforms時(shí)會(huì)按照一定的順序排列，如translation (x, y, z) -> scale -> rotationX -> rotationY -> skew -> rotation (rotationZ)，但是在CSSPlugin中需要將數(shù)值轉(zhuǎn)化為數(shù)字矩陣，因此你應(yīng)當(dāng)把順序倒轉(zhuǎn)。

CSSPlugin 其他屬性
  • transformOrigin 設(shè)置2D、3D變換（transform）的原點(diǎn)，與CSS3 transform-origin 屬性類似，但多了一個(gè)縱深值?？墒褂?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的變換原點(diǎn)，可通過(guò) CSSPlugin.defaultSmoothOrigin = false關(guān)閉
  • force3D 是否強(qiáng)制3D（matrix3d()代替matrix(),translate3d()代替translate()），使用GPU加速，默認(rèn)是"auto"，僅在需要時(shí)加速。可設(shè)置為true：強(qiáng)制開啟和false：不開啟
  • alpha 透明度，等于opacity。
  • autoAlpha 自動(dòng)透明度，類似于opacity。但與opacity不同的是，當(dāng)元素透明度為0時(shí)，其visibility屬性是"hidden"，不為0時(shí)是"inherit"，這可以提高動(dòng)畫性能。 TweenLite.to(element, 2, {autoAlpha:0}); TweenLite.to(element, 2, {autoAlpha:1, delay:2});
  • className 將元素動(dòng)畫至其他類名的屬性。TweenLite.to(myElement, 1, {className:"class2"});。如果想保留元素的原屬性（例如保留原來(lái)的width和height，只動(dòng)畫background），可以使用+= TweenLite.to(myElement, 1, {className:"+=class2"});
  • autoRound 將像素值和z-index四舍五入取整，可設(shè)為false。
  • bezier 使用貝塞爾曲線，具體參考BezierPlugin說(shuō)明。
  • css CSS動(dòng)畫前綴，如TweenLite.to(element, 1, {css:{left:"100px", top:"50px"}}); 默認(rèn)開啟autoCSS后可省略
  • clearProps 在動(dòng)畫完成前清除屬性，例如TweenLite.from(element, 5, {scale:0, left:200, backgroundColor:"red", clearProps:"scale,left"});清除left和scale

時(shí)間曲線Easing

時(shí)間曲線關(guān)鍵詞是ease，可以設(shè)置進(jìn)場(chǎng)easeIn、出場(chǎng)easeOut 、進(jìn)出場(chǎng)easeInOut。

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

Power0(勻速)、Power1(先加速后減速)、Power2、Power3、Power4(最明顯的先加速后減速)
Back、Bounce、Circ、Elastic、Expo、Sine

//勻速運(yùn)動(dòng)
new TweenMax('.box', 3, {x:500, ease:Power0.easeNone});
//慢速開始，之后越來(lái)越快
new TweenMax('.box', 3, {x:500, ease:Power1.easeIn});
//快速開始，之后越來(lái)越慢
new TweenMax('.box', 3, {x:500, ease:Power1.easeOut});
//慢速開始，之后加快，結(jié)束前又減速
new TweenMax('.box', 3, {x:500, ease:Power1.easeInOut});

甚至可以自定義時(shí)間曲線

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 });
以下需要進(jìn)行config配置

ExpoScaleEase、RoughEase、SlowMo、SteppedEase

貝塞爾曲線Bezier

通過(guò)繪制一組坐標(biāo)點(diǎn)定義一條Bezier動(dòng)畫路徑，使用關(guān)鍵詞bezier。

  • values Array
    定義Bezier曲線的錨點(diǎn)/控制點(diǎn)。錨點(diǎn)/控制點(diǎn)是一組坐標(biāo)點(diǎn)，每個(gè)點(diǎn)都應(yīng)該包含兩個(gè)坐標(biāo)值x和y或left和top
  • type String
    錨點(diǎn)/控制點(diǎn)類型。可選"thru"（默認(rèn)）， "soft"， "quadratic"， 和 "cubic"
    • "thru"：穿越。即Bezier曲線會(huì)穿過(guò)你定義的每一個(gè)錨點(diǎn)，不必定義起始點(diǎn)。通過(guò)定義curviness屬性可調(diào)整Bezier上的張力。
    • "soft"：柔和，Bezier曲線會(huì)被控制點(diǎn)吸引就像磁鐵一樣，通常Bezier曲線不會(huì)穿越控制點(diǎn)。不必定義起始點(diǎn)，最后一個(gè)點(diǎn)是曲線終點(diǎn)，中間可以定義任意多個(gè)控制點(diǎn)。
    • "quadratic"：標(biāo)準(zhǔn)的二次Bezier。以錨點(diǎn)開始和錨點(diǎn)結(jié)束，錨點(diǎn)之間要有一個(gè)控制點(diǎn)，也就是說(shuō)坐標(biāo)點(diǎn)數(shù)量必須為單數(shù)。
    • "cubic"：三次Bezier曲線。以錨點(diǎn)開始，錨點(diǎn)結(jié)束，每個(gè)錨點(diǎn)之間需要有兩個(gè)控制點(diǎn)，也就是說(shuō)坐標(biāo)點(diǎn)數(shù)量必須為1+3n。
  • timeResolution Number
    為了使物體在Bezier曲線上運(yùn)動(dòng)時(shí)，根據(jù)控制點(diǎn)的位置和每段的長(zhǎng)度來(lái)加速或減速。數(shù)字越大，時(shí)間越準(zhǔn)確，默認(rèn)值6。設(shè)為0則直線加速最快，拐點(diǎn)減速最明顯。
  • curviness Number
    曲線彎曲度，僅當(dāng)type為"thru"時(shí)有效，默認(rèn)1。其中0沒有曲線（直線），1是正常曲線，2是正常曲線的兩倍。
  • autoRotate Boolean, Number, or Array (default:false)
    要根據(jù)Bezier路徑上的位置自動(dòng)旋轉(zhuǎn)目標(biāo)，可以使用autoRotate功能。如果你的Bezier僅影響目標(biāo)的"x"和"y"（或"left"和"top"）屬性，并且你不需要將旋轉(zhuǎn)偏移超過(guò)正常值一定量，那么你可以簡(jiǎn)單地設(shè)置autoRotate:true。如果要將旋轉(zhuǎn)偏移一定量（以度為單位），則可以定義一個(gè)數(shù)字，如autoRotate:90 ?；蛘邔?duì)于更高級(jí)的控件，您可以將其定義 autoRotate 為數(shù)組。為了準(zhǔn)確調(diào)整旋轉(zhuǎn)屬性，插件需要5條信息：
      1. 位置屬性1（通常 "x" 或 "left"）
      1. 位置屬性2（通常 "y" 或 "top"）
      1. 旋轉(zhuǎn)屬性（通常 "rotation"）
      1. 要添加到新旋轉(zhuǎn)的度數(shù)（或弧度）（可選 ）
      1. 布爾值，指示是否應(yīng)以弧度而不是度數(shù)定義rotation屬性（默認(rèn)值 false 以度為單位）
        例：影響單個(gè)屬性["x","y","rotation",90*Math.PI/180,true]或影響多個(gè)屬性[["x","y","rotationZ",0,false], ["z","x","rotationY",0,false], ["z","y","rotationX",0,false]]
type
//使用left和top定義坐標(biāo)點(diǎn)，由于使用了默認(rèn)設(shè)置，因此可省略"values"關(guān)鍵詞
TweenMax.to(document.getElementById("myDiv"), 5, {bezier:[{left:100, top:250}, {left:300, top:0}, {left:500, top:400}], ease:Power1.easeInOut});
 
//如果自定義設(shè)置，則需使用"values"關(guān)鍵詞來(lái)包含坐標(biāo)點(diǎn)
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});
 
//設(shè)定目標(biāo)自動(dòng)根據(jù)路徑旋轉(zhuǎn)
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的函數(shù)
//thru坐標(biāo)點(diǎn)轉(zhuǎn)化為二次/三次Bezier曲線坐標(biāo)點(diǎn)
BezierPlugin.bezierThrough( values:Array, curviness:Number, quadratic:Boolean, correlate:String, prepend:Object, calcDifs:Boolean ) : Object
//三次Bezier曲線坐標(biāo)點(diǎn)轉(zhuǎn)化為二次Bezier坐標(biāo)點(diǎn)數(shù)組
BezierPlugin.cubicToQuadratic( a:Number, b:Number, c:Number, d:Number ) : Array
//二次Bezier曲線坐標(biāo)點(diǎn)轉(zhuǎn)化為三次Bezier對(duì)象
BezierPlugin.quadraticToCubic( a:Number, b:Number, c:Number ) : Object
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容