ランタイム パフォーマンスの応用科学

昨年末に Chrome Dev Summit のサイトを作成しました。マテリアル デザインの外観にしたかったのは、優れたデザイン言語であり、作成したいサイトの種類にも適していると思ったからです。しかし、他の新しいデザイン言語と同様に、考慮すべき質問、課題、決定があり、特にウェブの慣例に対応する場合はそうする必要があります。

サイトの作成が特に難しかったのが、カードをクリックしたときに「テイクオーバー」効果があったことです。

このような効果を 60 fps で実行させるには、ある程度の思考とプロトタイピング、そしていくつかの興味深い妥協点が必要でした。Chrome Dev Summit では、この効果についてお話を伺い、実現に至った経緯について残虐なことを詳しく説明しました。

高パフォーマンスのアニメーションの作成

高パフォーマンスのアニメーションは、今日では少なくともブラウザのコンポジタが優先されるものです。変換プロパティと不透明度プロパティを変更し続けることができれば、通常は優れたパフォーマンスが得られます。カード アニメーションに対する一般的なアプローチでは、次のようにします。

1. カードが閉じているときのカード内のすべての要素の位置を測定します。
2. カードのクラスを切り替えて（アニメーション化せずに）展開します。
3. カードが展開されたら、カード内の要素の位置を再測定します。
4. 差を計算する。
5. 負の変換を適用して、要素を開始位置に戻します。
6. アニメーションをオンにします。
7. 負の変換を削除し、要素が画面上の最終位置まで現れるのを確認します。

どれも高コストに聞こえるかもしれませんが、ユーザーが操作した瞬間からアニメーションが開始されるまでに 100 ミリ秒の時間枠があります。これを超えると、お客様には遅延が発生します。この時間を使用して高コストの準備作業を行い、アニメーション自体の実行を低コストで実行できます。また、50 ～ 100 ミリ秒の最後に、クリーンアップ作業を行うためのウィンドウがあります。これは、何をしようとしているかによって便利な場合があります。

アニメーション作成にコストのかかる作業は、最初の 100 ミリ秒以内で済みますが、Nexus 5 では 70 ミリ秒もかかるため、余裕があります。

コードを取得する

サイトの詳細を確認する場合は、GitHub でコードがリリースされていると便利です。ぜひご覧ください。