TweenMax动画库学习(五)

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

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

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

1、页面布局

 1 <script src="./../js/jquery-2.1.4.min.js"></script>
 2 <script src="./../js/TweenMax.js"></script>
 3 <style>
 4         html,body{
 5             margin: 0;
 6             padding: 0;
 7         }
 8         .div1{
 9             width:100px;
10             height:100px;
11             background: #8D121A;
12             position: absolute;
13             top:150px;
14             left:0;
15         }
16 </style>

1 <body>
2 <div id="label"></div>
3 <div class="div1"></div>
4 </body>

2、currentLabel()：获取当前状态

参数说明：

1 返回值是状态的字符串

currentLabel()

 1 <script>
 2         $(function(){
 3             var t =new TimelineMax();
 4             t.add("state1");
 5             t.to(".div1",1,{left:300,onComplete:function(){
 6                 getCurrentLabel();
 7             }},1);
 8             t.add("state2");
 9             t.to(".div1",1,{300,onComplete:function(){
10                 getCurrentLabel();
11             }},"+=1");
12             t.add("state3");
13             t.to(".div1",1,{height:300,onComplete:function(){
14                 getCurrentLabel();
15             }});
16             getCurrentLabel();
17             //获取当前状态
18             function getCurrentLabel(){
19                 console.log(t.currentLabel()); //控制台打印输出当前动画运动到的状态
20             }
21         });
22 </script>

3、getLabelAfter()：获取下一个状态

参数说明：

  1. 时间数字
            返回值是状态的字符串，如果没有下一个状态返回null

getLabelBefore()：获取上一个状态

参数说明：

  1. 时间数字
            返回值是状态的字符串，如果没有上一个状态返回null

 1 <script>
 2 $(function(){
 3             var t =new TimelineMax();
 4             t.add("state1");
 5             t.to(".div1",1,{left:300,onComplete:function(){
 6                 getCurrentLabel();
 7             }},1);
 8             t.add("state2");
 9             t.to(".div1",1,{300,onComplete:function(){
10                 getCurrentLabel();
11             }},"+=1");
12             t.add("state3");
13             t.to(".div1",1,{height:300,onComplete:function(){
14                 getCurrentLabel();
15             }});
16             getCurrentLabel();
17             //获取当前状态
18             function getCurrentLabel(){
19                 //获取当前的时间
20                 var currentTime = t.getLabelTime( t.currentLabel() );
21                 //获取到上一个状态
22                 var beforeLabel = t.getLabelBefore( currentTime );
23                 //获取到下一个状态
24                 var afterLabel  = t.getLabelAfter( currentTime );
25                 var str = "<p>上一个状态:"+ beforeLabel +"</p><p>当前状态:"+ t.currentLabel() +"</p><p>下一个状态:"+ afterLabel +"</p>";
26                 $("#label").html( str );
27             }
28         });
29 </script>

动画演示：

代码打包下载：

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

相关阅读:
记一次在Linux上面启动部署在tomcat服务器的程序
 记一次使用命令行启动部署在tomcat上的应用
 记一次在Eclipse中用Axis生成webservice服务端的过程中出现的问题
 Spring Boot 连接MySql数据库
 Spring Boot入门===Hello World
Eclipse利用Maven2搭建SpringMVC框架的Web工程
 redis 如何查看所有的key
ulimit设置内存限制是否有效
 kafka重复数据问题排查记录
 sql update操作结果
原文地址：https://www.cnblogs.com/chenyablog/p/5557348.html