实现动画可以用好多种的方法，今天来看看用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 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='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; 800px;height: 400px;overflow: hidden;} 9 li img{ 800px;height:400px;} 10 ul{list-style: none;position: absolute;} 11 ul li{position: absolute;} 12 #btn1{margin-left: 310px; 80px;height: 30px;} 13 #btn2{margin-left: 20px; 80px;height: 30px;} 14 #li1{ 399px;height: 400px;background-color: darkgrey; 15 border-right:1px red solid; } 16 #li2{ 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="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="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>
初始效果图====点击开门效果图=====点击关门效果图