4

私はGreensockのTweenMaxJSとThree.jsを試してきました。どちらのライブラリもrequestAnimationFrame（rAF）を使用しているため、どちらのライブラリでこれを処理するかを決定する必要がありました。

に組み込まれているrAFを使用するThree.jsと、約30 fpsで実行され、非常にスムーズです。

たとえば、使用する場合TweenMax：TweenMax.ticker.addEventListener('tick', animate);約55〜60 fpsで動作しますが、少し途切れがちです。

Three.jsrAFバージョンと同様に期待どおりに実行されるfpsを変更できますTweenMax。TweenMax.ticker.fps(30);

私の質問は、どちらの方法が好まれ、一方が他方よりもベストプラクティスと見なされるかということです。また、Three.jsを選択した場合、rAF実装のfpsを変更できますか？

最後に、より多くのオーディエンスに合うようにfpsをどのように決定しますか？30 fpsに制限することは問題ないように見えますが、少し恣意的です。一部のユーザーは、私が許可しているよりもはるかに高いレートを使用できる場合があります。

アップデート ：

mrdoobとjackからのフィードバックから、私はthree.jsのrAFとTweenMaxを使用したrAFの両方を、アンチエイリアスをオンまたはオフにして試しました。

アンチエイリアス：

Three.js rAF (default) - 30fps smooth.

http://jsfiddle.net/cR7Lx/21/

TweenMax rAF (default) - 55-60fps slightly choppy.

http://jsfiddle.net/cR7Lx/23/

TweenMax rAF (fps(30)) - 30fps smooth.

http://jsfiddle.net/cR7Lx/24/

アンチエイリアスオフ：

Three.js rAF (default) - 30 - 60fps slightly choppy.
TweenMax rAF (default) - 92-120fps slightly choppy.
TweenMax rAF (fps(30)) - 30fps smooth.

違いを説明するためにrequestAnimationFrameが内部でどのように機能するかを知っている人と一緒に行うことができます。今のところ、アンチエイリアスをオンにしてTweenMax30fpsまたはThree.jsのいずれかを使用します。

4

2 に答える 2

3

明確にするために、デフォルトの TweenMax RAF の動作は fps に上限を設けていません。なぜなら...まあ...それがそもそも requestAnimationFrame のポイントです-これは、ブラウザが指示するものであることを意図しています (通常は約60fps）。TweenMax.ticker.fps()で特定の fps を設定すると、単純に上限が設定されます(TweenMax.ticker.useRAF(false)を設定しない限り、設定した fps にできるだけ近づけるためにsetTimout()が使用されます)。設定）。

誰かが、スムーズにするために TweenMax で fps を設定する必要があると言っていることに気付きました。それが真実ではないことを明確にしたかっただけです。そうすると、RAF の更新が速すぎる場合にスキップされます。想像できませんそれがどのようにスムーズになるか。それはおそらく反対のことをするでしょう。

通常のブラウザーのリフレッシュ レートよりもフレーム レートを下げたい場合にのみ、TweenMax.ticker.fps()を使用します。これも通常は約 60 fps です。最もスムーズな結果を求めている場合は、おそらく TweenMax のデフォルト設定をそのまま使用します。requestAnimationFrame をオフにして、非常に高い fps ( TweenMax.ticker.useRAF(false); TweenMax.ticker.fps(100) ) を使用することもできますが、バッテリーの向上など、RAF のすべての利点が失われるという欠点があります。タブが非アクティブなときのモバイル デバイスでの生活、ネイティブ ブラウザの更新と同期された更新など。

ぎくしゃくした動作の最大の原因は、JavaScript アニメーション エンジンとは関係のない、ブラウザーでのグラフィックス レンダリングです。

私は Three.js に詳しくないので、その機能や、他の機能を駆動するためにどのオプションを使用するのが良いかについて話すことはできません (申し訳ありません)。私が言えることは、私はGreenSockの大ファンです（笑）

于 2012-08-23T00:00:48.750 に答える
0

実際に両方の実装を調べたところ、実際には非常に似ています。どちらもこの実装を使用していますが、わずかな違いがあります。

Three.js の実装は、最後の呼び出しを計算し、次の呼び出しを (16 ms - lastCall) 遅らせて fps 60 を修正します。

TweenMax の実装は、最初は fps を修正しません。代わりに、手動で fps を呼び出す必要があります。それが途切れ途切れの状況になります。遅延時間を調整するには、常に適切な fps 値 (多くても少なくても構いません) を指定する必要があるためです。

編集 ：

TweenMax の動作を編集する必要があります。これは、fps が定義されていないときにデフォルトの fps を 60 に設定するティッカー クラスの最後にあるコンストラクター呼び出し this.fps(fps) を見逃したためです。

于 2012-08-22T14:26:53.720 に答える