之前在做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>

TweenMax动画库学习的更多相关文章

  1. TweenMax动画库学习(六)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  2. TweenMax动画库学习(五)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  3. TweenMax动画库学习(四)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  4. TweenMax动画库学习(一)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  5. TweenMax动画库学习(二)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  6. TweenMax动画库学习(三)

    目录               TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)           ...

  7. animate.css –齐全的CSS3动画库--- 学习笔记

    animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...

  8. TweenMax 动画库，知识点

    官方地址:https://greensock.com/tweenmax github 地址:https://github.com/greensock/GreenSock-JS 比较好的介绍文章: ht ...

  9. TweenMax的GSAP（GreenSock动画平台）GSAP，专业的Web动画库

    很好奇红框框里面的内容是什么,于是点了进去,又百度了下这个英文缩写具体指的什么东西. GSAP的全名是GreenSock Animation Platform,是一个从flash时代一直发展到今天的专 ...

随机推荐

  1. cmd获取python返回值

    test.py代码如下: import urllib2 import sys try: f = urllib2.urlopen('http://www.baidu.com/',timeout = 10 ...

  2. Sql Server合并多行询数据到一行：使用自连接、FOR XML PATH('')、STUFF或REPLACE函数

    示例表 tb 数据如下 id value ----- 1 aa 1 bb 2 aaa 2 bbb 2 ccc SELECT id, [val] = ( SELECT [value] + ',' FRO ...

  3. WPF DataGrid自定义样式

    微软的WPF DataGrid中有很多的属性和样式,你可以调整,以寻找合适的(如果你是一名设计师).下面,找到我的小抄造型的网格.它不是100%全面,但它可以让你走得很远,有一些非常有用的技巧和陷阱. ...

  4. mySQL使用实践

    1.虚拟机安装mySQL 服务器, 宿主机分别使用navicat工具和java代码 访问mySQL,组网图如下: 2. 查看mySQL的服务器状态,如下: 3. 服务器上查看数据库和数据表内容如下: ...

  5. ovs2.7 在系统重启后，再次使用时提示数据库无法连接的问题。

    问题现象如下,ovs开始安装后,对ovs的操作是正常的,但是,现在系统重启后,OVS的操作第一条命令就失败,如下: 问题解决方法: 参考  http://blog.csdn.net/xyq54/art ...

  6. DevOps之软件定义网络SDN

    唠叨话 关于德语噢屁事的知识点,仅提供专业性的精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <软件定义网络SDN(Software Defined Network)> 关于软 ...

  7. checkValidity-表达验证方法。

    调用该方法,可以显示对表单元素进行有效验证,返回值是boolean. 代码如下: <!DOCTYPE html> <html> <head> <meta ch ...

  8. win10 UWP Hmac

    HMAC是密钥相关的哈希运算消息认证码,输入密钥和信息. 在uwp,Hmac在很多网络使用,我最近写qiniu SDK,把原来C#改为UWP,需要使用HMAC. 上传文件 <form metho ...

  9. 使用Hexo+Github一步步搭建属于自己的博客（进阶）

    主题的配置:这里以NexT主题作为题材 1.安装NexT,在其文件夹中鼠标右键,点击Git Base Here.输入命令:git clone https://github.com/iissnan/he ...

  10. [CF] Final Exam Arrangement

    问题链接:http://www.bnuoj.com/v3/contest_show.php?cid=4329#problem/F   问题大意:         就是有1--N们课程,每一个课程都有一 ...