TweenMax动画库学习
之前在做HTML5移动端开发的时候，用的都是Animate.css,这个插件封装的的确很好，但是在做一些缓动方面的动画，它也有一定的不足之处，比如手要写一个连续的动画，需要不停的去重复写函数，使得代码严重的冗余，再比如要获取动画执行的时间，就比较的麻烦等等。而TweenMax恰恰可以解决这方面的不足。于是我认真的学习了TweenMax动画库的用法，现在将个人的学习总结如下，若有不正确的地方，欢迎读者给与批评指正！
TweenMax动画库的官方网址: http://greensock.com/timelinemax
下面我们直奔主题，开始介绍TweenMax动画库：
1、如何引用TweenMax动画库
TweenMax动画库依赖jQuery
1 <script src="./../js/jquery-2.1.4.min.js"></script> 2 <script src="./../js/TweenMax.js"></script>
2、得到动画的示例
1 <script>
2 $(function () {
3 var t = new TimelineMax();
4 });
5 </script>
3、to()：添加动画
参数说明：
t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5")
1. 元素选择器或对象
2. 持续时间
3. 对象
变化的属性->值
4. 【可选】动画延迟发生时间
可写数字，“-=0.5”，“+=0.5“
页面简单布局
1 <style>
2 html,body{
3 margin: 0;
4 padding: 0;
5 }
6 #div1{
7 width:100px;
8 height:100px;
9 background: #8D121A;
10 position: absolute;
11 left:0;
12 top:100px;
13 }
14 </style>
1 <body> 2 <div id="div1"></div> 3 </body>
执行单个动画
1 <script>
2 $(function(){
3 var t =new TimelineMax();
4 t.to("#div1",1,{left:300},1);
5 });
6 </script>
执行组合动画
1 <script>
2 $(function(){
3 var t =new TimelineMax();
4 t.to("#div1",1,{left:300,width:300},1);
5 });
6 </script>
执行队列动画,列表中的动画会依次执行
1 <script>
2 t.to("#div1", 1, { left: 300 });
3 t.to("#div1", 1, { width: 300 });
4 t.to("#div1", 1, { height: 300 });
5 t.to("#div1", 1, { top: 300 });
6 t.to("#div1", 1, { rotationZ: 180 });
7 t.to("#div1", 1, { opacity: 0 });
8 </script>
添加第四个参数 设置动画的延迟时间
1 <script>
2 //动画延迟一秒执行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 //第二条动画没有延迟时间,所以等第一条动画执行完成后立刻执行第二条动画
5 t.to("#div1", 1, { width: 300 });
6 </script>
1 <script>
2 //动画延迟一秒执行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 //第二条动画也是延迟一秒执行,会和第一条动画同时延迟一秒执行
5 t.to("#div1", 1, { width: 300 }, 1);
6 </script>
延迟执行第二条动画
1 <script>
2 //动画延迟一秒执行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 //实现第一条动画完成后,延迟一秒,执行第二条动画
5 t.to("#div1", 1, { width: 300 }, 3);
6 </script>
延迟执行第二条动画(便捷写法)
1 <script>
2 //动画延迟一秒执行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 t.to("#div1", 1, { width: 300 }, "+=1");
5 </script>
让第二条动画指令立刻执行
1 <script>
2 //动画延迟一秒执行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 //第四个参数设0后,动画会立刻执行
5 t.to("#div1", 1, { width: 300 }, 0);
6 </script>
