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)
复制代码