目录

           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. perl 变量详解

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

  2. 损失函数(loss function) 转

    原文:http://luowei828.blog.163.com/blog/static/310312042013101401524824 通常而言,损失函数由损失项(loss term)和正则项(r ...

  3. No identifier specified for entity

    主键问题   使用hibernate的e-r映射pojo类的时候遇到org.hibernate.AnnotationException: No identifier specified for ent ...

  4. STOMP协议规范--转载

    原文地址:http://simlegate.com/2013/10/17/stomp-specification-1.2/ 摘要 STOMP是一个简单的可互操作的协议, 被用于通过中间服务器在客户端之 ...

  5. 基于 Jenkins 快速搭建持续集成环境--转

    源地址:http://www.ibm.com/developerworks/cn/java/j-lo-jenkins/ 持续集成是一种软件开发实践,对于提高软件开发效率并保障软件开发质量提供了理论基础 ...

  6. （ 转转）Android初级开发第九讲--Intent最全用法（打开文件跳转页面等）

    大家好,今天跟大家谈谈Intent的用法. Intent在安卓中主要用于打开另外一个页面,这个页面可能是一个activity也可能是一个应用,也可能是     其它…… 且看下面介绍,总结摘抄网友一些 ...

  7. JavaFX（四）窗口大小自由拉伸

    1.问题场景 同样的,隐藏掉窗体的默认标题栏也会导致窗体大小自由拉伸功能的失效. 2.解决思路 判断鼠标在窗体的位置,改变鼠标样式,给窗体组件添加拖拽事件监听器,根据鼠标移动位置改变窗体大小. 3.代 ...

  8. Android（java）学习笔记84：自定义异常类

    自定义异常: 考试成绩必须在0-100之间 很明显java没有对应的异常,需要我们自己来做一个异常 自定义异常 继承自Exception 继承自RuntimeException 下面是一个代码示例: ...

  9. 《Cortex-M0权威指南》之绪论

    转载请注明来源:cuixiaolei的技术博客 1.1 为什么要选择Cortex-M0 为了满足现代超低功耗微控制器和混合信号设备的需要,ARM推出了Cortex-M0处理器.Cortex-M0在保持 ...

  10. activity工作的使用

    一. 什么是工作流 以请假为例,现在大多数公司的请假流程是这样的 员工打电话(或网聊)向上级提出请假申请——上级口头同意——上级将请假记录下来——月底将请假记录上交公司——公司将请假录入电脑 采用工作 ...