偶然发现一个很强大打的动画库，果断了解一下。

<script src = ‘https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js’></script>

先给文件链接。

1.简单示例

<!DOCTYPE html><html><head><meta charset=”UTF-8″><title></title><style>#box{width: 100px;height: 100px; background: red;}</style><script src = ‘https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js’></script></head><body><div id=”box”><div></body><script>var t =new TimelineMax();t.to(‘#box’,2,{width:200});</script></html>

执行代码会发现元素的宽度从100到200,动画时间是2秒；

2.再来个多属性运动

<!DOCTYPE html><html><head><meta charset=”UTF-8″><title></title><style>#box{width: 100px;height: 100px; background: red;position: absolute;top: 0;left: 0;}</style><script src = ‘https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js’></script></head><body><div id=”box”><div></body><script>var t =new TimelineMax();t.to(‘#box’,2,{width:200,x:100,y:200});</script></html>

上面代码中的参数XY指的是元素的偏移量相当于定位中的left和top。但是xy最后渲染出来是用translate偏移来完成的。这样写的好处是，用translate渲染的元素不会刷新DOM而用left和top定位的元素会更新DOM。所以如果有偏移量动画的需求尽量用X,Y代替。

3.动画的执行方式

<!DOCTYPE html><html><head><meta charset=”UTF-8″><title></title><style>#box{width: 100px;height: 100px; background: red;position: absolute;top: 0;left: 0;}</style><script src = ‘https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js’></script></head><body><div id=”box”><div></body><script>var t =new TimelineMax();t.to(‘#box’,2,{width:200,x:100,y:200,ease:Bounce.easeInOut});</script></html>

ease参数 有以下可选属性

/*
         *动画种类
         * Linear  线性变化(匀速运动)
         * Back    返回变化
         * Bounce  弹跳动画
         * Circ    圆形变化
         * Cubic   立方体变化
         * Elastic 橡皮圈变化
         * Expo    爆炸变化
         * Quad
         * Quint 
         * Sine
         * 
         * */

4.多个元素同时运动

<!DOCTYPE html><html><head><meta charset=”UTF-8″><title></title><style>#box,#box2{width: 100px;height: 100px; background: red;margin-bottom: 10px;}</style><script src = ‘https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js’></script></head><body><div id=”box”><div><div id=”box2″><div></body><script>var t =new TimelineMax();t.staggerTo(‘div’,2,{y:200});</script></html>

5.动画中的战斗机贝塞尔曲线 先看一张图（有点糙不过这个不是重点）

 

 

 

  

 

 

 

 

下面上代码

<!DOCTYPE html><html><head><meta charset=”UTF-8″><title></title><style>#box{width: 100px;height: 100px; background: red;margin-bottom: 10px;}</style><script src = ‘https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js’></script></head><body><div id=”box”><div></body><script>var t =new TimelineMax();t.staggerTo(‘#box’,1,{cycle:{bezier:function(){ return [{x:0,y:0},{x:200,y:200},{x:400,y:0}]}}},0.2);</script></html>

6.事件

<!DOCTYPE html><html><head><meta charset=”UTF-8″><title></title><style>#box{width: 100px;height: 100px; background: red;margin-bottom: 10px;}</style><script src = ‘https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js’></script></head><body><div id=”box”><div></body><script>//onStart 动画开始//onUpdate 动画运行//onComplete 动画结束var t =new TimelineMax();t.staggerTo(‘#box’,1,{x:100,onComplete :function(){//如果多个元素同时运动 this.target获取的是当前执行动画的DOM节点console.log(this.target)}},0.2);</script></html>

7.3D动画

其实这个很简单加一个属性就OK

<!DOCTYPE html><html><head><meta charset=”UTF-8″><title></title><script type=”text/javascript” src=”js/TweenMax.js” ></script><style>#box{width: 200px;height: 200px;}#box div{display:inline-block;width:20px;height: 20px; background: red;vertical-align: middle;}</style></head><body><div id=”box”></div></body><script>var box = document.getElementById(“box”);for(var i=0;i<100;i++){var div = document.createElement(“div”);box.appendChild(div);}var t =new TimelineMax();t.set(‘#box div’,{transformPerspective:600,transformOrigin:’left’,transformStyle:”preserve-3d”})t.staggerTo(‘#box div’,1,{rotationY:20,onComplate:function(){t.set(‘#box div’,{transformPerspective:600,transformOrigin:’center’})t.staggerTo(‘#box div’,2,{rotationX:180,scale:0.2,alpha:0})}})</script></html>

暂时更这么多。后续会更新一些TweenMax开发的动画。