RaphaelのrequestAnimationFrameをパフォーマンスヒットと呼んでいますか？

Question

私はRaphael.jsに使用されているアニメーションの約50％をかなり頼りにしている、かなりリソースの多いWebアプリケーションに取り組んでいます。残りの部分はWebkitRequestAnimationFrameをWeb Audio APIのコンテキストオーディオコンポーネントとアニメーションを同期させるための.currentTime。

私は現在、ラファエルのソースを見て、それがrequestAnimationFrameも使用しているのを見ています。私が経験している遅れの大部分は、私のアニメーションとラファエルの両方が同時に動いているときに発生するようです。これは、requestAnimationFrameが基本的に描画サイクルごとに2回呼び出されているためですか？

基本的に私は、グラフィカルオブジェクトのアニメーションの独自の実装を元に戻して、既存のrequestAnimationFrameに貼り付ける必要がありますか？

Answer 1

Hmmm私が知っている限り、RAFの全ポイントは、次のレンダリング更新の準備が整うようにすべてを同期することです。私はあなたとまったく同じことをやろうとしています。

仕様を1として：

期待は、ユーザエージェントは、ディスプレイのリフレッシュレートに一致する一定の間隔でのアニメーションタスクソースからタスクを実行することです。より低いレートでタスクを実行すると、アニメーションが滑らかに見えなくなります。より高いレートでタスクを実行すると、ユーザーが目に見える利益を得ることなく余分な計算が行われる可能性があります。

いいえ、いいえ、パフォーマンスヒットではないと言います。

Answer 2

遅いSVGアニメーションで同様の問題が発生しています。私がRAFを理解しているのは、彼らがどこから来てもアップデートを一括して処理するということなので、それはあなたの問題だとは思わない。

私のサイクルの大半は再塗りつぶされていることがわかりました。あなたは再描画をスピードアップするためにJSを賢明に行うことはあまりありません。しかし、透明性のエフェクト、フィルター、画面の広い領域を切り詰めることで、ブラウザー上での操作が簡単になると思います。また、再描画は、更新しているピクセルの量の関数です。私はフルスクリーンのサイトを作っています。ビューポートのサイズを2倍にすると、ペイント時間が2倍になります。