2

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

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

如果有超过 50 个盒子，那就太迟了。我怎样才能减少这种滞后？有没有更适合这个的动画库，还是我只需要将它限制为 50 个框？

布局图： 在此处输入图像描述

4

4 回答 4

1

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

这样，无论您有多少个框（高于视口中可以容纳的数量），您都将始终获得相同的性能。

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

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

于 2012-07-29T03:05:48.627 回答
1

看一下：

jQuery同位素

它具有允许您使用 css3 动画（如果可用）或使用 jQuery / JS 动画的选项。

对于像动画和安排这样的网格很方便。

一些勇敢的灵魂也设法在同位素中添加了拖放功能。http://tyler-designs.com/masonry-ui/（有点笨拙但有效）

于 2012-07-29T03:06:02.623 回答
1

老实说，我不知道有什么库可以让你更有效地完成这项工作，尽管有很多库比 jQuery 更快。问题不仅在于 jQuery，还在于您有 50 个元素都可以移动/可拖动，因此需要大量浏览器资源。

如果您可以发布您的代码，我们可能会建议您稍微加快速度。

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

于 2012-07-29T02:58:49.950 回答
1

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

  1. 较新requestAnimationFrame的浏览器允许浏览器处理动画时间以优化 Javascript 动画。而不是使用时间来执行动画，这是 jQuery 框架使用的，你反复回调 requestAnimationFrame。浏览器将使用动画的进度变量调用您的函数，然后您根据进度变量渲染动画的当前阶段。用于智能动画的 requestAnimationFrame对此进行了深入讨论。Google Closure 是我所知道的唯一使用 requestAnimationFrame 的框架，而且它相当重量级。
  2. CSS 动画。jQuery 提供 CSS 动画，许多其他框架也是如此。CSS 动画为您提供硬件加速，因此动画速度要快得多。不幸的是，CSS 动画相对较新，还没有得到很好的支持，因此您可能最终会在旧浏览器上退回到 Javascript 动画，具体取决于您使用的库。
  3. 优化您的 Javascript。不是为网格中的每个框都设置动画，而是将每一行封装在一个 div 中并为整个 div 设置动画。这应该会加快动画速度。我敢肯定，您还可以根据当前的实现进行优化。
于 2012-07-29T03:15:24.093 回答