缓动动画1

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         #box {
13              100px;
14             height: 100px;
15             background-color: red;
16             position: absolute;
17         }
18     </style>
19 </head>
20 <body>
21 <button id="btn">往右走</button>
22 <div id="box"></div>
23 <script src="js/MyTool.js"></script>
24 <script>
25     window.addEventListener('load', function (ev) {
26         // 1. 变量
27         var target = 800, timer = null, speed = 0, box = myTool.$('box');
28 
29         // 2. 监听点击
30         myTool.$('btn').addEventListener('click', function () {
31             // 2.1 先清后设
32             clearInterval(timer);
33 
34             // 2.2 设置定时器
35             // begin = begin + (end - begin) * 0.2
36             // 步长
37             timer = setInterval(function () {
38                 // 2.3 求出步长
39                 speed = (target - box.offsetLeft) * 0.2;
40 
41                 console.log('之前：' + speed);
42                 speed = Math.ceil(speed);
43                 console.log('之后：' + speed);
44 
45                 // 2.4  动起来
46                 box.style.left = box.offsetLeft + speed + 'px';
47                 box.innerText = box.offsetLeft;
48 
49                 // 2.5 清除定时器
50                 if(box.offsetLeft === target){
51                     clearInterval(timer);
52                 }
53             }, 20);
54         });
55     });
56 </script>
57 </body>
58 </html>

 1 <script>
 2     window.addEventListener('load', function (ev) {
 3         var box = myTool.$('box');
 4 
 5         // 向右走
 6         myTool.$('btn').addEventListener('click', function () {
 7              buffer(box, 800);
 8         });
 9 
10         // 向左走
11         myTool.$('btn1').addEventListener('click', function () {
12             buffer(box, 200);
13         });
14     });
15 
16 
17 
18     /**
19      * 缓动东环函数
20      * @param {Object}eleObj
21      * @param {Number}target
22      */
23     function buffer(eleObj, target) {
24         // 1.1 先清后设
25         clearInterval(eleObj.timer);
26 
27         // 1.2 定义变量
28         var speed = 0;
29 
30         // 1.2 设置定时器
31         eleObj.timer = setInterval(function () {
32             // 2.3 求出步长
33             speed = (target - eleObj.offsetLeft) * 0.2;
34             speed = (target > eleObj.offsetLeft) ?  Math.ceil(speed) :  Math.floor(speed);
35 
36             // 2.4  动起来
37             eleObj.style.left = eleObj.offsetLeft + speed + 'px';
38             eleObj.innerText = eleObj.offsetLeft;
39 
40             // 2.5 清除定时器
41             if(eleObj.offsetLeft === target){
42                 clearInterval(eleObj.timer);
43             }
44         }, 20);
45     }
46 </script>

封装缓存动画