目录

           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开发——UI篇&下拉弹出列表选择项效果

    下拉弹出列表选择项效果 右边菜单中的按键,点击弹出一个列表可选择,选择其中一个,响应相应的事件并把文字显示在右边的菜单上:弹出下拉效果使用LMDropdownView插件,可以用POD进行加载pod  ...

  2. Ubuntu开机时出现&quot;没有正确安装GNOME电源管理器的默认配置

    1:在登录界面.按Ctrl+Alt+F1,进入控制台命令行模式 2:先输入username,回车,然后输入password,登录成功 3:输入df -h,这个命令是查看硬盘空间的.能够看一下.你的ho ...

  3. PHP获取用户真实 IP , 淘宝IP接口获得ip地理位置(转)

    <?php /** * 获取用户真实 IP */ function getIP() { static $realip; if (isset($_SERVER)){ if (isset($_SER ...

  4. 小米2及其他Android手机无法连接mac解决方案

    一般的android连接mac 很方便不用安装驱动就可以啦,可是不知道为什么二般情况下有的android手机(小米2,华为等)就是连接不上,下来就说说二般情况下如何连接. 1.关于本机-->更多 ...

  5. C++函数的传入参数是指针的指针（**）的详解

    要修改变量的值,需要使用变量类型的指针作为参数或者变量的引用.如果变量是一般类型的变量,例如int,则需要使用int 类型的指针类型int *作为参数或者int的引用类型int&.但是如果变量 ...

  6. Computer Science Theory for the Information Age-6: 学习理论——VC定理的证明

    VC定理的证明 本文讨论VC理论的证明,其主要内容就是证明VC理论的两个定理,所以内容非常的枯燥,但对于充实一下自己的理论知识也是有帮助的.另外,VC理论属于比较难也比较抽象的知识,所以我总结的这些证 ...

  7. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  8. C#加密算法汇总(转载)http://www.cnblogs.com/zengxiangzhan/archive/2010/01/30/1659687.html

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 方法一:     //须添加对System.Web的引用    ...

  9. Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现

    Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...

  10. CSS组件化思考

    为什么组件化? 分层设计,代码复用,减少冗余: 维护方便,弹性好: 如何组件化? 目前代码分成三级: 第一级粒度最细,是基础,主要包含字体配置,颜色配置,UI框架(比如MUI或者pure.css): ...