目录

           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. JavaScript提高：003：easy UI实现tab页面自适应问题

    前面说到使用easyUI在asp.net中实现了tab控件效果.http://blog.csdn.net/yysyangyangyangshan/article/details/38307477只是有 ...

  2. PHP做好防盗链的基本思想 防盗链的设置方法

    盗链是指服务提供商自己不提供服务的内容,通过技术手段绕过其它有利益的最终用户界面(如广告),直接在自己的网站上向最终用户提供其它服务提供商的服务内容,骗取最终用户的浏览和点击率.受益者不提供资源或提供 ...

  3. 简化LINUX的命令输入 简化linux命令

    在LINUX中,有很多常用的命令,常用的命令我们可以熟练的记忆,但是对于不经常使用的命令恐怕是需要翻阅手册了,但是我们可以简化这些命令的输入来达到简便记忆的效果. 这里以BSH为例: 编辑/etc/b ...

  4. Linux c编程实例_例子

    例一:字符与整型变量的实现 #include <stdio.h> int main() { int c1,c2; char c3; c1='a'-'A'; c2='b'-'B'; c3=; ...

  5. Frame Stacking 框架堆叠

    /* [题目来源]http://poj.org/problem?id=1128 [题目分析] 几张图片叠在一起,给出堆叠后的情况,要求出所有可能的从下到上的堆叠顺序. [思路分析] 1.题目已经很明确 ...

  6. CSS 实现行内和上下自适应的几种方法

    在写一个移动端网页,发现网页的头部搜索框两边各有固定宽度的按钮,搜索框可以根据宽度的变化来改变自己的宽度,达到填充的目的,也就是一种自适应吧,下面写写自己尝试的几种方法 一 利用css3 的width ...

  7. Android防微信首页左右滑动切换

    大家看到微信首页切换效果有没有觉得很炫,滑动切换,点击底部bar瞬间切换,滑动切换渐变效果,线上效果图: 之前也在博客上看到别人的实现,再次基础上,我做了些优化.首先说下实现原理,大神略过,o(╯□╰ ...

  8. [转]每次打开IE9就会跳出管理加载项的窗口

    当您打开IE9就跳出管理加载项的窗口,这一般是由于使用优化软件对系统进行优化清理后导致了注册表的错误.上次我们就为大家介绍了关于IE9启动后自动弹出管理加载项窗口的问题,这两个问题非常类似,引发问题的 ...

  9. [改善Java代码]建议采用的顺序是 List<T>、List<?>、List<Object>

    建议98:建议采用的顺序是 List<T>.List<?>.List<Object> List<T>.List<?>.List<Obj ...

  10. Git工作流

    关于git工作原理请参见:http://blog.csdn.net/zdy0_2004/article/details/46552227