目录

           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. centosx64位寄存器

    [root@monitor ~]# uname -aLinux monitor 2.6.32-431.23.3.el6.x86_64 #1 SMP Thu Jul 31 17:20:51 UTC 20 ...

  2. MySQL Router 测试使用 转

    MySQL Router 测试使用 . 特性 MySQL Router 并没有包括一些特别新的特性, 总体上看中规中矩, 不过 first-available 和插件两个特性挺有意思, 后续会进行讲解 ...

  3. Ruby on Rails Tutorial 第一章 之 Git项目管理

    1.安装和设置 (1)git的安装(略) (2)初始化设置 $ git config --global user.name "LihuaSun" $ git config --gl ...

  4. 使用phpExcel向mysql数据库导入excel

    使用phpExcel向mysql数据库导入excel from:http://blog.163.com/dustye_l/blog/static/172439513201242491016834/ 使 ...

  5. 在 CentOS 中编译安装 VIM 7.3

    转载:http://blog.csdn.net/zhanglyung/article/details/6204574 默认安装的 Vim 不带有多字符支持,所以不支持中文.无论是将 CentOS 本来 ...

  6. PHP.9-HTML+CSS（三）-CSS样式

    CSS样式 CSS是Cascading Style Sheets的简写,它除了可以轻松设置网页元素的显示位置和格式处,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.CSS就是要对网页的显示效果实 ...

  7. 小白日记7：kali渗透测试之主动信息收集-发现（一）--二层发现：arping/shell脚本，Netdiscover，scapy

    主动信息收集 被动信息收集可能不准确,可以用主动信息收集验证   特点:直接与目标系统交互通信,无法避免留下访问痕迹 解决方法:1.使用受控的第三方电脑进行探测,使用代理 (做好被封杀的准备)   2 ...

  8. IIS 发布 之 Word导出本地测试正常，发布报错

    用C#动态生成Word文档功能实现了,在本地的机器运行时是好的,但程序发布 IIS 或 远程服务器 上就报错, 报错信息为:检索 COM 类工厂中 CLSID 为 {000209FF-0000-000 ...

  9. 获取地理位置的html5代码

    /** * 以下为html5代码,获取地理位置 */ function getLocation() { //检查浏览器是否支持地理位置获取 if (navigator.geolocation) { / ...

  10. PHP+ MongoDB

    环境: uname -v # SMP Debian -+deb7u2 php -v PHP -~dotdeb. (cli) (built: Jun ::) Copyright (c) - The PH ...