TweenMax学习小计

TweenMax是一款前端动画插件，可以做出很多效果，灵活性很高，最近闲暇之余学了一下，顺便做点记录。

插件的安装很简单，直接用script引入即可使用：

<script src="./js/TweenMax.min.js"></script>

开始的时候需要初始化一个对象：

var t = new TimelineMax();

to：单个元素，运动到某一点

t.to('.box', 3, { // 3秒时间内移动到绝对位置x=400的地方
		left: 400 // 绝对位移
	});

还有很多效果可以添加，比如Linear,Back,Bounce,Cire,Cubic,Elastic,Quad,Sine,Quint等，每个效果都有三种进出方式：easeIn、easeOut、easeInOut。

t.to('.box', 3, {
	  left: 400, // 绝对位移
//        ease: Linear.easeIn
//        ease: Linear.easeOut
//        ease: Linear.easeInOut

//        ease: Back.easeIn
//        ease: Back.easeOut
//        ease: Back.easeInOut

//        ease: Bounce.easeIn
//        ease: Bounce.easeOut
//        ease: Bounce.easeInOut

//        ease: Circ.easeIn
//        ease: Circ.easeOut
//        ease: Circ.easeInOut

//        ease: Cubic.easeIn
//        ease: Cubic.easeOut
//        ease: Cubic.easeInOut

//        ease: Elastic.easeIn
//        ease: Elastic.easeOut
//        ease: Elastic.easeInOut

//        ease: Expo.easeIn
//        ease: Expo.easeOut
//        ease: Expo.easeInOut

//        ease: Quad.easeIn
//        ease: Quad.easeOut
//        ease: Quad.easeInOut

//        ease: Sine.easeIn
//        ease: Sine.easeOut
//        ease: Sine.easeInOut

//        ease: Quint.easeIn
//        ease: Quint.easeOut
//        ease: Quint.easeInOut
	});

具体需要什么效果就看个人需求了。

from：单个元素，从哪一点开始

t.from('.box', 3, { // 从400的位置运动到0
		left: 400 // 绝对位移
	});

fromTo：从xx到xx位置

t.fromTo('.box', 3, { // 从400的位置运动到0
		left: 400 // 绝对位移
	},{
		left: 800
    });

以上都是绝对位移，实际我们使用相对位移的时候更多一些：

t.to('.box', 3, {
        x: 400 // 相对位移   
	})

当然，可以变化的不止x轴的距离，还有其它属性：autoAlpha(透明度)、scale（放大倍数）、scaleX（x轴的放大）、rotation（旋转角度）、rotationX、rotationY、rotationZ、skewX（x轴的斜切）、、、

t.to('.box', 3, {
            x: 400 
           width: 300
//        autoAlpha: 0
//        scale: .5
//        scaleX: .5
//        rotation: 50
//        rotationX: 50
//        rotationY: 50
//        rotationZ: 50
//        kewX: 60
	});

set:直接设置状态，无运动效果

t.set('.box', {
        x: 400
	});

链式运动

<div class="box box1"></div>
<div class="box box2"></div>

t.to('.box1',2, { // 从上到下执行，会有延迟，可以在第二个上面加负的延迟时间来提前
		x: 400
	}).to('.box2',2, {
		x: 400
	},'-=1');

如果不加-=1的延迟时间，则要等到box1运动结束后box2才开始运动，-=1表示将后面一个元素的运动时间提前1秒，-=2则提前2秒，和运动时间一致，就一起运动。

多个元素的运动

当页面有多个元素的时候使用staggerTo方法

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

t.staggerTo('.box',1,{
//		x: 400
    },1);

t.staggerFrom('.box',2,{
		x: 400
	});

参数代表的意思和to一样的，多个元素同样也有staggerFrom、staggerFromTo

t.staggerFrom('.box',2,{
		x: 400
	})

t.staggerFromTo('.box',2,{
		x: 400
	}）

通过配置cycle参数来循环元素的位置：

t.staggerTo('.box',1,{
		x: 400,
        cycle: {
		x: [100,200,300]
        }
    },1);

第0、1、2个依次到x=100、200、300的位置，第3、4、5个元素同样依次到学00、200、300的位置，如此循环，知道最后一个元素

我们还可以返回一个函数：

t.staggerFromTo('.box',2,{
		x: 400
	},{
	cycle: {
            x: function (index) { // 元素的索引
                return 400 + index * 30
            }
		}
    },1)

贝塞尔曲线

<div class="box1"></div>
<div class="box2"></div>

t.staggerTo('.box2',16,{
		cycle: {
			bezier: function () {
                return [ // 途径点坐标
                    {x: 0,y: 0},
                    {x: 175,y: 175},
                    {x: 400,y: 0},
                    {x: 800,y: 150}
                ]
			}
        }
    });

回调函数

t.staggerTo('.box1',3,{
		x: 400,
        onStart: function () { // 开始运动时触发
            console.log('start');
        },
	onUpdate: function () { //位置更新的时候触发
	    console.log('onUpdate');
	},
	onComplete: function () { // 运动结束的时候触发
	    console.log('onComplete');
	    this.target.style.background = 'green';
	}
	},.5);