zoukankan      html  css  js  c++  java
  • TweenMax动画库学习(五)

    目录           

               TweenMax动画库学习(一)

               TweenMax动画库学习(二)

               TweenMax动画库学习(三)

               TweenMax动画库学习(四)

               TweenMax动画库学习(五)  

               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
  • 相关阅读:
    [SoapUI] Compare JSON Response(比较jsonobject)
    [SoapUI] Command-Line Arguments
    [SoapUI] How to create a random UUID in each Request's Headers
    SoapUI Script Library
    [正则表达式] 正则表达式匹配UUID
    [远程] windows 2008 server设置了共享文件夹,并且共享给了everyone,但是还是无法访问,怎么解决呢?
    each
    WSDL Style和use的组合方式说明
    XML xsd
    java.lang.ClassNotFoundException: springosgi
  • 原文地址:https://www.cnblogs.com/chenyablog/p/5557348.html
Copyright © 2011-2022 走看看