TimeMax精簡語法

1.安裝插件

<script src="TweenMax.min.js"></script>
    let t =  new TimelineMax();
複製代碼

2.運動方式

語法	解釋
to	到哪裏
from	設置終點位置，往回運動
fromTo	從設置好的開始位置，移動到設置好的結束位置

t.to("#box",2,{x:400})
t.from("#box",2,{x:400})
t.fromTo("#box",2,{x:400},{x:600})
複製代碼

3.運動屬性

語法	解釋
width	寬度
height	高度
left	左
right	右
autoAlpha、opacity	透明度
x、y	位移
scale、scaleX、scaleY	縮放
rotation、rotationX、rotationY、rotationZ	旋轉
skewX、skewY	斜切

4.運動效果ease

語法	解釋
Linear	線性變化
Back	高度
Bounce	彈跳變化
Circ	圓形變化
Cubic	立方體變化
Elastic	橡皮圈變化
Expo	爆炸變化
Quad	變化
Quint	變化
Sine	正弦變化

語法：t.to("元素",動畫時長,{操做動畫},延遲多長時間)
複製代碼

如何應用以下：

t.to("#box",2,{
    x:400
    ease:Linear.easeIn //easeOut,easeInOut
})
複製代碼

5.兩個元素運動

動效演示gif： flash時間軸

t.to("#box1",1,{x:400})
t.to("#box2",1,{x:400})
複製代碼

動態圖：

動效演示gif： flash時間軸

t.to("#box1",1,{x:400})
==================================
下面兩行是等價的
t.to("#box2",1,{x:400},5)加入延遲
t.to("#box2",1,{x:400,delay:5})加入延遲
複製代碼

動效演示gif： flash時間軸

t.to("#box1",1,{x:400})
t.to("#box2",1,{x:400},'-=0.5')在原有的基礎上減去一半
=====================================================
也能夠把最後一個t去掉，變成鏈式操做
t.to("#box1",1,{x:400})
 .to("#box2",1,{x:400},'-=0.5')
複製代碼

6.多個元素運動，同時運動

動效演示gif： flash時間軸

t.staggerTo("div",1,{x:400}) // 這句話同理 t.staggerFrom("div",1,{x:400})
複製代碼

動態圖展現：

t.staggerTo("div",1,{
    cycle:{
      x:[100,200,300] //按照100,200,300，100,200,300的順序運動
    }
 },1)
複製代碼

動效演示gif：

t.staggerTo("div",1,{
    cycle:{
        x:function(i){
            //i爲每一個元素的索引
            return i*30
        }
    }
},1)
複製代碼

動效演示gif：

t.staggerTo("div",1,{
    cycle:{
        x:function(i){
            if(i<5){
                return 100 
            }else{
                return 300 
            }        
        }
    }
},1)
複製代碼

7.曲線運動bezier

動效演示gif：

t.staggerTo("#box","2",{
           cycle:{
               bezier:function(){
                   return [
                       {x:0,y:0},//起點
                       {x:200,y:200},//途徑點
                       {x:400,y:0},//終點
                       {x:200,y:200},
                       {x:0,y:0}
                   ]
               }
           }
        })
複製代碼

8.回調函數

var t = new TimelineMax();
 t.to("#box","2",{
   x:100,
   onstart:function(){
        console.log('onstart')
   },
   onUpdate:function(){
    console.log('onUpdate')
   },
   onComplete:function(){
       console.log('onComplete')
   }
})
複製代碼

9.當完成時利用onComplete函數，改變當前this.target的背景色

var t = new TimelineMax();
 t.to("#box","2",{
   x:100,
   onstart:function(){
        console.log('onstart')
   },
   onUpdate:function(){
    console.log('onUpdate')
   },
   onComplete:function(){
       console.log('onComplete')
   }
})
複製代碼

10.如何實現3D動畫

t.set('div',{transformPerspective:300})
 t.to("div",1,{
    rotationY:45,
 },1)
複製代碼

11.改變3D動畫原點transformOrigin

t.set('div',{transformPerspective:300,transformOrigin:'left'})
 t.to("div",1,{
    rotationY:45,
 },1)
複製代碼