1

私はhtml5/CSS3 / jqueryの初心者で、これを作成しています（まだ完了していません）： http ：//catherinearnould.sio4.net/autres/kat/ 問題は、パーティクルを含む大きなキャンバスのためです。 、アニメーションは可能な限り流動的ではありません。ですから、退屈している場合は、遠慮なく私のコードを見て、流動性を改善するためのアドバイスをください^^

どうもありがとう！

4

3 に答える 3

1

setTimeout() の代わりに RequestAnimationFrame() を使用すると、処理がスムーズになる可能性があります。スマート アニメーションについては、ポール アイリッシュのブログ投稿requestAnimationFrame を参照してください。

于 2012-01-12T21:18:38.597 に答える
0

パフォーマンスの大幅な低下は、透明度、影、丸みを帯びた角など、ライブで計算/レンダリングされた CSS 属性が原因である可能性が最も高いです。

また、リフローを引き起こす DOM 要素 (アニメーションなど) の変更にはコストがかかることに注意してください。 http://code.google.com/speed/articles/reflow.htmlを参照してください。

これを実行した直後に大きな違いが見られます：

$('*').css({backgroundColor:'transparent', opacity:1, boxShadow:'none'});

可能であれば、すべての (半) 透明で丸みを帯びたグラフィックを同等の png 画像に置き換えます。

于 2012-01-13T01:36:50.143 に答える
0

javascript(jQuery) を使用するのではなく、一部のアニメーションに css3 トランジションを使用し、新しいクラスを要素に削除および追加してスタイルを変更することも考えられます。古いブラウザーと IE のフォールバックとして jQuery を使用します。

http://www.w3.org/TR/css3-transitions/

http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

これにより、ブラウザはレンダリングを実行できるようになり、場合によっては iOS のように、レンダリングのためにハードウェア アクセラレーションを取得できます。

キャンバス要素については、私はそれについてほとんど経験がありませんが、あなたが作成しているその効果に興味があります. しかし、最初の巨大なキャンバス アニメーションは少し多すぎると思います。すでに多くのことが行われているので、その効果は必要ないのでしょうか? あくまでもユーザーとしての意見です。

于 2012-01-13T02:02:23.220 に答える