javascript - 为多个 div 设置动画的最佳 JavaScript 库

Question

我有一个 div 框网格，我将对其进行动画处理。在用户拖动其中一个框(重新对齐到网格中)后，它们将在屏幕上移动。

目前我正在使用 JQuery 更改所有 div 的 css 左侧和顶部位置，并每隔一段时间运行一次。

如果有超过 50 个盒子，它是滞后的。我如何减少这种延迟？有没有更适合这个的动画库，还是我只需要将它限制在 50 个框内？

布局图片:

Answer 1

您有几个选项可以优化性能。

1. 较新的浏览器具有 requestAnimationFrame，可让浏览器处理动画计时以优化 Javascript 动画。不是使用时间来执行动画，这是 jQuery 框架使用的，而是重复回调到 requestAnimationFrame。浏览器将使用动画的进度变量调用您的函数，并且您根据进度变量渲染动画的当前阶段。 requestAnimationFrame for smarting animating深入讨论这个问题。 Google Closure 是我所知道的唯一使用 requestAnimationFrame 的框架，而且它相当重量级。
2. CSS 动画。 jQuery 提供 CSS 动画，许多其他框架也是如此。 CSS 动画为您提供硬件加速，因此动画速度更快。不幸的是，CSS 动画相对较新且尚未得到很好的支持，因此您可能最终会在旧版浏览器上回退到 Javascript 动画，具体取决于您使用的库。
3. 优化您的 Javascript。不是为网格中的每个框设置动画，而是将每一行封装在一个 div 中并为整个 div 设置动画。这应该会稍微加快动画速度。我敢肯定还有其他方法可以根据您当前的实现进行优化。