CSS3を使用して60 FPSモバイルアニメーションを実現します

キーポイント

• スムーズなモバイルアニメーションでは、クリティカルレンダリングパス（CRP）の合成ステップに注意を払う必要があり、transformやopacityなどの属性を使用して、前のステップの負担を増やすことを避けます。
• left、top、right、bottom、transformアニメーショントランジションの属性を使用しないでください。アニメーションの先頭にあるアニメーションは、以前にレイヤーの安定性を決定します。
• 1秒あたり60フレームの安定したフレームレートを達成するには、GPUを使用してアニメーションをレンダリングし、will-change属性を介して別のレイヤーに要素を宣伝し、ブラウザーのレイアウトレンダリングまたは描画を避けます。

この記事は、もともとOutSystemsで公開されました。 SitePointをサポートしてくれたパートナーに感謝します。

モバイルアプリでアニメーションを簡単に作成できます。また、次のヒントをフォローすると、モバイルアプリでアニメーション化するのも簡単です。最近では、誰もがモバイルデバイスでCSS3アニメーションを使用していますが、多くの人が誤って使用しています。多くの場合、ベストプラクティスは開発者によって見落とされています。これは、これらの慣行がなぜ存在するのか、なぜ彼らがそれほど強くサポートされているのかを人々が理解していないためです。機器の仕様は非常に広いです。したがって、コードが最適化されていない場合、ほとんどのユーザーに標準のエクスペリエンスを提供します。覚えておいてください：一部のハイエンドのフラッグシップデバイスは強力ですが、世界のほとんどの人は、これらの高性能デバイスと比較して、LCD画面を備えたAbacusのようなデバイスを使用しています。 CSS3の力を正しく利用できるようにしたいと思います。これを行うには、最初に何かを理解する必要があります。

タイムラインの理解要素をレンダリングおよび処理するときにブラウザは何をしますか？このタイムラインは、キーレンダリングパスと呼ばれます

画像出典：www.csstriggers.com

スムーズなアニメーションを実現するには、前のステップの負担を増やすのではなく、合成ステップに影響するプロパティの変更に焦点を当てる必要があります。

スタイル

1. ブラウザは、要素に適用されるスタイルの計算を開始します - スタイルを再計算します。

レイアウト

2. 次のステップでは、ブラウザは各要素の形状と位置、つまりレイアウトを生成します。ここでは、ブラウザは幅や高さなどのページプロパティ、たとえばマージンまたは、、、left、top、rightを設定します。 bottom

3. drawブラウザは各要素のピクセルをレイヤーに入力します。これは、これらのプロパティを指します：box-shadow、border-radius、color、background-color、

   など。

4. Composition これは、アニメーションを実行する場所です。これは、ブラウザがすべてのレイヤーを画面に描画するときだからです。 最新のブラウザは、transformおよびopacity属性を使用して、4つのスタイルの属性をうまくアニメーション化できます。

   • 位置 - transform: translateX(n) translateY(n) translateZ(n);
   • ズーム - transform: scale(n);
   • 回転 - transform: rotate(ndeg);
   • 不透明 - opacity: n;

1秒あたり60フレームを達成する方法

これを覚えておいてください、今度はあなたの袖を転がして一生懸命働く時です。 HTMLから始めましょう。非常にシンプルな構造を作成し、クラスにapp-menuに配置します。 layout

<div>
  <div></div>
  <div>
    <div></div>
  </div>
</div>

間違った方法

.app-menu {
  left: -300px;
  transition: left 300ms linear;
}

.app-menu-open .app-menu {
  left: 0px;
  transition: left 300ms linear;
}

私たちが変更したプロパティを見ましたか？

、left、top、right、bottomの属性を使用する必要があります。これらは、ブラウザが毎回レイアウトパスを実行するように強制し、すべての要素の子要素に影響するため、スムーズなアニメーションを作成しません。結果は次のとおりです

