キーポイント

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

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

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

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

畫像出典：www.csstriggers.com

スムーズなアニメーションを?qū)g現(xiàn)するには、前のステップの負(fù)擔(dān)を増やすのではなく、合成ステップに影響するプロパティの変更に焦點(diǎn)を當(dāng)てる必要があります。

スタイル

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

レイアウト

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

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

   など。

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

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

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

これを覚えておいてください、今度はあなたの袖を転がして一生懸命働く時(shí)です。 HTMLから始めましょう。非常にシンプルな構(gòu)造を作成し、クラスに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の屬性を使用する必要があります。これらは、ブラウザが毎回レイアウトパスを?qū)g行するように強(qiáng)制し、すべての要素の子要素に影響するため、スムーズなアニメーションを作成しません。結(jié)果は次のとおりです

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

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

変換を使用して

.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

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

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

gpu

でアニメーションを?qū)g行します

次に、次のレベルに進(jìn)みましょう。本當(dāng)にスムーズに実行するために、GPUを使用してアニメーションをレンダリングします。

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

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

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

アニメーションのフレームレートはより一定であり、アニメーションのレンダリング速度が高速になります。しかし、最初はまだ長いフレームがあります。最初は少しボトルネックがあります。最初に作成したHTML構(gòu)造を覚えていますか？ 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フレームでのバターの滑らかな溶液

ビューポート領(lǐng)域の外にメニューを作成した場合はどうなりますか？隔離領(lǐng)域にメニューを置くことで、アニメーションに必要な要素のみに影響を與えることが保証されます。したがって、次のHTML構(gòu)造を使用することをお?jiǎng)幛幛筏蓼?

.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の

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

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

すべてをまとめて結(jié)果を確認(rèn)しましょう。これは完全な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モバイルアニメーションを?qū)g現(xiàn)しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。