TweenMax动画库学习

时间 2019-11-19

标签 tweenmax 动画学习繁體版

原文原文链接

以前在作HTML5移动端开发的时候，用的都是Animate.css,这个插件封装的的确很好，可是在作一些缓动方面的动画，它也有必定的不足之处，好比手要写一个连续的动画，须要不停的去重复写函数，使得代码严重的冗余，再好比要获取动画执行的时间，就比较的麻烦等等。而TweenMax偏偏能够解决这方面的不足。因而我认真的学习了TweenMax动画库的用法，如今将我的的学习总结以下，如有不正确的地方，欢迎读者给与批评指正！ css

TweenMax动画库的官方网址: http://greensock.com/timelinemaxhtml

下面咱们直奔主题，开始介绍TweenMax动画库：jquery

一、如何引用TweenMax动画库web

TweenMax动画库依赖jQuery 函数

1  <script src="./../js/jquery-2.1.4.min.js"></script>
2  <script src="./../js/TweenMax.js"></script>

二、获得动画的示例 布局

1 <script>
2         $(function () {
3             var t = new TimelineMax();
4         });
5 </script>

三、to()：添加动画学习

参数说明： 动画

t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5")

1. 元素选择器或对象spa

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>

延迟执行第二条动画(便捷写法)

 
<script>
   //动画延迟一秒执行
   t.to("#div1", 1, { left: 300, width: 300 }, 1);
   t.to("#div1", 1, { width: 300 }, "+=1");
</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>