偶然发现一个很强大打的动画库，果断了解一下。
<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开发的动画。