用于动画多个div的最佳JavaScript库

Question

我有一个div框的网格，我将动画。在用户拖动其中一个框（重新对齐到网格）后，它们将在屏幕上移动。

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

如果有超过50个盒子，那就太迟了。我如何减少这种迟钝？是否有更好的动画库，或者我只需要将其限制为50个盒子？

布局图：  

Answer 1

老实说，我不知道任何能够让你更有效地工作的库，尽管有许多库比jQuery更快。问题不仅仅是jQuery，事实上你有50个元素都是移动/可拖动的，因此需要大量的浏览器资源。

如果你可以发布你的代码，我们可以建议一些事情来加快它的速度。

我能想到的两个最大的问题是，如果您以编程方式添加这些框，并在将元素添加到页面时为每个框添加处理程序，并且如果不将选择器存储在变量中。除此之外，我必须看到代码。

Answer 2

有几种方法可以提高性能。一种方法是减少每个盒子所需的DOM元素数量。另一种方法是不在当前视口之外设置（和渲染）框。给可视区域外的所有框“display：none;”并在开始新动画之前将其排除。如果你想更进一步，你可以开始回收盒子而不是在用户滚动页面时显示和隐藏它们。

这样，无论你拥有多少个盒子，你都将获得相同的性能（高于你可以放入视口的数量）。

这种技术称为UI虚拟化。有几个项目使用它：http://github.com/mleibman/SlickGrid/wiki。当你需要渲染很多元素（数百，数千，数百万）时，它非常有用。但要做到这一点需要相当多的工作。我不知道任何易于插入的通用工作组件。我试图找到一篇解释它的文章。这是我现在唯一可以提出的，但它适用于Silverlight：http://www.silverlightshow.net/items/Virtualization-in-Silverlight-4-RC.aspx

也试试这个jQuery插件。使用常规的“animate”方法，它会尝试尽可能使用（硬件加速的）CSS动画：http://playground.benbarnett.net/jquery-animate-enhanced/

Answer 3

看看：

jQuery isotope

它有一些选项允许你使用css3动画（如果可用）或使用jQuery / JS动画。

方便网格动画和安排。

一些勇敢的灵魂也设法增加拖拉同位素。 http://tyler-designs.com/masonry-ui/（有点笨重但有效）

Answer 4

您可以选择一些优化效果。

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