前端进阶：利用JS实现多元素时间轴动画

.div1 {
    width: 100px;
    height: 100px;
    background: red;
    animation: changeColor 2s;
}
@keyframes changeColor {
    0% {background: red;}
    50% {background: yellow;}
    100% {background: blue;}
}

.div1 {
    width: 100px;
    height: 100px;
    background: red;
    animation: changeColor 2s forwards;
}
@keyframes changeColor {
    0% {background: red;}
    50% {background: yellow;}
    100% {background: blue;}            
}
.div2 {
    width: 100px;
    height: 100px;
    background: pink;
    animation: changeWidth 4s forwards;
}
@keyframes changeWidth {
    0% {width: 100px} 
    50% {width: 100px} 
    100% {width: 200px}            
}

var anim = [ 
    { // 动画对象，可以多个
        dom: document.getElementById('a1'), // dom对象
        anim: [ // 动画数组，里面可为多个对象
            {
                style: 'height', 
// 要改变的样式名称如width,height

                from: '10rem', // 样式的起始值要和to保持一致
                to: '20rem', // 样式的目标值要和from保持一致
                start: 0, // 开始时间 毫秒
                end: 100, // 结束时间 毫秒
            },
            {
                style: 'width',
                from: '10rem',
                to: '20rem',
                start: 100,
                end: 200,
            },
            {
                style: 'transform',
                from: 'rotate(20deg)',
                to: 'rotate(40deg)',
                start: 0,
                end: 2000,
            }                        
        ]
    },
    {
        dom: document.getElementById('a2'),
        anim: [
            {
                style: 'background',
                from: 'rgba(0.0, 0.0, 0.0, 1)',
                to: 'rgba(255, 0, 100, 0.5)',
                start: 0,
                end: 3000,
            }
        ]
    },
];
timeLineAnim(anim, function () {
    console.log('animation finished');
});

function timeLineAnim(arr, cb) {
    /*
        initData: 对数据进行初始化，将from、to中的信息转为数字，计算出动画的个数

        setCss: 逐帧执行，根据传入的单个动画对象和每帧的时间间隔，计算出当前帧的样式，并修改元素的style值
    */
    function initData(obj) {
        var reg = /[\d\.]+/g;
        var numArrFrom = obj.from.match(reg);
        var numArrTo = obj.to.match(reg);
        if (!numArrFrom || !numArrTo || numArrFrom.length == 0 || numArrTo.length == 0 || numArrFrom.length != numArrTo.length) {
            console.warn('数据输入错误');
        }
        for (var i = 0; i < numArrFrom.length; i++) {
            numArrFrom[i] = parseFloat(numArrFrom[i]);
            numArrTo[i] = parseFloat(numArrTo[i]);
        }
        var strArr = obj.from.split(reg);
        if (numArrFrom.length <= 0) { return; };
        animCount++;
        return {
            strArr: strArr,
            numArrFrom: numArrFrom,
            numArrTo: numArrTo,
            totalLength: strArr.length + numArrFrom.length,
            isEnd: false,
        }
    }

    function setCss(obj, timeCount) {
        var styleStr = '';
        var tempCount = animCount;
        // 将对象的多个动画，根据时间计算出样式，并合并
        for (var i = 0; i < obj.anim.length; i++) {
            var target = obj.anim[i];
            if (timeCount > target.start && !target.initData.isEnd) {
                // 根据起止时间 计算出当前动画进度
                var percent = (timeCount - target.start) / (target.end - target.start);
                if (percent >= 1) {
                    percent = 1;
                    target.initData.isEnd = true;
                    tempCount--;
                }
                styleStr += getValue(percent);
            }
        }
        obj.dom.style.cssText += ';' + styleStr;
        animCount = tempCount;
        // 这里进行单个动画每帧样式的生成，这里是匀速运动
        function getValue(percent) {
            var numFrom = target.initData.numArrFrom;
            var numTo = target.initData.numArrTo;
            var arr = [];
            for (var i = 0; i < numFrom.length; i++) {
                arr.push(numFrom[i] + (numTo[i] - numFrom[i]) * percent);
            }
            var numIndex = 0;
            var strIndex = 0;
            var turnForNum = false;
            var str = target.style + ':';
            for (var i = 0; i < target.initData.totalLength; i++) {
                if (turnForNum) {
                    str += arr[numIndex];
                    numIndex++;
                    turnForNum = false;
                }
                else {
                    str += target.initData.strArr[strIndex];
                    strIndex++;
                    turnForNum = true;
                }
            }
            return str + ';';
        }
    }

    // 主体逻辑: 初始化数据、帧动画、动画结束执行回调
    var animCount = 0;
    for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr[i].anim.length; j++) {
            arr[i].anim[j].initData = initData(arr[i].anim[j]);
        }
    }
    this.timer && cancelAnimationFrame(this.timer);
    var _this = this;
    (function animate(timeCount) {
        if (animCount > 0) {
            for (var i = 0; i < arr.length; i++) {
                setCss(arr[i], timeCount);
            }
            _this.timer = requestAnimationFrame(animate);
        }
        else {
            cancelAnimationFrame(_this.timer);
            cb && cb();
        }
    })();
}