首页 > 代码库 > tween.js的动画效果

tween.js的动画效果

2024-10-11 22:26:01   210人阅读

实现动画可以用好多种的方法，今天来看看用tween.js插件是如何实现动画效果的。

 tween.js的使用
　　1.下载
　　2.引入
　　3.使用tween.js语法


需要哪些条件来做运动
　1.初始位置
  2.目标点

缓动函数
　　1.linear 匀速
　　2.Quad 二次方缓动效果
　　3.Cubic 三次方缓动效果
　　4.Quart 四次方缓动效果
　　5.Quint 五次方缓动效果
　　6.Sine  正弦缓动效果
　　7.Expo  指数缓动效果
　　8.Circ  圆形缓动函数
　　9.Elastic 指数衰减正弦曲线缓动函数
　　10.Back  超过范围的三次方的缓动函数
　　11.Bounce 指数衰减的反弹曲线缓动函数
每种缓动函数都由三种效果:
　　1.easeIn  加速
　　2.easeOut 减速
　　3.easeInOut  先加速后减速
　　注:linear 只有一种效果匀速

 



Tween.缓动函数名.缓动效果名(t,b,c,d);




  t:当前已经运动的时间
  b:初始位置
  c:变化的值
  d:总步数  总时间




 我们来举个例子吧！




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7        
 8        #div1 {
 9              width: 100px;
10              height: 100px;
11              background: red;
12              position: absolute;
13              left: 100px;
14              top: 200px;
15        }
16 
17     </style>
18 </head>
19 <body>
20     <div id=‘div1‘></div>
21     <!--移入tween.js-->
22     <script src=http://www.mamicode.com/‘tween.js‘></script>
23     <script type="text/javascript">
24         
25          // 获取元素
26          var oDiv = document.getElementById(‘div1‘);
27          var iLeft = 100;   // 初始位置
28          var timer = 0;     //d:总步数  总时间
29 
30 
31         // 先准备好要传入的四个参数
32         b = iLeft;  //b:初始位置
33         t = 0;      //t:当前已经运动的时间
34         c = 500;    //c:变化的值
35         d = 20;     //d:总步数  总时间
36         timer = setInterval(function() {
37            t++;
38            if (t >= d) {
39                 clearInterval(timer);
40            }
41             oDiv.style.left = Tween.Linear(t, b, c, d) + ‘px‘; //匀速运动
42         }, 30);
43 
44         
45 
46     </script>
47 </body>
48 </html>




 


 


 


 


 


 


移动前：


 


技术分享


 


移动后：

技术分享
再给大家分享一个开关门的动画效果。




  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         *{margin: 0;padding: 0}
  8         div{position: relative;width: 800px;height: 400px;overflow: hidden;}
  9         li img{width: 800px;height:400px;}
 10         ul{list-style: none;position: absolute;}
 11         ul li{position: absolute;}
 12         #btn1{margin-left: 310px;width: 80px;height: 30px;}
 13         #btn2{margin-left: 20px;width: 80px;height: 30px;}
 14         #li1{width: 399px;height: 400px;background-color: darkgrey;
 15             border-right:1px red solid;  }
 16         #li2{width: 399px;height: 400px;background-color: darkgrey;margin-left: 400px; border-left:1px red solid;}
 17     </style>
 18 </head>
 19 <body>
 20 <div id="div">
 21     <ul>
 22         <li><img src=http://www.mamicode.com/"img4.jpg" alt=""/></li>
 23         <li id="li1"></li>
 24         <li id="li2"></li>
 25     </ul>
 26 </div>
 27 <button id="btn1">开门</button>
 28 <button id="btn2">关门</button>
 29 </body>
 30 <script type="text/javascript" src=http://www.mamicode.com/"tween.js"></script>
 31 <script type="text/javascript">
 32     var div=document.getElementById("div");
 33     var li1=document.getElementById("li1");
 34     var li2=document.getElementById("li2");
 35     var btn1=document.getElementById("btn1");
 36     var btn2=document.getElementById("btn2");
 37 
 38     timer=null;
 39     timer1=null;
 40     btn1.onclick=function() {
 41 //        左开门
 42         fun();
 43         function fun() {
 44             var t = 0;          //t:当前已经运动的时间=== 0
 45             var b = 0;          // b:初始位置=== 0
 46             var c = -400;       //c:变化的值=== -400
 47             var d = 100;        //d:总步数  总时间=== 100
 48             timer = setInterval(function () {
 49                         t += 2;
 50                         if (t == d) {
 51                             clearInterval(timer)
 52                         }
 53                         li1.style.left = Tween.Linear(t, b, c, d) + "px";
 54                     }
 55                     , 30);
 56         }
 57 //右开门
 58         fun1();
 59         function fun1() {
 60 
 61             var t = 0;      //t:当前已经运动的时间=== 0
 62             var b = 0;      // b:初始位置=== 0
 63             var c = 400;    //c:变化的值=== 400
 64             var d = 100;    //d:总步数  总时间=== 100
 65             timer1 = setInterval(function () {
 66 
 67                 t += 2;
 68                 if (t == d) {
 69                     clearInterval(timer1)
 70                 }
 71                 li2.style.left = Tween.Linear(t, b, c, d) + "px";
 72             }, 30);
 73         }
 74     };
 75     
 76     timer2=null;
 77     timer3=null;
 78     btn2.onclick=function(){
 79 //        左关门
 80         fun2();
 81         function fun2() {
 82             var t = 0;          //t:当前已经运动的时间=== 0
 83             var b = -400;       // b:初始位置=== -400
 84             var c = 400;        //c:变化的值=== 400
 85             var d = 100;        //d:总步数  总时间=== 100
 86             timer2 = setInterval(function () {
 87 
 88                 t += 2;
 89                 if (t == d) {
 90                     clearInterval(timer2)
 91                 }
 92                 li1.style.left = Tween.Bounce.easeOut(t, b, c, d) + "px";
 93             }, 30);
 94         }
 95 //        右关门
 96         fun3();
 97         function fun3() {
 98             var t = 0;          //t:当前已经运动的时间=== 0
 99             var b = 400;        // b:初始位置=== 400
100             var c = -400;       //c:变化的值=== -400
101             var d = 100;        //d:总步数  总时间=== 100
102             timer3 = setInterval(function () {
103 
104                 t += 2;
105                 if (t == d) {
106                     clearInterval(timer3)
107                 }
108                 li2.style.left = Tween.Bounce.easeOut(t, b, c, d) + "px";
109             }, 30);
110         }
111     }
112 </script>
113 </html>






初始效果图====点击开门效果图=====点击关门效果图技术分享


tween.js的动画效果






























        

            
                
                  
                
                

                    联系

                    我们