目录

           TweenMax动画库学习(一)

           TweenMax动画库学习(二)

           TweenMax动画库学习(三)

           TweenMax动画库学习(四)

           TweenMax动画库学习(五)  

           TweenMax动画库学习(六) 

       

上一节我们主要聊了TweenMax动画库中的seek()完成指定的动画（无过渡）、time() 动画已执行的时间、clear()：清除所有动画等方法的使用，接下来我们继续学习TweenMax动画库中的其它方法的使用。

TweenMax动画库的官方网址: http://greensock.com/timelinemax

      下面我们直奔主题，开始介绍TweenMax动画库中的其它方法的使用：

1、staggerTo()：添加动画

           参数说明：

1. 元素选择器或对象

2. 持续时间

3. 对象

    变化的属性->值

4. 【可选】动画延迟发生时间

    可写数字，“-=0.5”，“+=0.5“

      页面布局

<script src="./../js/jquery-2.1.4.min.js"></script>

<script src="./../js/TweenMax.js"></script>

<style>

        html,body{

            margin: 0;

            padding: 0;

        }

        .box{

            width:100px;

            height:100px;

            background: #8D121A;

            margin:1px 0;

        }

</style>
 <body>

 <div class="box"></div>

 <div class="box"></div>

 <div class="box"></div>

 <div class="box"></div>

 <div class="box"></div>

 <div class="box"></div>

 <div class="box"></div>

 <div class="box"></div>

 <div class="box"></div>

 <div class="box"></div>

 <div class="box"></div>

 </body>

staggerTo("元素选择器或对象",持续时间,对象,动画延迟发生时间);

 <script>

         $(function(){

               var t =new TimelineMax();

             //t.to(".box",1,{width:300},1);

               t.staggerTo(".box",2,{width:300},1);

             //staggerTo()与to()的区别在于在设置相同的延迟时间的情况下，

             //to()下的所有动画会同时进行，而staggerTo()下的动画会一个接着一个依次执行

         });

  </script>

2、 totalDuration()：获取动画的总时长

     页面布局

 <style>

         html,body{

             margin: 0;

             padding: 0;

         }

         .div1{

             width:100px;

             height:100px;

             background: #8D121A;

             position: absolute;

             top:0;

             left:0;

         }

 </style>
 <body>

 <div class="div1"></div>

 </body>

 totalDuration()

 <script>

         $(function(){

             var t =new TimelineMax();

             t.to(".div1",1,{left:300},1);

             t.to(".div1",1,{width:300},"+=1");

             t.to(".div1",1,{height:300});

             console.log(t.totalDuration());//5   //获取动画的总时长

         });

 </script>

3、getLabelTime()：返回从开始到当前状态的时间

         参数说明：

1. 状态的字符串

     返回值是一个数字

        getLabelTime(字符串)

 <script>

         $(function(){

             var t =new TimelineMax();

             t.add("state1");

             t.to(".div1",1,{left:300},1);

             t.add("state2");

             t.to(".div1",1,{width:300},"+=1");

             t.add("state3");

             t.to(".div1",1,{height:300});

             console.log(t.getLabelTime("state2"));  //2   //返回从开始到当前状态的时间

         });

 </script>

部分动画演示：

代码打包下载：

链接: http://pan.baidu.com/s/1slrGZvR 密码: kg99    

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动画库学习(三)           ...

  6. TweenMax动画库学习

    之前在做HTML5移动端开发的时候,用的都是Animate.css,这个插件封装的的确很好,但是在做一些缓动方面的动画,它也有一定的不足之处,比如手要写一个连续的动画,需要不停的去重复写函数,使得代码 ...

  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. 0003.5-20180422-自动化第四章-python基础学习笔记--脚本

    0003.5-20180422-自动化第四章-python基础学习笔记--脚本 1-shopping """ v = [ {"name": " ...

随机推荐

  1. iOS开发——语法篇OC篇&高级语法精讲二

    Objective高级语法精讲二 Objective-C是基于C语言加入了面向对象特性和消息转发机制的动态语言,这意味着它不仅需要一个编译器,还需要Runtime系统来动态创建类和对象,进行消息发送和 ...

  2. c语言下的通用数据库接口(之sqlite消化，模拟c#,java的反射)

    在java/C#中都有类的反射,而C下是不存在的. java/C#中能够把表设计成类.而C下仅仅能设计成结构体形式. 在java中有hibernate来操作数据库,可是在C以下怎么设计好呢? 如今,我 ...

  3. [原创，分享]DbHelper 续

    一直在想怎么样才能让dbHelper更简单,更灵活,更僵化.终于我发布了第一个开源版本的dbhelper.此helper将使用System.Data.DbHelper作为命名空间.采用内部驱动与内容S ...

  4. VMware 9 安装 OS X 10.8.4 并安装 Xcode 4.6

    转自:http://blog.csdn.net/weizi4332/article/details/9264799 学习Objective-C必须要有运行环境,Xcode是最好的选择.不过Window ...

  5. 已知json类型根据类型封装集合

    1编写帮助类根绝url得到json public static string Post(string url) { string strURL = url; //创建一个HTTP请求 HttpWebR ...

  6. uboot_starts_analysis.pdf

    Uboot中start.S源码的指令级的详尽解析 HTML版本的在线地址为:http://www.crifan.com/files/doc/docbook/uboot_starts_analysis/ ...

  7. ASP.NET 之 检测到在集成的托管管道模式下不适用的ASP.NET设置

    将ASP.NET程序从IIS6移植到IIS7后,调试运行可能提示以下错误: HTTP 错误 500.23 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP. ...

  8. 几个常用myeclipse快捷键

    Ctrl + D:直接删除光标所在行 Alt + ↑:向上移动光标所在行 Alt + ↓:向下移动光标所在行 Ctrl + Alt + ↑:直接向上复制光标所在行内容 Ctrl + Alt + ↓:直 ...

  9. Linq 用法笔记

    Linq中怎么用 between…and? var query = from p in context.Parent from c in context.Child.Where(x => p.c ...

  10. CSS 创建方式与优先级

    最近想学习自动化测试--web元素的匹配查找,一直搞不懂CSS的相关标签与对元素的渲染方式. 本文转自W3School: http://www.w3school.com.cn/css/css_howt ...