之前在做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. c# Linq操作XML，查找节点数据

    /*查找XML*/ var filePath = Server.MapPath("~/xml/sample.xml"); XDocument doc = XDocument.Loa ...

  2. linux命令和awk

    1.统计一下代码量 find . -name "*.py" | xargs wc -l | awk 'BEGIN {size = 0} { size+=$1} END{print ...

  3. Ubuntu软件中心卡在正在应用更改的解决办法

    http://forum.ubuntu.org.cn/viewtopic.php?t=374037 http://forum.ubuntu.org.cn/viewtopic.php?p=2743994 ...

  4. C# 使用HtmlAgilityPack抓取网页信息

    前几天看到一篇博文:C# 爬虫 抓取小说 博主使用的是正则表达式获取小说的名字.目录以及内容. 下面使用HtmlAgilityPack来改写原博主的代码 在使用HtmlAgilityPack之前,可以 ...

  5. .NET之父 - Anders Hejlsberg

    简介 安德斯·海尔斯伯格(Anders Hejlsberg,1960.12~),丹麦人,Turbo Pascal编译器的主要作者,Delphi和.NET之父! 安德斯·海尔斯伯格曾在丹麦技术大学学习工 ...

  6. LeetCode 598. Range Addition II （范围加法之二）

    Given an m * n matrix M initialized with all 0's and several update operations. Operations are repre ...

  7. awake（）和start（）还有update（），fixedupdate（）的差别

    1.首先看一下untiy官方对awake()和start()的定义 awake()和start()函数会在脚本加载后自动调用,awake()会先被调用,即使脚本未被调用.最好用来设置脚本之间的引用和初 ...

  8. 话说LightningChart是最快最美的图表控件，到底先进在哪里？

    LightningChart Ultimate v.8.2 最新版本新特征告诉你它先进在哪里! 1. Headless 模式 headless模式允许在没有GUI的情况下使用LC.例如,在Window ...

  9. Vue-cli安装教程

    第一步:安装vue-cli npm install vue-cli -g -g :代表全局安装.如果你安装时报错,一般是网络问题,你可以尝试用cnpm来进行安装. 检测是否安装成功:可以用vue -V ...

  10. 学习笔记 intent属性

    Android开发学习笔记:Intent的简介以及属性的详解 2011-08-08 17:20:48 标签:Intent 移动开发 Android 休闲 详解 原创作品,允许转载,转载时请务必以超链接 ...