このアニメーションは十分にスムーズではありません。 DevToolsのタイムラインを使用して、舞台裏で何が起こっているのかを確認しました。結果は次のとおりです。

緑の領域は、アニメーションをレンダリングするのにかかる時間を示します。このデータは、不規則なフレームレートとパフォーマンスの低下を示しています。 「緑のバーはfpsを意味します。ハイバーはアニメーションが60 fpsでレンダリングされることを意味します。低いバーは60 fps未満を意味します。そのため、理想的には、緑のバーが常にタイムライン全体で高く維持されたいです。赤いバーもst音を意味します。進行状況を測定する別の方法は、これらの赤いバーを排除することです。

変換を使用して

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
}
.app-menu-open .app-menu {
  -webkit-transform: none;
  transform: none;
  transition: transform 300ms linear;
}

属性は、レイアウトではなく、合成ステップに影響します。ここでは、アニメーションが始まる前にレイヤーが安定していることをブラウザに通知します。そのため、アニメーションをレンダリングする際の障害物は少なくなります。

transform

これは、タイムラインが反映する方法です：

結果が良くなり始め、フレームレートは安定しているようであるため、アニメーションはよりスムーズに実行されます。

gpu

でアニメーションを実行します

次に、次のレベルに進みましょう。本当にスムーズに実行するために、GPUを使用してアニメーションをレンダリングします。

<div>
  <div></div>
  <div>
    <div></div>
  </div>
</div>

一部のブラウザはまだフォールバックとしてtranslateZ()またはtranslate3d()を必要としますが、will-change属性は将来です。このプロパティは要素を別のレイヤーに促進するため、ブラウザはレイアウトのレンダリングまたは描画を検討する必要はありません。

それがどれほどスムーズかわかりますか？タイムラインはこれを確認しています：

アニメーションのフレームレートはより一定であり、アニメーションのレンダリング速度が高速になります。しかし、最初はまだ長いフレームがあります。最初は少しボトルネックがあります。最初に作成したHTML構造を覚えていますか？ javascriptでapp-menudiv：

を制御する方法を見てみましょう

.app-menu {
  left: -300px;
  transition: left 300ms linear;
}

.app-menu-open .app-menu {
  left: 0px;
  transition: left 300ms linear;
}

ああ！ここでは、クラスをlayoutdivに追加することで問題を引き起こしています。これにより、ブラウザはスタイルツリーを再生します。これは、レンダリングパフォーマンスに影響します。

1秒あたり60フレームでのバターの滑らかな溶液

ビューポート領域の外にメニューを作成した場合はどうなりますか？隔離領域にメニューを置くことで、アニメーションに必要な要素のみに影響を与えることが保証されます。したがって、次のHTML構造を使用することをお勧めします

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
}
.app-menu-open .app-menu {
  -webkit-transform: none;
  transform: none;
  transition: transform 300ms linear;
}

次に、メニューのステータスをわずかに異なる方法で制御する必要があります。 javaScriptの

関数を使用して、アニメーションの最後に削除されたクラスのアニメーションを操作します。 transitionend

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
  will-change: transform;
}

すべてをまとめて結果を確認しましょう。これは完全なCSS3対応の例です。すべてが適切な場所にあります：

function toggleClassMenu() {
  var layout = document.querySelector(".layout");
  if(!layout.classList.contains("app-menu-open")) {
    layout.classList.add("app-menu-open");
  } else {
    layout.classList.remove("app-menu-open");
  }
}
var oppMenu = document.querySelector(".menu-icon");
oppMenu.addEventListener("click", toggleClassMenu, false);

タイムラインは私たちに何を示していますか？

それはすべて緑色のストリップです、ベイビー。実用的な例を見たいですか？ここをクリック。 （実際のリンクはここに挿入する必要があります）

（モバイルアニメーションに関するFAQセクションをここに追加する必要があります。コンテンツは元のドキュメントのFAQセクションと一致しています）

以上がCSS3を使用して60 FPSモバイルアニメーションを実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。