如何实现动画编排的功能

[LinkXSystem]

思考：任意子元素的动画是独立的或者相互关联的，如同 cascade 这样的效果应该如何实现

[LinkXSystem]

目前从应用的情况来看，其实关键在于动画帧的实现，此前考虑的方式，是使用队列的方式，优先切割完成对应的动画帧，然后定时运行，切换的方式基于对应的函数来进行。

但问题是维护队列实际上是一个问题。

而在了解了 requireAnimationFrame 函数，之后其实这个问题可以转化为 时间 t 和 位置 x 的函数关系。这个函数便是我们的 css 的 animation 中使用的缓冲函数。

[LinkXSystem]

通用的 Animation 函数的实现：

function animate({ timing, draw, duration }) {
    let start = performance.now();

    requestAnimationFrame(function animate(time) {
        // 计算时间比例
        let timeFraction = (time - start) / duration;
        if (timeFraction > 1) timeFraction = 1;

        // 用 timing 来调节进度
        let progress = timing(timeFraction)
        draw(progress);

        if (timeFraction < 1) requestAnimationFrame(animate);
    });
}

参考文章：JavaScript Animations

[LinkXSystem]

目前从应用的情况来看，其实关键在于动画帧的实现，此前考虑的方式，是使用队列的方式，优先切割完成对应的动画帧，然后定时运行，切换的方式基于对应的函数来进行。

但问题是维护队列实际上是一个问题。

而在了解了 requireAnimationFrame 函数，之后其实这个问题可以转化为 时间 t 和 位置 x 的函数关系。这个函数便是我们的 css 的 animation 中使用的缓冲函数。

如果考虑暂停的话，也不一定是个好办法，维护队列过于沉重，不然转化为函数与时间的计算，而我们只需要维护时间状态即可