之前在做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. python之testcenter操作

    一.设置python环境 1. 从以下路径中将StcPython.py文件拷贝出来 Linux: /Installdir/Spirent_TestCenter_4.xx/Spirent_TestCen ...

  2. Jquery字符串，数组（拷贝、删选、合并等），each循环，阻止冒泡，ajax出错，$.grep筛选，$.param序列化，$.when

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. asp.net数据四舍五入

    #region 数据四舍五入 /// <summary> /// 四舍五入 /// </summary> /// <param name="dblnum&quo ...

  4. Unity编辑器下重启

    我们项目AssetBundle打包走的是全自动化流程,打包之前要进行各种资源检测,如果检测顺利通过,则进入打包,否则提示错误资源名称及路径,打包中断!有时候即使资源检测通过也会打包崩溃,初步断定是Un ...

  5. 组件 layui 表单抓取数据四步走

    注意事项: layui 中提交按钮是基于"监听"机制实现的. form.on() 的调用需置于 layui.use 的回调函数中. 末尾的 'return false' 不可或缺, ...

  6. 使用OLAMISDK实现一个语音输入数字进行24点计算的iOS程序

    前言 在目前的软件应用中,输入方式还是以文字输入方式为主,但是语音输入的方式目前应用的越来越广泛.这是一个利用 Olami SDK 编写的一个24点iOS程序,是通过语音进行输入. Olami SDK ...

  7. 【计算机网络基础】数据交换技术和多路复用技术的正（nao）确(can)打开方式

    交换的作用   数据交换是计算机网络中两个终端进行数据传输的方式,它又可以分成两种类型:电路交换和分组交换.很显然,问题的核心在于“交换”,那么我们首先要思考的是:交换的作用是什么?   “交换”的作 ...

  8. android Intent机制详解

    http://www.oschina.net/question/565065_67909 http://www.cnblogs.com/hummersofdie/archive/2011/02/12/ ...

  9. vs2012中使用localdb实例还原一个sql server 2008r2版本的数据库

    use localdb sometime is easy than sql server ,and always use visual studio make you stupid. vs2012中还 ...

  10. A low-cost wear-leveling algorithm for block-mappingsolid-state disks

    [] Li-Pin Chang,Li-Chun Huang.A low-cost wear-leveling algorithm for block-mapping solid-state disks ...