目录

           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. Android SDK安装时碰到的问题之解决办法

    问题:hostname in certificate didn't match: <dl-ssl.google.com> != <www.google.com> Fetchin ...

  2. oc-10-对象做参数

    // // main.m // 6-[掌握]对象和方法之间的关系 #import <Foundation/Foundation.h> //声明人类 @interface Person : ...

  3. mydumper原理1

    http://www.cnblogs.com/linuxnote/p/3817698.html?utm_source=tuicool&utm_medium=referral mydumper介 ...

  4. perl 变量详解

    http://www.perlmonks.org/?node_id=933450 use strict; use Devel::Peek; my $a; Dump($a); $a=4; Dump($a ...

  5. 空间的配置和释放 std::alloc

    看完了对象的构造行为和内存释放前的对象的析构行为,我们现在来看看内存的配置和释放. 对象构造前的空间分配和析构后的空间释放,定义在头文件<stl_alloc.h>中.其设计思想是: 向sy ...

  6. Android（java）学习笔记207：开源项目使用之gif view

    1. 由于android没有自带的gif动画,我在Android(java)学习笔记198:Android下的帧动画(Drawable Animation) 播客中提到可以使用AnimationVie ...

  7. Android（java）学习笔记95：Android原理揭秘系列之View、ViewGroup

    作过Android 应用开发的朋友都知道,Android的UI界面都是由View和ViewGroup及其派生类组合而成的.其中,View是所有UI组件的基类,而ViewGroup是容纳这些组件的容器, ...

  8. Java作业代写

    作业一 试用java编写一个九九乘法表并打印. 作业二: 设计两个人类与书类,并设置两者的关系,试用人去找书,书去找人,假如某人有一个儿子,它也有一本书,试用儿子去找书,书找儿子. 大作业 熟悉QQ农 ...

  9. Objective-C ,ios,iphone开发基础:ios数据库（The SQLite Database）,使用终端进行简单的数据库操作

    SQLite  是一个轻量级的免费关系数据库.SQLite最初的设计目标是用于嵌入式系统,它占用资源非常少,在嵌入式设备中,只需要几百K的内存就够了,可以在(http://www.sqlite.org ...

  10. zabbix电话告警V1

    最近决定将夜班值班人员取消,夜里告警采用机器人电话通知.总结一下这么几个情况,有问题还请指出,希望也能给大家多一个思路. V1做的太糙了,预计年初上V2 一.用谁家的服务 费用我没有太关注,主要就是看 ...