昨年末に Chrome Dev Summit のサイトを構築しました。Material Design は優れたデザイン言語であり、私が作りたいサイトにぴったりだと思ったので、このデザインを採用しました。しかし、新しいデザイン言語には、他の言語と同様に、疑問点、課題、決定事項があり、特にウェブの慣例を扱う場合はその傾向が顕著です。
特に作成が難しかったのは、カードをクリックしたときに表示される「テイクオーバー」効果です。
このような効果を 60 fps で実行するには、いくつかの検討、プロトタイピング、興味深い妥協が必要でした。Chrome Dev Summit で、この効果について説明し、その作成方法を詳しく説明しました。
高性能アニメーションの構築
パフォーマンスの高いアニメーションは、少なくとも現時点では、ブラウザのコンポジタを優先するアニメーションです。変換プロパティと不透明度プロパティの変更に限定すれば、通常は優れたパフォーマンスが得られます。カード アニメーションで採用した一般的なアプローチは、まさにそれです。
- カードが折りたたまれたときに、カード内のすべての要素の位置を測定します。
- カードのクラスを切り替えて展開します（アニメーションなし）。
- カードが展開されたので、カード内の要素の位置を再測定します。
- 差を計算します。
- 負の変換を適用して、要素を開始位置に戻します。
- アニメーションをオンにします。
- 負の変換を削除すると、要素が画面上の最終位置に移動します。
これらはすべてコストがかかるように聞こえるかもしれませんが、ユーザーが操作してからアニメーションを開始するまでの時間は 100 ミリ秒です。これを超えると、ユーザーは遅延を感じます。この時間を利用して、アニメーション自体をより安価に実行できるように、コストのかかる準備作業を行うことができます。また、50 ～ 100 ミリ秒程度のクリーンアップ作業を行うためのウィンドウもあります。これは、実行しようとしている処理によっては便利です。
アニメーションの実行に必要な処理は最初の 100 ミリ秒以内に行われ、Nexus 5 では 70 ミリ秒程度で完了するため、余裕があります。
コードを取得する
サイトの詳細を確認したい場合は、コードが GitHub で公開されていますので、ぜひご覧ください。