大きなキャンバスにHTML5流体パーティクルを作成する

私はhtml5/CSS3/jqueryの初心者です： http://catherinearnould.sio4.net/autres/kat/ パーティクルのある大きなキャンバスのため、アニメーションはできるだけ流動的ではありません。あなたが退屈な場合は、私のコードを見て、私に流動性を改善するためのアドバイスを躊躇しないでください^^大きなキャンバスにHTML5流体パーティクルを作成する

多くの感謝！

出典

2012-01-12 Kateriine

setTimeout（）ではなくRequestAnimationFrame（）を使用しているものは、スムーズにする可能性があります。彼のブログポストrequestAnimationFrame for smart animatingのPaul Irishを参照してください。

出典

2012-01-12 21:18:38 Maurice

偉大な、私はこれを試してみましょう！ – Kateriine

さて、やったが、ちょっとだけ良い。私はそれが背景の画像のためだと思う – Kateriine

...そしてもう一つの問題は、cancelAnimationFrameはChromeでのみ動作しているということです：/ – Kateriine

大きなパフォーマンスヒットは、最も可能性の高いCSSは、透明性、影や角の丸いとして属性をレンダリング/ライブ、計算によって引き起こされます。

またそれを認識してリフロー（例えば、アニメーションのような）高価である引き起こすDOM要素に変わり、http://code.google.com/speed/articles/reflow.htmlを参照。

私はこれを実行した後に大きな違いを参照してくださいすることができます場合は

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

、同等のPNGイメージを持つすべての（半）透明で丸みを帯びたグラフィックスを交換してください。

出典

2012-01-13 01:36:50 bennedich

オレンジ半透明とアニメーションの順番を変更しました。ありがとう！ – Kateriine

また、かなりの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のようにいくつかのケースでは、あなたは、ハードウェアレンダリングのために加速することができます。 canvas要素については

、私はそれで少し経験を持っているが、私はあなたが作成しているという効果に興味があります。しかし、私は、最初の大規模なキャンバスのアニメーションは少しだと思います。そんなに多くのことが起こっています。その効果は必要ないかもしれません。ユーザーとしての私の意見。

出典

2012-01-13 02:02:23 einar

まあ、実際にはあなたが正しいです、私は背景のためのjsの代わりにCSS3を使用しなければならないと思う。（私が背景をオフにすると、小銭入れは完璧に実行されています）私はIEのための別のスクリプトを作成します（ダミー、問題はそれで終わるだろうと教えました） – Kateriine

Ok CSS3の背景を試しましたが、「それは文字列なので」（私が読んだように）。だから、アニメーションの順番を変えて、それは私のためにかなりいいね^^ – Kateriine

大きなキャンバスにHTML5流体パーティクルを作成する

答えて

関連する問題