tween.js的動畫效果
阿新 • • 發佈：2017-06-25
cli style 點擊 bounce 移動 last 我們 當前 ++
實現動畫可以用好多種的方法，今天來看看用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=‘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="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>
初始效果圖====點擊開門效果圖=====點擊關門效果圖
tween.js的動畫效果