7

スムーズなトランジションとアニメーションが必要なプロジェクトを行ってきました。私たちは最近、ほぼ 100% の時間を Javascript から CSS アニメーションに移行しました。

translate3d を使用すると、モバイルとデスクトップの両方で非常に滑らかで素敵なアニメーションが提供されることがわかりました。

私の現在のアニメーション スタイルは次のようなものです。

CSS:

.animation-up{
     transform: translate3d(0, -100%, 0);
 }

.animation-down{
     transform: translate3d(0, 100%, 0);
 }

.animation-left{
     tranform: translate3d(-100%, 0, 0);
 }

.animation-right{
     tranform: translate3d(-100%, 0, 0);
 }

最近、話題になっているさまざまなフレームワークを調べ始めました。特定の GreenSock ( http://greensock.com/tweenmax ) と Famo.us ( http://famo.us ) の 2 つ。どちらも素晴らしいフレームレートと素晴らしいパフォーマンスを示しています。

彼らがマルティックス変換を使用していることに気付きました。

Greensock の例 (マトリックスを使用):

<div class="box green" style="transform: matrix(1, 0, 0, 1, 0, 100);"></div>

Famo.us の例 (3D マトリックスを使用):

<div class="famous-surface" style="transform-origin: 0% 0% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 149, 385, 0, 1);"></div>

私の質問は... translate3d とマトリックスの違いは何ですか? translate3D よりもマトリックスを使用すると大幅に改善されますか? さらに良い結果が得られる別の方法はありますか?

私は translate3D に満足していますが、最も滑らかで最高のアニメーションを提供する方法を学びたいと考えており、それが何であるかについてのガイダンスを探しています。

4

3 に答える 3

7

Nit は正しいです。ほとんどの現実世界のシナリオでは、translate3d() と matrix3d() のパフォーマンスは区別できません。最終的に、すべての変換はあるレベルでマトリックスに変換されます。これは、GPU が物事をレンダリングする方法だからです (少なくともそれは私の理解です)。

matrix() と matrix3d() には、位置データだけでなく、回転、スケール、および傾斜も含まれます。

matrix() と matrix3d() の間にパフォーマンスの違いがあるかどうかを尋ねたところ、答えは「時々」です。matrix3d() (または任意の 3D 関連の変換) は、通常、ブラウザーにその要素を "レイヤー化" させます (ピクセルの写真を撮って GPU に保存するようなものと考えてください)。ピクセルが分離されているため、操作が高速になります。残りの画面/レイヤーから。通常、この手法を使用すると、よりスムーズなアニメーションが表示されます。ただし、最初に何かをレイヤー化する (ピクセルを GPU にシャトルする) には、わずかなコストがかかります。

matrix3d() のもう 1 つの欠点は、ほとんどのブラウザーが特定のサイズ (要素の自然なサイズ) でピクセルをキャプチャすることです。繰り返しますが、これは通常、何かをスケールアップしている場合にのみ問題になりますUP。ああ、何かをレイヤー化するとメモリが消費されます。GPU のメモリを超えると、速度が低下する可能性があります。私の経験では、これはめったに起こりません。

GreenSock の GSAP の最近のバージョンでは、最もスムーズな結果が得られる可能性が最も高い手法が自動的に使用されます。位置のみを変更する場合は、translate3d() を使用します。スケーリングして移動する場合は、translate3d() と scale() を使用します。回転やゆがみがある場合は、それが最速であるため、matrix3d() にシフトします。バージョン 1.15.0 の時点で、force3D:"auto" を使用します。これは、レイヤー化の利点を得るためにトゥイーン中に 3D を使用することを意味しますが、アニメーションが終了すると 2D に戻って GPU メモリを解放します。高度に最適化されたシステムです。必要なテクニックを強制的に使用することもできます。

CSS と JS アニメーションのパフォーマンスを分析しているときに、いくつかの興味深い発見に出くわしました。私はあなたがチェックアウトしたいと思うかもしれないスクリーンキャストを記録しました: http://greensock.com/css-performance/ (コメントも必ず読んでください)。

于 2015-02-06T04:03:39.440 に答える
4

translate3d()本質的に、とはどちらmatrix3d()も行列変換です。

translate3d(dx, dy, dz):

サンプル画像 1

matrix3d(a1, a2, a3, a4, b1, b2, b3, b4, c1, c2, c3, c4, d1, d2, d3, d4):

サンプル画像 2

前者は単に要素を移動するための省略形ですが、後者は行列全体を指定できます。どちらも同じ基本構造を使用するため、パフォーマンスはほぼ同じになります (同様の規模の操作の場合)。

于 2015-02-06T00:59:16.807 に答える
2

考慮しなければならないもう 1 つのことは、特に回転を設定している場合、マトリックスをアニメーション化しても、変換をアニメーション化するすべてのオプションが得られるわけではないということです。

最もわかりやすいのは、回転 (0 度) から回転 (360 度) へのアニメーションです。両方の等価行列は同じです (明らかに)。回転で変換を設定する必要があります。そうしないと機能しません。

複雑な変換では、通常、マトリックスを使用して変換を設定しても、期待するアニメーションは得られません。

ただし、タイトルが示すように、翻訳のみを使用する場合、これはすべて問題になります

于 2015-02-06T16:40:14.603 に答える