欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

TweenMax动画库学习(三)

发布时间：2025/7/14 62 豆豆
生活随笔 收集整理的这篇文章主要介绍了 TweenMax动画库学习(三) 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

目录           

           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;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,{width: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,{width: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,{width:300,onComplete:function(){ 9 alert("width: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,{width:300,onComplete:function(){ 9 alert("width: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,{width:300,onComplete:function(){ 9 alert("width: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,{width:300,onComplete:function(){ 17 alert("width: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> 

动画演示：

 

代码打包下载：

链接: http://pan.baidu.com/s/1nvMrrjN 密码: qp44

 

转载于:https://www.cnblogs.com/chenyablog/p/5557341.html

总结

以上是生活随笔为你收集整理的TweenMax动画库学习(三)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。