zoukankan      html  css  js  c++  java
  • (转)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{
                100px;
                height:100px;
                background: #8D121A;
                position: absolute;
                left:0;
                top:100px;
            }
    </style>
    复制代码
    1 <body>
    2 <div id="div1"></div>
    3 </body>

       

    2、seek()---完成指定的动画(无过渡)

             参数说明:

    1. 指定时间或状态
    2. 【可选】布尔值
                true:不执行函数  默认
                false: 执行函数

             seek(时间)

    复制代码
    1 <script>
    2         $(function(){
    3             var t =new TimelineMax();
    4             t.to("#div1",2,{left:300});
    5             t.to("#div1",2,{300});
    6             t.to("#div1",2,{height:300});
    7             t.seek(2);//直接运动到设置的时间点,后面的运动会接着运动
    8         });
    9 <script>
    复制代码

           seek("状态")

    复制代码
     1 <script>
     2         $(function(){
     3             var t =new TimelineMax();
     4             t.to("#div1",2,{left:300});
     5             t.add("state1");
     6             t.to("#div1",2,{300});
     7             t.add("state2");
     8             t.to("#div1",2,{height:300});
     9             t.add("state3");
    10             t.seek("state2");//直接运动到设置的状态,后面的运动会接着运动
    11         });
    12 </script>
    复制代码

          seek("状态",false)

    复制代码
     1 <script>
     2         $(function(){
     3             var t =new TimelineMax();
     4             t.to("#div1",2,{left:300,onComplete:function(){
     5                 alert("left:300");
     6             }});//标记一
     7             t.add("state1");
     8             t.to("#div1",2,{300,onComplete:function(){
     9                 alert("300");
    10             }});
    11             t.add("state2");
    12             t.to("#div1",2,{height:300});
    13             t.add("state3");
    14             t.seek("state1",false);//直接运动到设置的状态,但会执行【标记一】中的函数,后面的运动会接着运动
    15 </script>
    复制代码

    3、time() 动画已执行的时间

             参数说明:

    1 动画已执行的时间
    复制代码
     1 <script>
     2         $(function(){
     3             var t =new TimelineMax();
     4             t.to("#div1",2,{left:300,onComplete:function(){
     5                 alert("left:300");
     6             }});
     7             t.add("state1");
     8             t.to("#div1",2,{300,onComplete:function(){
     9                 alert("300");
    10             }});
    11             t.add("state2");
    12             t.to("#div1",2,{height:300});
    13             t.add("state3");
    14             t.seek("state3",false);
    15             console.log(t.time());  //6 //动画已执行的时间
    16         });
    17 </script>
    复制代码

    4、clear():清除所有动画

                参数说明:

    1 清除所有动画
    复制代码
     1 <script>
     2         $(function(){
     3             var t =new TimelineMax();
     4             t.to("#div1",2,{left:300,onComplete:function(){
     5                 alert("left:300");
     6             }});
     7             t.add("state1");
     8             t.to("#div1",2,{300,onComplete:function(){
     9                 alert("300");
    10             }});
    11             t.add("state2");
    12             t.clear();  //清除state2之前的所有动画,后面的动画依然继续执行
    13             t.to("#div1",2,{height:300});
    14             t.add("state3");
    15         });
    16 </script>
    复制代码

         seek()、time()、clear()综合使用

    复制代码
     1 <script>
     2 //        seek():完成指定的动画(无过渡)
     3 //        参数说明:
     4 //                 1. 指定时间或状态
     5 //                 2. 【可选】布尔值
     6 //                                  true:不执行函数  默认
     7 //                                  false: 执行函数
     8 //        time():动画已执行的时间
     9 //        clear():清除所有动画
    10         $(function(){
    11             var t =new TimelineMax();
    12             t.to("#div1",2,{left:300,onComplete:function(){
    13                 alert("left:300");
    14             }});
    15             t.add("state1");
    16             t.to("#div1",2,{300,onComplete:function(){
    17                 alert("300");
    18             }});
    19             t.add("state2");
    20 //          t.clear();  //清除所有动画
    21             t.to("#div1",2,{height:300});
    22             t.add("state3");
    23 //          t.stop();
    24           t.seek("state3",false);
    25             console.log(t.time());  //6 //动画已执行的时间
    26         });
    27 </script> 
    复制代码

    动画演示:

  • 相关阅读:
    asp.net core 3.1 CreateDefaultBuilder默认启动解析
    VS2019安装扩展成功后,扩展不显示(未启用,也找不到选项)
    Redis持久化必知必会
    调试错误,请回到请求来源地,重新发起请求
    复制DataRow行 插入DataTabel
    mysql查看被锁住的表
    RedisHelper帮助类(转)
    C#接口的作用实例解析
    ASP.NET CORE 启动过程及源码解读(转)
    医疗行业&产品/技术交流群
  • 原文地址:https://www.cnblogs.com/sdzbxfcy/p/9798871.html
Copyright © 2011-2022 走看看