2

アニメートするdivボックスのグリッドがあります。ユーザーがボックスの1つをドラッグした後（グリッドに再配置するため）、画面上を移動します。

現在、私はJQueryを使用して、すべてのdivのcssの左と上の位置を変更し、これを一定の間隔で実行しています。

箱が50個以上あると遅れます。どうすればこれを遅らせることができますか？これに適したアニメーションライブラリはありますか、それとも50ボックスに制限する必要がありますか？

レイアウトの画像： ここに画像の説明を入力してください

4

4 に答える 4

1

正直なところ、jQueryよりも高速なライブラリはたくさんありますが、これをより効率的に機能させるライブラリはありません。問題はjQueryだけではなく、50個の要素がすべて移動/ドラッグ可能であるため、ブラウザーの多くのリソースが必要になるという事実です。

コードを投稿できる場合は、コードを少し高速化するために提案できることがいくつかあるかもしれません。

私が考えることができる2つの最大の問題は、これらのボックスをプログラムで追加し、ページに要素を追加するときにそれぞれのハンドラーを追加した場合と、セレクターを変数に格納しない場合です。それとは別に、私はコードを見る必要があります。

于 2012-07-29T02:58:49.950 に答える
1

パフォーマンスを向上させる方法はいくつかあります。1つは、各ボックスに必要なDOM要素の量を減らすことです。もう1つは、現在のビューポートの外側でボックスをアニメーション化（およびレンダリング）しないことです。表示可能領域の外側にあるすべてのボックスに「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/

于 2012-07-29T03:05:48.627 に答える
1

見て：

jQueryアイソトープ

利用可能な場合はcss3アニメーションを使用したり、jQuery/JSアニメーションを使用したりできるオプションがあります。

アニメーションやアレンジのようなグリッドに便利です。

一部の勇敢な魂は、同位体にもドラッグアンドドロップを追加することができました。http://tyler-designs.com/masonry-ui/（少し不格好ですが動作します）

于 2012-07-29T03:06:02.623 に答える
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 に答える