目录

           TweenMax动画库学习(一)

           TweenMax动画库学习(二)

           TweenMax动画库学习(三)

           TweenMax动画库学习(四)

           TweenMax动画库学习(五)  

           TweenMax动画库学习(六) 

       

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

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

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

1、staggerTo()：添加动画

           参数说明：

  1. 1. 元素选择器或对象
  2. 2. 持续时间
  3. 3. 对象
  4.     变化的属性->值
  5. 4. 【可选】动画延迟发生时间
  6.     可写数字，“-=0.5”，“+=0.5“

      页面布局

  1. <script src="./../js/jquery-2.1.4.min.js"></script>
  2. <script src="./../js/TweenMax.js"></script>
  3. <style>
  4.         html,body{
  5.             margin: 0;
  6.             padding: 0;
  7.         }
  8.         .box{
  9.             width:100px;
  10.             height:100px;
  11.             background: #8D121A;
  12.             margin:1px 0;
  13.         }
  14. </style>
  1.  <body>
  2.  <div class="box"></div>
  3.  <div class="box"></div>
  4.  <div class="box"></div>
  5.  <div class="box"></div>
  6.  <div class="box"></div>
  7.  <div class="box"></div>
  8.  <div class="box"></div>
  9.  <div class="box"></div>
  10.  <div class="box"></div>
  11.  <div class="box"></div>
  12.  <div class="box"></div>
  13.  </body>

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

  1.  <script>
  2.          $(function(){
  3.                var t =new TimelineMax();
  4.              //t.to(".box",1,{width:300},1);
  5.                t.staggerTo(".box",2,{width:300},1);
  6.              //staggerTo()与to()的区别在于在设置相同的延迟时间的情况下，
  7.              //to()下的所有动画会同时进行，而staggerTo()下的动画会一个接着一个依次执行
  8.          });
  9.   </script>

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

     页面布局

  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.              top:0;
  12.              left:0;
  13.          }
  14.  </style>
  1.  <body>
  2.  <div class="div1"></div>
  3.  </body>

 totalDuration()

  1.  <script>
  2.          $(function(){
  3.              var t =new TimelineMax();
  4.              t.to(".div1",1,{left:300},1);
  5.              t.to(".div1",1,{width:300},"+=1");
  6.              t.to(".div1",1,{height:300});
  7.              console.log(t.totalDuration());//5   //获取动画的总时长
  8.          });
  9.  </script>

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

         参数说明：

  1. 1. 状态的字符串
  2.      返回值是一个数字

        getLabelTime(字符串)

  1.  <script>
  2.          $(function(){
  3.              var t =new TimelineMax();
  4.              t.add("state1");
  5.              t.to(".div1",1,{left:300},1);
  6.              t.add("state2");
  7.              t.to(".div1",1,{width:300},"+=1");
  8.              t.add("state3");
  9.              t.to(".div1",1,{height:300});
  10.              console.log(t.getLabelTime("state2"));  //2   //返回从开始到当前状态的时间
  11.          });
  12.  </script>

部分动画演示：

代码打包下载：

  1. 链接: 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语音合成

    苹果公司在iOS7中推出了语音合成的技术,无需网络环境也可以实现语音合成. iOS7语音合成的主要的API如下: 1.AVSpeechUtterance,是语音合成的基本单位,它封装影响语音合成的需要 ...

  2. Android（java）学习笔记106-2：反射机制

    1.反射机制: JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为 ...

  3. Debian apt-get 无法补全

    今天发现在终端里输入apt-get inst后按Tab键无法自动补全成 install,纳闷之余google了一下(我承认开始是baidu...),原来是没有安装 bash-completion. s ...

  4. App Thinning

    App Thinning 由于项目中需要开启Bitcode编译,之前对Bitcode也有些误区,故整理了下相关知识,仅供参考,如有不对,还请指出. 当前 iOS App 的编译打包方式是把适配兼容多个 ...

  5. uva 699 The Falling Leaves dfs实现

    额,刘汝佳小白里面的配套题目. 题目求二叉树同垂直线上结点值的和. 可以用二叉树做,挺水的其实. 尝试使用dfs实现了:开一个大点的数组,根节点为最中间那点,然后读取时就可以进行和的计算了. 代码: ...

  6. jquery ajax 后台和前台数据交互 C#

    <input type="button" id="updateInfo" value="更改货载重量" /> <div i ...

  7. VC操作Excel之基本操作

    // 变量的定义 _Application app; Workbooks books; _Workbook book; Worksheets sheets; _Worksheet sheet; Ran ...

  8. Windows中使用cmd实现自定义Service的安装与卸载

    在项目中,有些时候我们需要自定义一些Service来定时处理一些业务逻辑,这时候就涉及到如何安装与卸载service的问题了,具体如何安装呢?在此整理一些解决方案供大家参考: 方案一: 1.运行--〉 ...

  9. Commons JXPath - Object Graph Traversal

    JXPath 提供了使用 Xpath 语法操纵符合 Java 类命名规范的 JavaBeans 的工具.也支持 maps.DOM 和其他对象模型.对于深层次结构的 JavaBean,使用 JXPath ...

  10. kettle

    Kettle(中文名称叫水壶)是一款ETL工具,纯java编写,可以在Window.Linux.Unix上运行,绿色无需安装,数据抽取高效稳定.Kettle家族包括4个产品:Spoon.Pan.CHE ...