缓存动画3—传json 

 1  var obj = {
 2         "left": 300,
 3         "top": 400,
 4         "width": 600,
 5         "height": 600
 6     };
 7 
 8     for(var key in obj){
 9         console.log(key);
10         console.log(obj[key]);
11     }

遍历json

 1 <script>
 2         window.addEventListener('load', function (ev) {
 3             var box = myTool.$('box');
 4 
 5             myTool.$('btn').addEventListener('click', function () {
 6                 buffer(box, { 'left': 300, 'top': 500, 'width': 600, 'height': 400});
 7             });
 8 
 9             myTool.$('btn1').addEventListener('click', function () {
10                 buffer(box, 'width', 800);
11             });
12         });
13 
14         /**
15          *  缓动动画函数
16          * @param {Object}eleObj
17          * @param {Object}json
18          */
19         function buffer(eleObj, json) {
20             // 1.1 先清后设
21             clearInterval(eleObj.timer);
22 
23             // 1.2 定义变量
24             var speed = 0, begin = 0, target = 0;
25 
26             // 1.2 设置定时器
27             eleObj.timer = setInterval(function () {
28                for(var key in json){
29                    // 获取要做动画属性的初始值
30                    begin = parseInt(myTool.getStyleAttr(eleObj, key)) || 0;
31                    target = parseInt(json[key]);
32                    console.log('begin:' + begin);
33 
34                    // 2.3 求出步长
35                    speed = (target - begin) * 0.2;
36                    speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
37 
38                    // 2.4  动起来
39                    eleObj.style[key] = begin + speed + 'px';
40 
41                    // 2.5 清除定时器
42                    if (begin === target) {
43                        clearInterval(eleObj.timer);
44                    }
45                }
46             }, 20);
47         }
48     </script>

posted @ 2019-07-20 11:42  疏影横斜水清浅  阅读(189)  评论(0)  编辑  收藏  举报