0

キャンバスを使用して、画面に描画されるツリーをアニメーション化する Web アプリがあります。これは、いくつかの三角関数の計算を連続して実行することによって行われます。「成長」ボタンをクリックすると、ユーザーが変更できる特定の属性を持つ木の成長のアニメーションが表示されます。アプリケーションはhttp://pastehtml.com/view/c85mxfgcj.htmlで確認できます。

問題は、「経過時間」(通過する反復回数) を高く設定しすぎると、コンピューターが実行する必要がある計算のためにアニメーションが遅れ始めることです。私は2つのことを疑問に思っていました：

  1. ユーザーに表示する前にアニメーションを事前にレンダリングする方法はありますか?
  2. 既にレンダリングされた木があり、それを画面上で動かしたい場合、フレームごとに木を再描画しなくてもできるようにする方法はありますか?

ありがとう。

4

1 に答える 1

1

1: あなたは調べたいと思うかもしれませんvar fragment = document.createDocumentFragment();
2: はい、css 経由で、はるかに高速です!

このユーチューブ動画は一見の価値があると思います。

幸運を

更新: 2013 年 1 月 9 日 これにつまずいたところです。
css3 には、ステップを使用したアニメーション機能があります。
基本的に、(キャンバスで) スプライトを作成し、css3 を使用して要素の background-property を使用してスプライトをアニメーション化します。かなりクールです（これを行うには、最適化されたブラウザ独自のコードを使用する必要があります。したがって、javascript/canvas の場合ほどユーザーの CPU に負荷をかけません）。ただし、まだアニメーションgifを作成していません（ただし、gifとpnpは非常に似ているため、ライブラリを使用して、プロトコル
を使用してそのgifをフィードすることも可能であると思います）が、最終結果は同じように見えますdata:image/gif(モダン) ブラウザ。

HTML: <div class="hi"></div>または<img src="transparent.gif" class="hi">

CSS3:

.hi { 幅: 50px; 高さ: 72px; background-image: url("http://files.simurai.com/misc/sprite.png");

-webkit-animation: play 1s steps(10) infinite;
   -moz-animation: play 1s steps(10) infinite;
    -ms-animation: play 1s steps(10) infinite;
     -o-animation: play 1s steps(10) infinite;
        animation: play 1s steps(10) infinite; }

@-webkit-keyframes play { from { background-position: 0px; } から { 背景位置: -500px; } }

@-moz-keyframes play { from { background-position: 0px; } から { 背景位置: -500px; } }

@-ms-keyframes play { from { background-position: 0px; } から { 背景位置: -500px; } }

@-o-keyframes play { from { background-position: 0px; } から { 背景位置: -500px; } }

@keyframes play { from { background-position: 0px; } から { 背景位置: -500px; } }

例jsfiddle。

于 2012-08-14T16:24:47.360 に答える