JS Tween

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             #box{
12                 width: 50px;
13                 height: 50px;
14                 background: red;
15                 position: absolute;
16             }
17         </style>
18         
19         <!--引入 tween.js-->
20     <script type="text/javascript" src="js/tween.js"></script>
21         
22     </head>
23     <body>
24         <div id="box"></div>
25     </body>
26     <script type="text/javascript">
27     
28         var box = document.getElementById("box");
29         var originLeft = box.offsetLeft;
30         box.style.width = "500px";
31         // 定义变量 记录 left 增加的值
32         // var leftAdd = 0;
33         // var timer = setInterval(function(){
34         //     leftAdd += 5;
35         //     box.style.left = originLeft + leftAdd + "px";
36         //     if(leftAdd == 600){
37         //         clearInterval(timer);
38         //     }
39         // },30);
40         
41     /*可以改进的地方
42      * 1、可以增加速率曲线
43      * 2、可以支持低端设备
44      * 3、想要一些特殊效果（回弹效果）
45     */
46     
47         // 当前时间（但是并不是ms，s 等）
48         var t = 0;
49         // 初始值
50         var b = originLeft;
51         // 变化量
52         var c = 400;
53         // 持续时间
54         var d = 50;
55         
56         var timer = setInterval(function(){
57             t++;
58             if(t>=d){
59                 clearInterval(timer);
60             }
61             box.style.width = Tween.Linear(t,b,c,d) + "px";
62             
63         },20);
64     </script>
65 </html>