之前在做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. ubuntu mount u盘以及cp拷贝文件夹

    如果是ubuntu桌面环境的话,不用mount,接入的U盘就可以直接被系统识别,访问起来非常方便,但如果没有桌面环境呢,比如在ubuntu server端,如何访问U盘呢? 第一步:查看U盘信息sud ...

  2. OpenCV中的绘图函数-OpenCV步步精深

    OpenCV 中的绘图函数 画线 首先要为画的线创造出环境,就要生成一个空的黑底图像 img=np.zeros((512,512,3), np.uint8) 这是黑色的底,我们的画布,我把窗口名叫做i ...

  3. 阿里巴巴Java规约插件试用

    阿里Java开发规约Eclipse插件介绍 阿里巴巴集团配合<阿里巴巴Java开发手册>PDF终极版开发的IDE插件,目前包括IDEA插件.Eclipse插件. 安装 检查环境 插件要求: ...

  4. SpringBoot01 InteliJ IDEA安装、Maven配置、创建SpringBoot项目、属性配置、多环境配置

    1 InteliJ IDEA 安装 下载地址:点击前往 注意:需要下载专业版本的,注册码在网上随便搜一个就行啦 2 MAVEN工具的安装 2.1 获取安装包 下载地址:点击前往 2.2 安装过程 到官 ...

  5. 最佳时间买入卖出股票 Best Time to Buy and Sell Stock LeetCode

    LeetCode 我们有一个股票的数组,数组是每时间的钱,我们只能买入一次和卖出一次,求我们的最大收益. 我们知道了一个数组,那么我们可以在低价买入,然后高价卖出,但是需要知道我们的低价需要在高价之前 ...

  6. webpack核心概念

    一.webpack四个核心概念 1.入口[Entry] webpack将创建所有应用程序 依赖关系图表.图表的起点被称之为 入口起点.入口起点告诉webpack从哪里开始,并遵循着依赖关系图表知道打包 ...

  7. R学习笔记 第二篇：矩阵、数组和列表

    向量是一维的,只有长度(行),没有其他维度.R中存在更高维度的对象,他们是矩阵,数据框,数组.这些对象的下标都是使用中括号[],第一个维度是row,第二个维度是column,依次类推,[row,col ...

  8. Java基础-运行原理及变量(01)

    java运行原理 手动编写java文件由编译器编译成.class文件,再由解释器翻译class文件成机器语言运行. Java中注释分类 单行注释格式: //注释文字多行注释格式: /* 注释文字 */ ...

  9. JS插入新的节点

    insertBefore() 语法: insertBefore(newchild,refchild) newchild 插入新的节点 refchild 在此节点前插入新节点 <ul id=&qu ...

  10. Java基础笔记6

    OOP(Object Oriented Programmer) 面向对象编程     面向对象编程的语言:JAVA,C#,PHP,ASP 用途:把现实中的任何对象描述成java语言. java面向对象 ...