JS基础-特效篇-多组动画

1.知识点：回调！（坚持就是胜利！已经到现在了！没点儿收获，对不起自己啊！）
2.案例：
1）页面：

<button id="btn">向左走</button>
<button id="btn1">向右走</button>
<div id="box"></div>
<script src="MyTool/MyTool.js"></script>

2)样式

<style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 100px;
            height: 100px;
            background-color: red;

            position: absolute;
        }
    </style>

3)JS函数

    /*
    *@description:[缓动动画函数]
    *@param:{Object}[eleObj]
    *@param:{Object}[json]
    *@param:{Object}[fn]
    *@date:2021/5/11
    */
    function buffer(eleObj, json, fn) {
        clearInterval(eleObj.timer);
        var speed = 0, begin = 0, target = 0, flag = false;
        eleObj.timer = setInterval(function () {
            flag = true;
            for (var key in json) {
                begin = parseInt(myTool.getStyleAttr(eleObj, key)) || 0;
                target = parseInt(json[key]);
                speed = (target - begin) * 0.2;
                speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
                eleObj.style[key] = begin + speed + 'px';
                if (begin !== target) {
                    flag = false;
                }
            }
            if (flag) {
                clearInterval(eleObj.timer);
                //开启另外的动画
                // if(fn){
                //     fn();
                // }
                fn && fn();
            }
        }, 20)
    }

4）调用函数：

    window.addEventListener('load', function (ev) {
        var box = myTool.$('box');
        myTool.$('btn').addEventListener('click', function (ev1) {
            buffer(box, {'left': 800, 'top': 400}, function () {
                buffer(box, {'left': 200, 'top': 200}, null);
            });
        });
        myTool.$('btn1').addEventListener('click', function (ev1) {
            buffer(box, {'left': 100, 'top': 300}, null);
        });
    });