問題タブ [requestanimationframe]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 弱いマシンでは requestAnimationFrame の実行が遅くなります。回避策はありますか?
だから、私はアニメーションをやっています(ウェブサイト/ウェブページではありません!)Javascript
. アニメーションについては、必要なものに対して十分に機能しなかったため、requestAnimationFrame
代わりにを使用します。setInterval
setInterval
ただし、requestAnimationFrame
十分な電力のデバイスでは問題なく動作しますが、低速のデバイスは標準の 60 FPS に追いつくことができないため、アニメーション全体の時間が遅くなります。
一定の時間枠でアニメーションを動作させ、それがどれだけ追いつくかによって FPS を変化させる方法はありますか? 他のアイデアも大歓迎です。
(注:コードを投稿したくないので、これについて私の言葉を聞いてください。アイデアが欲しいだけです)
javascript - jQuery animate scrollTop vs requestAnimationFrame - パフォーマンス
多くの CSS 効果と CSS アニメーションが適用された多くの画像を含むページがある場合window.scrollTo
、requestAnimationFrame
ループ内で使用することと、jQuery を使用$("html").animate({ scrollTop: "x" })
してプログラムでページを特定のポイント "x" までスクロールすることで、パフォーマンスが向上しますか?
Tl;DR — rAF +window.scrollto()
対.animate({scrollTop: "x"})
パフォーマンス
ありがとう!
javascript - requestAnimationFrame は他のスクリプトと同時に実行されますか?
requestAnimationFrame は、ユーザー入力または setTimeout/setInterval から、通常実行される他の JavaScript と同時にキューに入れられた関数を実行しますか?
jquery - jQueryのデバウンスされたスライドショーはスライドをスキップします
個人のホームページ用のプラグインを作成しました。このプラグインは、一連の要素をスクロールして、各要素のoffsetTopにスナップすることになっています。requestanimationframe
を
使用してスクロールイベントをデバウンスしていますが、スライドがスキップされることがあり、その理由がわかりません。さらに、ChromeとSafariでは、window.pageYOffsetが0より小さく、ドキュメントの高さよりも大きくなる可能性があるという問題があります。これは、これらのブラウザーがMac(タッチパッドを使用)で使用している何らかの緩和のためです。これをどのように処理しますか?
コードは次のとおりです。
誰かが助けてくれることを願っています。ありがとう。
html - FirefoxでのrequestAnimationFrameのちらつきの問題
キャンバスを斜め方向に横切る円をアニメートしようとしています。requestanimationframeを使用しています。すべてのブラウザでスムーズに動作しますが、Firefoxでは動作しません。アニメーションの進行中は常にちらつきがあります。誰かが私が何をしているのか教えてください。Firefoxで少なくとも妥当な速度のスムーズなアニメーションが必要です。
これが私の簡単なコードです、多分誰かが私がここで欠けているものを指摘することができます..:
javascript - リクエストアニメーション枠を使ってキャンバスに線画をアニメーションさせる
リクエストアニメーション枠を使って線画アニメーションを作ろうと奮闘中です。setInterval 関数を使用している間はすべて正常に動作していましたが、リクエスト アニ フレームがはるかに最適化されており、間隔内のすべての関数をこの方法で記述する必要があることをどこかで読みました。
だからここに私のコードがあります:
var topMinX = 3; var topMaxX = 75; var topMinY = 2;
var topMaxY = 2; 変数分; 変数最大;
問題は、xMin 値が増加しないことです。常に 5 のアラートが表示され、反復ごとに 2 ずつ増加すると予想していました。基本的には四角を描きたいだけなので、斜めの動きは必要ないので、方向パラメータを追加しました。
私はキャンバスに不慣れで、アニフレームをリクエストしているので、どんな助けも役に立ちます.
javascript - キャンバスがクロムで機能するのに、Firefox で機能しないのはなぜですか?
視差スクロールを利用したウェブサイトを開発しています。クロムでは美しく見えますが、キャンバスに描画したい画像はどれもFirefoxでレンダリングされていません. 私は困惑しています。
HTMLは次のとおりです。
そしてJavascript:
ありがとうございました!
html5-canvas - CSS トランジションとアニメーションのパフォーマンスを測定する方法
jQuery のアニメーション機能と純粋な CSS3 トランジションのパフォーマンスを比較したい。パフォーマンスを測定するrequestAnimationFrame APIがあることがわかりましたが、canvas 要素でしか使用できないようですか?
CSS3 やキャンバスと比較して、絶対配置のパフォーマンスをテストする良い方法はありますか?
stats.js は役に立ち、信頼できますか? あなたの経験は何ですか?
このjsPerf テストを作成しました。残念ながら、jQuery.on メソッドは実行されません。:(
three.js - requestAnimationFrameを使用したwebGL応答しないスクリプト
こんにちは、webglとrequestAnimationFrameの使用に問題があります。デバッグを続行すると、アニメーションは正常ですが、スクリプトを自由に実行するとすぐに、ブラウザから応答しないスクリプトエラーが発生します。
これが私のhtmlです:
私の地球のスクリプトファイル
とループコード:
html - Firefox 19: requestAnimationFrame と HTML5 キャンバスを使用すると、フレーム レートが不安定になります。FPSは60以上
HTML5 キャンバスを使用してゲームを開発しているので、requestAnimationFrame を使用して呼び出すゲーム ループがあります。Chrome または IE を使用すると、正常に動作し、安定した 60 fps でスムーズに動作します。Firefox で実行すると問題が発生します。FPS カウンターが 60 fps を超え (65 ~ 70 前後に設定)、プレイ体験はまったくスムーズではありません。実際に 60 fps を超える場合は、いくつかのフレームが失われている可能性があります。これは私がゲームループに使用しているコードです:
これについて説明はありますか?これは正常なことかもしれませんが、私は他のゲームをプレイしていますが、Firefox ではまったくこのように動作しないようです。
私はこの解決策を試しました:
http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animationing
しかし、最終結果は同じです。