之前在做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. zoj3321 circle floyd 最小生成树

    Circle 断一个图是否是一个环. 思路:必有m==n,那么我们用n-1条边能够生成一棵树(即是所有点联通,则用floyd即可),然后看最后一条边的两个点是否是单边(度为一)即可 . #includ ...

  2. epoll模型的使用

    1. 创建epoll句柄 int epfd = epoll_create(int size); 该函数生成一个epoll专用的文件描述符.它其实是在内核申请一空间,用来存放你想关注的socket fd ...

  3. 【特效】hover图片立体翻转

    hover图片翻转效果二::绕Y轴旋转90度,注意父层要加透视属性perspective,这样才能看出立体效果 html: <ul class="list-img"> ...

  4. 极化码之tal-vardy算法（3）

    考完驾照,回来填坑 /doge/doge 前两节分别介绍了tal算法中的合并函数和信道操作两个部分,我们将高斯信道的应用放在最后一节来介绍. 在之前的介绍中,我们一直在一个前提下进行讨论--即输入字符 ...

  5. linux下如何安装破解IntelliJ IDEA，及其基本使用教程;

    今天在linux下安装了IntelliJ idea,由于现在很多企业在linux平台下使用IntelliJ idea做java web的开发,所以对于IntelliJ idea的安装和学习是一件基本的 ...

  6. WebService的简单运用添加删除

    WebService是一种跨编程语言和跨操作系统平台的远程调用技术,简单来说就是将数据存储到项目的文件夹下 .NET中基于DOM核心类 XmlDocument 表示一个XML文档 XmlNode表示X ...

  7. SpringMVC 配置

    1.在WEB-INF\web.xml中定义前端控制器 <servlet> <servlet-name>springmvc</servlet-name> <se ...

  8. IP核之初——FIFO添加以太网MAC头部

    本文设计思路源自明德扬至简设计法.在之前的几篇博文中,由于设计比较简单,所有的功能都是用verilogHDL代码编写实现的.我们要学会站在巨人的肩膀上,这时候就该IP核登场了! 说白了,IP核就是别人 ...

  9. CentOS6编译LAMP基于FPM模式的应用wordpress

    CentOS6编译LAMP基于FPM模式的应用wordpress 引言:其实我们可以直接使用yum安装LAMP(Linux+Apache[httpd]+Mysql+PHP),比手动编译安装LAMP要简 ...

  10. angularJs 个人初探笔记

    1.环境搭建与angular - phoneCat 安装可以通过git clone来下载源代码: git clone --depth=14 https://github.com/angular/ang ...