昨年末に Chrome Dev Summit のサイトを構築しました。マテリアル デザインの外観にしたかったのは、優れたデザイン言語であり、作成したいサイトの種類には最適だと思ったからです。しかし、あらゆる新しいデザイン言語と同様に、疑問、課題、取るべき決定があり、特にウェブの慣例に対処する場合にはそうなります。
サイトの作成が特に難しかったのは、カードをクリックしたときに「テイクオーバー」効果があったことです。
このような効果を 60 fps で実行するには、熟考、プロトタイピング、そして興味深い妥協点がいくつかあります。私は Chrome Dev Summit で、この効果についてお話を伺い、構築した経緯を残酷に説明してくれました。
高パフォーマンスのアニメーションの作成
高パフォーマンスのアニメーションは、今日では少なくともブラウザのコンポジタが優先されるものです。変形と不透明度のプロパティの変更を維持できれば、通常は優れたパフォーマンスが得られます。私が採用したカード アニメーションの一般的なアプローチでは、次のことが可能です。
- カードを折りたたんだときのカード内のすべての要素の位置を測定します。
- カードのクラスを切り替えて、（アニメーション化せずに）カードを展開します。
- カードが開いたら、カード内の要素の位置を再測定します。
- 差異を計算する
- 負の変換を適用して、要素を開始位置に戻します。
- アニメーションをオンにします。
- 負の変換を削除し、要素が画面上の最終的な位置に広がるのを確認します。
これらはすべて高コストに思えるかもしれませんが、ユーザーが操作した瞬間からアニメーションが開始されるまでに 100 ミリ秒の時間枠があります。これを超える場合は遅延が発生します。この時間を使用して負荷の高い準備作業を行い、アニメーションの実行中をより安価に実行できます。また、約 50 ～ 100 ミリ秒の終わりには、片付け作業を行うためのウィンドウもあります。これは、行おうとしている内容によって便利な場合があります。
アニメーションの制作にはコストのかかる作業が最初の 100 ミリ秒以内に行われますが、Nexus 5 では 70 ミリ秒程度かかるため、余裕があります。
コードを取得する
サイトを詳しく知りたい場合は、GitHub でコードが公開されていますので、ぜひご覧ください。