Language日本語▾
簡潔な回答
スプリングは要素の現在の速度と位置から開始できるため、中断されたアニメーションや解放されたジェスチャがスムーズに継続されるため、インタラクティブ UI に適しています。少ない設定でも自然な感じになります。 3 次ベジェ曲線は、フェード、色の変化、中断されない動きに対しては依然として優れており、よりシンプルです。
核心
- 3次ベジェ曲線は持続時間と形状が固定されています
- バネは剛性、減衰、質量によって定義され、物理学が定めると安定します。
- スプリングが速度を伝達するため、中断やジェスチャーがスムーズに保たれます
- ベジェはよりシンプルで、フェードや非インタラクティブなトランジションに適しています。
- SwiftUI を含む多くの最新のプラットフォームはデフォルトでスプリングを使用します
3 次ベジェ イージングは、イーズアウトの場合は 300 ミリ秒など、固定時間にわたって値が開始から終了までどのように移動するかを表します。これは予測可能であり、プレーンな CSS を含むあらゆる場所でサポートされています。
代わりに、バネは物理システムを表します。剛性、減衰、質量を設定すると、オーバーシュートの有無にかかわらず、バネの重りのように値がターゲットに向かって移動します。期間は物理学から得られます。
実際の違いは中断です。パネルが開いているときにユーザーが再度タップすると、ベジェ アニメーションは通常、現在の位置から速度 0 で再開され、遅延しているように見えます。スプリングは現在の位置と速度から開始されるため、モーションは新しいターゲットに向かってスムーズに曲がります。ユーザーがジェスチャーでカードやシートを投げるときにも同じことが当てはまります。バネは指の速度に合わせて動き続けます。
また、スプリングはより少ない決定で自然に感じられます。1 つまたは 2 つの設定により、さまざまなサイズの要素にわたって一貫した感触が得られます。
ベジエにはまだ居場所があります。不透明度、色、トランジションが決して中断されないようにするには、短いイーズアウトの方が簡単で、JavaScript なしの CSS で機能します。多くのチームは動きにスプリングを使用し、フェードにベジェを使用します。
CSS は春アニメを作ることができますか?
CSS には物理的なスプリングがありませんが、linear() イージング関数により、一定期間のスプリング カーブを近似できます。中断間の速度は伝達されません。
UI の適切なスプリング設定は何ですか?
ほとんどの UI についてはオーバーシュートなし、またはわずかなオーバーシュートから始め、遊び心のある要素については小さなバウンスから始めます。実機での感覚でチューニング。
スプリングの動きは遅いですか？
最新のライブラリやランタイムでは顕著ではありません。コストのほとんどは、スプリングの計算ではなく、動きのレンダリングにあります。
すべてのアニメーションは春であるべきでしょうか?
いいえ。動きやインタラクションにはスプリングを使用し、フェードや色の変化にはシンプルなイージングを使用します。
ブラウザで違いを感じてください
スプリングとベジェを並べて比較し、それらを中断して、好みの値をコピーします。