動きが激しいと、アニメーションに気を取られたり、アニメーションが邪魔になったりしがちです。そこで、ガイダンス、パフォーマンス、インタラクティビティの適切なバランスを確保するために、さまざまなアニメーションに手を加えました。
私たちは、重量感と物理的な感覚を持つドロップアニメーションをデザインしました。これは、spring をベースに、動的な持続時間を持つ CSS アニメーションを使用して効果を出しています。
落下時に使用するアニメーションカーブ。持続時間は移動距離に応じてダイナミックに変化する
ドロップのアニメーションは、お好みで微調整してください。ガイドを作成しております: ドロップアニメーション
ドラッグしているアイテムの邪魔にならないように移動するアイテムは、物理ではなく CSS のトランジションで行います。これは、GPU に動きを処理させることで、パフォーマンスを最大化するためです。CSS のアニメーション曲線は、邪魔にならないように設計されています。
構成について:
- 自然な反応時間を模倣するウォームアップ時間
- 小さなフェイズですばやく移動
- アニメーションの後半で、アニメーション中のテキストを読んでもらえるようなロングテール
移動時に使用されるアニメーションカーブ