目录

           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. UML视图（九）部署图

    一.什么是部署图? 部署图对面向对象系统的物理方面建模,描写叙述系统执行时节点.构件实例及其对象的配置.主要用来在部署系统时涉及到的硬件(处理器和设备)进行建模. 二.部署图的组成元素? 部署图主要包 ...

  2. MHA手动切换 原创4 (非交互式切换）

    非交互式切换:不输 YES 或者 NO [root@monitor app1]# masterha_master_switch --conf=/etc/masterha/app1.conf --mas ...

  3. 修改mac os分辨率（VMware）

    转自:http://hi.baidu.com/hehonglei123/item/55591c17e7991d582a3e22a1 1. 在Mac系统中安装VMsvga2:VMsvga2_v1.2.3 ...

  4. BI之ETL学习（一）kettle

    最近开始折腾数据,起源是多业务数据源需要转换到数据分析平台.这个过程需要跨机器,跨库.同时还需要将业务数据表的内容进行转换,合并,清洗等等操作. 经过多方选型,最终决定使用kettle来作为数据抽取处 ...

  5. SparkStreamingTest.scala

    /** * Created by root on 9/8/15. */ import org.apache.spark._ import org.apache.spark.rdd.RDD import ...

  6. ASCII与UNICODE的区别

    1.ASCII的特点 ASCII 是用来表示英文字符的一种编码规范.每个ASCII字符占用1 个字节,因此,ASCII 编码可以表示的最大字符数是255(00H—FFH).这对于英文而言,是没有问题的 ...

  7. C# 之 静态字段初始化

          当一个字段声明中含有 static 修饰符时,由该声明引入的字段为静态字段(静态变量).当不存在 static 修饰符时,由该声明引入的字段为实例字段(实例变量).       静态字段不 ...

  8. 最小K个数之和

    描述 输入n个整数,输出其中最小的K个数之和.例如输入4,5,1,1,6,2,7,3,3这9个数字,当k=4,则输出最小的4个数之和为7(1,1,2,3). 输入 测试样例组数不超过10 每个测试案例 ...

  9. 如何使用数据卷在宿主机和docker容器之间共享文件

    共享宿主机的目录给容器 docker run -i -t -v ~/download:/home/hello python3-env /bin/bash -v  表示创建一个数据卷并挂载到容器里 ~/ ...

  10. [改善Java代码]动态加载不适合数组

    上一个建议解释了为什么要使用forName,本建议就说说哪些地方不适合使用动态加载. 如果forName要加载一个类,那它必须是一个类------8中基本类型就排除在外.它们不是一个具体的类. 其次它 ...