目录

           TweenMax动画库学习(一)

           TweenMax动画库学习(二)

           TweenMax动画库学习(三)

           TweenMax动画库学习(四)

           TweenMax动画库学习(五)  

           TweenMax动画库学习(六) 

上一节我们主要聊了TweenMax动画库中的add()添加状态、tweenTo()完成指定的动画（过渡）等方法的使用，接下来我们继续学习TweenMax动画库中的其它方法的使用。

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

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

1、页面布局

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

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

 <style>

         html,body{

             margin: 0;

             padding: 0;

         }

         .div1{

             width:100px;

             height:100px;

             background: #8D121A;

             position: absolute;

             top:150px;

             left:0;

         }

 </style>
 <body>

 <div id="label"></div>

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

 </body>
    2、currentLabel()：获取当前状态

     参数说明：

 返回值是状态的字符串

currentLabel()

 <script>

         $(function(){

             var t =new TimelineMax();

             t.add("state1");

             t.to(".div1",1,{left:300,onComplete:function(){

                 getCurrentLabel();

             }},1);

             t.add("state2");

             t.to(".div1",1,{width:300,onComplete:function(){

                 getCurrentLabel();

             }},"+=1");

             t.add("state3");

             t.to(".div1",1,{height:300,onComplete:function(){

                 getCurrentLabel();

             }});

             getCurrentLabel();

             //获取当前状态

             function getCurrentLabel(){

                 console.log(t.currentLabel()); //控制台打印输出当前动画运动到的状态

             }

         });

 </script>
    3、getLabelAfter()：获取下一个状态

     参数说明：

  1. 时间数字

            返回值是状态的字符串，如果没有下一个状态返回null

 getLabelBefore()：获取上一个状态

     参数说明：

  1. 时间数字

            返回值是状态的字符串，如果没有上一个状态返回null
 <script>

 $(function(){

             var t =new TimelineMax();

             t.add("state1");

             t.to(".div1",1,{left:300,onComplete:function(){

                 getCurrentLabel();

             }},1);

             t.add("state2");

             t.to(".div1",1,{width:300,onComplete:function(){

                 getCurrentLabel();

             }},"+=1");

             t.add("state3");

             t.to(".div1",1,{height:300,onComplete:function(){

                 getCurrentLabel();

             }});

             getCurrentLabel();

             //获取当前状态

             function getCurrentLabel(){

                 //获取当前的时间

                 var currentTime = t.getLabelTime( t.currentLabel() );

                 //获取到上一个状态

                 var beforeLabel = t.getLabelBefore( currentTime );

                 //获取到下一个状态

                 var afterLabel  = t.getLabelAfter( currentTime );

                 var str = "<p>上一个状态:"+ beforeLabel +"</p><p>当前状态:"+ t.currentLabel() +"</p><p>下一个状态:"+ afterLabel +"</p>";

                 $("#label").html( str );

             }

         });

 </script>

动画演示：

代码打包下载：

链接: http://pan.baidu.com/s/1eSz4Xz0 密码: wgw3

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. TweenMax的GSAP（GreenSock动画平台）GSAP，专业的Web动画库

    很好奇红框框里面的内容是什么,于是点了进去,又百度了下这个英文缩写具体指的什么东西. GSAP的全名是GreenSock Animation Platform,是一个从flash时代一直发展到今天的专 ...

随机推荐

  1. iOS开发——设备篇Swift篇&判断设备类型

    判断设备类型   1,分割视图控制器(UISplitViewController) 在iPhone应用中,使用导航控制器由上一层界面进入下一层界面. 但iPad屏幕较大,通常使用SplitViewCo ...

  2. 机器学习中的范数规则化之（一）L0、L1与L2范数 非常好，必看

    机器学习中的范数规则化之(一)L0.L1与L2范数 zouxy09@qq.com http://blog.csdn.net/zouxy09 今天我们聊聊机器学习中出现的非常频繁的问题:过拟合与规则化. ...

  3. Spirng_Batch

    一.需求分析 使用Spring Batch对XML文件进行读写操作: 从一个xml文件中读取商品信息, 经过简单的处理, 写入另外一个xml文件中. 二.代码实现 1. 代码结构图: 2. appli ...

  4. 新一代 PHP 加速插件 Zend Opcache

    参考:http://www.laogui.com/Zend-Opcache 大家知道目前PHP的缓存插件一般有三个:APC.eAccelerator.XCache,但未来它们可能都会消失,因为PHP ...

  5. Helpers\GeoCode

    Helpers\GeoCode This function connects to google maps and retrieves the lat/lon of the address provi ...

  6. 小米2s使用Hexamob Recovery PRO恢复数据

    这东西对于手机来说, 真是神器啊 现在很多手机都是以MTP连接到电脑的, 所以在PC上是看不到盘符, 也就无法使用finaldata 之类的工具恢复了. 而像小米2S这样的手机, 无法外接SD卡, 则 ...

  7. C#面向对象(一) 封装

    一.什么叫做面向对象封装? 封装的概念:隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读取和修改的访问级别. 二.面向对象封装有什么好处(为什么要封装)? 封装的目的:是增强安全性和简化 ...

  8. struts2.1笔记02：servlet简介

    1.     Servlet 是在服务器上运行的小程序.这个词是在 Java applet的环境中创造的,Java applet 是一种当作单独文件跟网页一起发送的小程序,它通常用于在客户端运行,结果 ...

  9. mysql由于外键关联无法删除数据

    在mysql中删除一张表时候,出现 Error No. 1451 Cannot delete or update a parent row: a foreign key constraint fail ...

  10. postgresql常用SQL

    --查看数据库 select * from pg_database; --查看表空间 select * from pg_tablespace; --查看语言 select * from pg_lang ...