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

我认为您可以将库react-pose与动画配合使用

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

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

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

如何优化反应动画

1 个答案: