如何优化反应动画

Question

我正在构建一个交互式地图，在这张地图上有多条汽车路线，用户可以从菜单中选择这些路线。每条汽车路线都是一辆沿着一条路线行驶的汽车的动画。

该应用程序运行良好，但是，有几百个动画，用户可以选择产卵，其想法是，所有选择的动画应该同时运行。

每个动画都是由一个函数定义的，它看起来是这样的.

var animate = function(current) {

    // If animation has not reached limit yet,
    // call the next frame.
    if (counter <= limit) {
        requestAnimationFrame(animate);
    }

    // Do things every second.
    if (current >= (last + 1000)) {

      counter += 1; 

      // Do stuff.

    }
}

每当调用动画时，都会调用该函数并将其添加到事件循环中。根据上面的代码，汽车似乎每秒钟都在移动。但是，如果用户决定生成100个动画，则该函数的100个实例将在后台运行，并显著降低代码的速度。

我的问题是，什么是前端优化技术，可能会派上用场帮助加快我的动画。我所做的一个优化是从setInterval切换到requestAnimationFrame，但我不知道这到底有多大的改善。

还有什么其他技术可以帮助呢？如果我运行100个animate()实例，是否有任何并发或线程技术可能会有所帮助？我不知道前端应用程序的方法是什么。

Answer 1

我想你可以用动画来做反应式

Document：https://popmotion.io/pose/

Example：https://o46l299mkq.codesandbox.io/

Good post：https://medium.com/@joomiguelcunha/amazing-react-animation-with-react-pose-3b67d9eb6e07