目录

           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篇&状态栏操作

    状态栏操作 在Swift开发过程中,针对状态栏操作的过程有很多. 1.在ViewController中操作当前ViewController的状态栏 /** 隐藏状态栏 */ override func ...

  2. PAT 1019

    1019. General Palindromic Number (20) A number that will be the same when it is written forwards or ...

  3. Qt focusoutevent 不响应的解决方法

    一般利用focus(焦点)来实现弹窗自动关闭效果. Qt的focus貌似是自己的bug, 经常无法接收到focusout的事件 例如: widgetA 中执行  widgetB->show(); ...

  4. Balanced Lineup(最简单的线段树题目)

    Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 33389   Accepted: 15665 Case Time Limit ...

  5. http协议Authorization认证方式在Android开发中的使用

    我们都知道,http协议是一种无状态协议,在Web开发中,由于Session和Cookie的使用,使得服务端可以知道客户端的连接状态,即用户只需要在浏览器上登录一次,只要浏览器没有关闭,后续所有的请求 ...

  6. CSS 创建方式与优先级

    最近想学习自动化测试--web元素的匹配查找,一直搞不懂CSS的相关标签与对元素的渲染方式. 本文转自W3School: http://www.w3school.com.cn/css/css_howt ...

  7. Java 8 Stream API Example Tutorial

    Stream API Overview Before we look into Java 8 Stream API Examples, let’s see why it was required. S ...

  8. Mysql 复习

    1.my.ini :mysql 配置文件 [client]#password    = your_passwordport        = 3306socket        = /tmp/mysq ...

  9. flex数据交互方式 转

    Flex数据交互方法- httpservice, webservice, RemoteObject, socket. 写在前面: 使用SOAP Web Service同Flex交互有很多好处,但是它很 ...

  10. sort排序中的坑

    问题的产生原因: 在一篇阿里面试题的跟帖中,很多人应用sort()方法对数组进行排序.看似合情合理的代码,运行结果却频频出错.为什么呢?因为很多人都忽略掉了一点,那就是sort()排序默认情况下是按A ...