1. /*==ANIMATE动画库==*/
    2. ~function () {
    3.     //=>准备操作CSS样式的方法 GET-CSS/SET-CSS/SET-GROUP-CSS/CSS
    4.     let utils = (function () {
    5.         //=>获取样式
    6.         let getCss = (ele, attr) => {
    7.             let val = null,
    8.                 reg = /^-?\d+(\.\d+)?(px|rem|em)?$/;
    9.             if ('getComputedStyle' in window) {
    10.                 val = window.getComputedStyle(ele)[attr];
    11.                 if (reg.test(val)) {
    12.                     val = parseFloat(val);
    13.                 }
    14.             }
    15.             return val;
    16.         };
    18.         //=>设置样式
    19.         let setCss = (ele, attr, value) => {
    20.             if (!isNaN(value)) {
    21.                 if (!/^(opacity|zIndex)$/.test(attr)) {
    22.                     value += 'px';
    23.                 }
    24.             }
    25.             ele['style'][attr] = value;
    26.         };
    28.         //=>批量设置样式
    29.         let setGroupCss = (ele, options) => {
    30.             for (let attr in options) {
    31.                 if (options.hasOwnProperty(attr)) {
    32.                     setCss(ele, attr, options[attr]);
    33.                 }
    34.             }
    35.         };
    37.         //=>合并为一个
    38.         let css = (...arg) => {
    39.             let len = arg.length,
    40.                 fn = getCss;
    41.             if (len >= 3) {
    42.                 fn = setCss;
    43.             }
    44.             if (len === 2 && typeof arg[1] === 'object') {
    45.                 fn = setGroupCss;
    46.             }
    47.             return fn(...arg);
    48.         };
    50.         return {css}
    51.     })();
    53.     //=>EFFECT：准备运动的公式
    54.     let effect = {
    55.         Linear: (t, b, c, d) => t / d * c + b
    56.     };
    58.     //=>封装动画库
    59.     window.animate = function (ele, target = {}, duration = 1000, callback = new Function()) {
    60.         //=>不传递CALL-BACK，让其默认为一个空函数（回调函数：当动画结束后做什么事，都放到回调函数完成即可）
    61.         if (typeof duration === 'function') {
    62.             //=>我们有四个形参，但是传递的时候只传递三个，最后一个回调函数传递给duration这个参数了，我们需要改一下参数的值
    63.             callback = duration;
    64.             duration = 1000;
    65.         }
    67.         //1.基于TARGET计算出BEGIN/CHANGE
    68.         let begin = {},
    69.             change = {},
    70.             time = 0;
    71.         for (let attr in target) {
    72.             if (target.hasOwnProperty(attr)) {
    73.                 begin[attr] = utils.css(ele, attr);
    74.                 change[attr] = target[attr] - begin[attr];
    75.             }
    76.         }
    78.         //2.实现动画
    79.         clearInterval(ele.animteTimer);//=>在给当前元素设置新的动画之前,先清空原有正在运行的动画(防止多动画共存,把动画的返回值赋值给当前元素的自定义属性，这样只要元素不变，我们不管啥时候在哪执行都可以清除元素的动画)
    80.         ele.animteTimer = setInterval(() => {
    81.             time += 17;
    82.             //=>边界判断
    83.             if (time >= duration) {
    84.                 utils.css(ele, target);
    85.                 clearInterval(ele.animteTimer);
    87.                 callback.call(ele);//=>动画完成后执行CALL-BACK(并且让回调函数中的THIS是当前操作的元素本身)
    88.                 return;
    89.             }
    90.             //=>依托TARGET计算出每个方向的当前位置
    91.             let cur = {};
    92.             for (let attr in target) {
    93.                 if (target.hasOwnProperty(attr)) {
    94.                     cur[attr] = effect.Linear(time, begin[attr], change[attr], duration);
    95.                 }
    96.             }
    97.             utils.css(ele, cur);
    98.         }, 17);
    99.     };
    100. }();