純粋なCSSベジエカーブモーションパス

純粋なCSSベジエカーブモーションパス：比較される3つの方法

あなたはbezier曲線愛好家ですか？ それらの優雅さと数学的特性により、ベクターグラフィックス（SVG、フォント）、アニメーションのタイミングなど、さまざまなアプリケーションに理想的になります。 この記事では、JavaScriptを避けて、2Dキュービックベジエ曲線に沿って要素を正確にアニメーション化するための3つのCSSのみの方法について詳しく説明しています。 各アプローチ、その強み、弱点を調べます

クイック要約：キュービックベジエ曲線

立方体のベジエ曲線は、2つのエンドポイント（P0、P3）と2つの制御ポイント（P1、P2）の4つのポイントで定義されます。 曲線の形状は、エンドポイントに対する制御ポイントの位置によって決定されます。

課題：bezier曲線に沿った正確なCSSアニメーション

目標は、CSSのみを使用して、特定の立方体ベジエ曲線に従うために要素をアニメーション化することです。

3つのソリューションを調べてみましょう：

メソッド1：タイムワープ（

を使用して）

このメソッドは、

内で関数を活用します。 個別のアニメーションは、各軸が曲線に一致するようにanimation-timing-functionを誘導するxおよびy座標を制御します。

長所：cubic-bezier()タイミング関数ハックに精通している人にとっては比較的簡単です。 animation-timing-functioncubic-bezier()cons：

エンドポイントが水平または垂直線にある場合は機能しません（小さなオフセットで簡単に緩和されます）、キュービックベジエ曲線に限定され、

パラメーターを超えたアニメーションのタイミングを制限します。
• 方法2：競合するアニメーション（複数のcubic-bezier()を使用）
• このメソッドは、微妙に相互作用する複数のルールを使用します。 アニメーションはcubic-bezier()プロパティを変更し、後のアニメーションが以前のものによって適用された変換に基づいて構築されています。 これにより、立方体の曲線であっても、驚くほどエレガントなソリューションが可能になります。

長所：単純なCSSは、CSSアニメーション - タイミング機能をサポートし、3D曲線に簡単に拡張できます。 @keyframescons：キーフレームを計算するための式はそれほど直感的ではありません。

@keyframesメソッド3：標準のbezier曲線構造（CSS変数とtransform>）

を使用）
• このアプローチは、bezier曲線の数学的構造を直接模倣します。 CSS変数とを使用して中間点を定義およびアニメーション化し、最終的に完全な曲線を作成します。
  • 長所：bezier曲線構造を理解している人にとっては直感的で、高次曲線と3D、柔軟なアニメーションのタイミングに簡単に拡張されます。
  • cons：は@propertyに依存していますが、これはすべてのブラウザーによって普遍的にサポートされていません。

  アニメーションのタイミング考慮事項

  すべてのメソッドは、さまざまなアニメーションタイミング関数（

  ）をサポートしています。 方法2と3はこれらの関数を直接適用しますが、方法1では、目的の効果を実現するためにanimation-timing-functionパラメーターを慎重に調整する必要があります。 cubic-bezier()

  結論

  各方法は、純粋なCSSを使用して、よりbeめな曲線に沿ってアニメーション化するためのユニークなアプローチを提供します。 最良の選択は、テクニック、ブラウザの互換性要件、アニメーションのタイミングに必要なコントロールのレベルに精通していることにかかっています。 方法2は、ほとんどのシナリオのシンプルさと柔軟性のバランスをとることができます。

以上が純粋なCSSベジエカーブモーションパスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。