缓存动画4-回调

 1  <script>
 2        window.addEventListener('load', function (ev) {
 3            var box = myTool.$('box');
 4 
 5            myTool.$('btn').addEventListener('click', function () {
 6                buffer(box, { 'left': 900, 'top': 500, 'width': 600, 'height': 400}, function () {
 7                    buffer(box, { 'left': 100, 'top': 100, 'width': 50, 'height': 50}, function () {
 8                        buffer(box, { 'left': 600, 'top': 500, 'width': 300, 'height': 400}, null)
 9                    });
10                });
11            });
12        });
13 
14        /**
15         *  缓动动画函数
16         * @param {Object}eleObj
17         * @param {Object}json
18         * @param {Function}fn
19         */
20        function buffer(eleObj, json, fn) {
21            // 1.1 先清后设
22            clearInterval(eleObj.timer);
23 
24            // 1.2 定义变量
25            var speed = 0, begin = 0, target = 0, flag = false;
26 
27            // 1.3 设置定时器
28            eleObj.timer = setInterval(function () {
29                // 标志 (标签的所有属性有没有执行完动画)
30                flag = true;
31                for(var key in json){
32                    // 获取要做动画属性的初始值
33                    begin = parseInt(myTool.getStyleAttr(eleObj, key)) || 0;
34                    target = parseInt(json[key]);
35                    console.log('begin:' + begin);
36 
37                    // 2.3 求出步长
38                    speed = (target - begin) * 0.2;
39                    speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
40 
41                    // 2.4  动起来
42                    eleObj.style[key] = begin + speed + 'px';
43 
44                    // 2.5 判断
45                    if (begin !== target) {
46                        flag = false;
47                    }
48                }
49 
50                // 1.4 清除定时器
51                if(flag){
52                    clearInterval(eleObj.timer);   //解决了只要一个值满足就可以的情况
53                    // 开启另一组动画
54                   /* if(fn){
55                        fn();
56                    }*/
57                   fn && fn();
58                }
59            }, 40);
60        }
61    </script>