Cubic-Bezierを使用した高度なCSSアニメーション（）

複雑なCSSアニメーションを扱うとき、多くの宣言を備えた広大な@KeyFramesを作成する傾向があります。バニラCSSに滞在しながら、物事を簡単にするのに役立つかもしれないことについて私が話したいというトリックがいくつかあります。

1. 複数のアニメーション
2. タイミング機能

最初のものはより広く使用され、馴染みがありますが、2番目のものはあまり一般的ではありません。それには正当な理由があるかもしれません。カンマでアニメーションを接続することは、私たちが利用できるさまざまなタイミング関数とそれらが何をするかを把握するよりも比較的簡単です。カスタムタイミング関数を作成するための完全な制御を提供する特にきちんとしたタイミング関数が1つあります。それはCubic-Bezier（）であり、この投稿では、それの力と、それをあまり複雑にせずに派手なアニメーションを作成するためにどのように使用できるかを示します。

インフィニティ（∞）形のよう​​な興味深い方向にボールを動かす方法を示す基本的な例から始めましょう。

ご覧のとおり、複雑なコードはありません。キーフレームは2つだけのコードとCubic-Bezier（）関数のみです。それでも、かなり複雑に見える最終的なインフィニティシェイプアニメーションが私たちが得るものです。

かっこいいね？これを掘り下げましょう！

Cubic-Bezier（）関数

公式の定義から始めましょう。

立方体のベジエ緩和関数は、エンドポイントP0とP3がそれぞれ（0、0）と（1、1）に固定されている立方体ベジエ曲線の2つの制御ポイントP1とP2を指定する4つの実数によって定義される緩和関数の一種です。 P1とP2のX座標は、範囲に制限されています[0、1]。

上記の曲線は、出力（y軸）が時間（x軸）に基づいてどのように動作するかを定義します。各軸には[0、1]（または[0％100％]）の範囲があります。 2秒（2秒）続くアニメーションがある場合は、

 0（0％）= 0s 
1（100％）= 2s

5pxから20pxに左にアニメーション化したい場合は、次のようにしてください。

 0（0％）= 5px 
1（100％）= 20px

x、時間は常に[0 1]に制限されています。ただし、出力であるYは、[0 1]を超えることがあります。

私の目標は、次の曲線を作成するためにP1とP2を調整することです。

定義に記載されているように、P0とP3は（0,0）および（1,1）に固定されているため、同じ軸上にあることができないことを意味するため、これを達成することは不可能だと思うかもしれません。それは本当であり、いくつかの数学のトリックを使用してそれらを「近似」します。

放物線曲線

次の定義から始めましょう：Cubic-Bezier（0,1.5,1,1.5）。それは私たちに次の曲線を与えます：

私たちの目標は、（1,1）を移動し、技術的には不可能（0,1）でそれを作ることです。だから私たちはそれを偽造しようとします。

私たちは以前、私たちの範囲は[0 1]（または[0％100％]）であると言ったので、0％が100％に非常に近い場合を想像してみましょう。たとえば、20px（0％）から20.1px（100％）までのトップをアニメーション化する場合、初期状態と最終状態の両方が等しいと言えます。

HM、しかし私たちの要素はまったく動きませんよね？

Y値が20.1px（100％）を超えるため、少し移動します。しかし、それは私たちに知覚可能な動きを与えるのに十分ではありません：

代わりに、曲線を更新し、Cubic-Bezier（0,4,1,4）を使用しましょう。私たちの曲線が以前よりずっと背が高いことに注意してください：

しかし、まだ動きはありません。たとえ最高値が3（または300％）を超えていても。 Cubic-Bezier（0,20,1,20）を試してみましょう。

はい！少し動き始めました。値を増やすたびに、曲線の進化に気づきましたか？ズームアウトして完全な曲線を確認するとき、それは（0,1）に「視覚的に」「視覚的に」近づきます。これがトリックです。

Cubic-Bezier（0、V、1、V）を使用することにより、Vは非常に大きな値であり、初期状態と最終状態の両方が非常に近い（またはほぼ等しい）、放物線曲線をシミュレートできます。

例は千の言葉の価値があります：

そこには「魔法」のキュービックビジエ関数を適用し、さらにアニメーションに加えて、左に適用された線形を適用しました。これにより、私たちが望む曲線が与えられます。

数学を掘り下げる

そこにいる数学志向の人々のために、私たちはその説明をさらに壊すことができます。次の式を使用して、立方体を定義できます。

 p =（1 -t）³p03（1 -t）²tp13（1 -t）t²p2t³p3

各ポイントは、次のように定義されています：p0 =（0,0）、p1 =（0、v）、p2 =（1、v）、およびp3 =（1,1）。

これにより、xおよびy座標の2つの関数が得られます。

• x（t）= 3（1 -t）t²t³=3t² -2t³
• y（t）= 3（1 -t）²tv3（1 -t）t²vt³=t³ -3vt²3vt

vは私たちの大きな値であり、tは範囲内にあります[0 1]。前の例を考慮すると、y（t）はtopの値を与えますが、x（t）は時間の進行です。ポイント（x（t）、y（t））が曲線を定義します。

y（t）の最大値を見つけましょう。このためには、y '（t）= 0を与えるtの値を見つける必要があります（微分が0に等しい場合）：

 y '（t）=3t² -6vt 3v

y '（t）= 0は二次方程式です。退屈な部分をスキップし、結果を与えます。これはt = v -sqrt（v² -v）です。

Vが大きな値の場合、tは0.5に等しくなります。したがって、y（0.5）= maxおよびx（0.5）は0.5に等しくなります。つまり、アニメーションの中間点で最大値に達し、それが私たちが望む放物線曲線に適合します。

また、Y（0.5）は（1 6V）/8を与えます。これにより、Vに基づいて最大値を見つけることができます。Vに対して常に大きな値を使用するため、6V/8 = 0.75Vに簡素化できます。

最後の例でV = 500を使用したため、そこにある最大値は375（または37500％）に出てきて、次のようになります。

• 初期状態（0）：トップ：200px
• 最終状態（1）：上：199.5px

0から1の間で-0.5pxの違いがあります。それを増分と呼びましょう。 375（または37500％）の場合、式は375*-0.5px = -187.5pxです。私たちのアニメーション化された要素は、トップに到達しています：12.5px（200px -187.5px）で、次のアニメーションを提供します。

上：200px（0％の時間）→TOP：12.5px（50％の時間）→TOP：199.5px（100％の時間） 

または、別の方法で表現された：

上：200px（0％）→TOP：12.5px（50％）→Top：200px（100％）

反対のロジックをしましょう。要素を上部に到達させるためにVのどの値を使用する必要がありますか：0px？アニメーションは200px→0px→199.5pxになるため、0pxに達するには-200pxが必要です。私たちの増分は常に-0.5pxに等しくなります。最大値は200/0.5 = 400に等しくなるため、0.75V = 400でV = 533.33を意味します。

私たちの要素はトップに触れています！

これは、私たちが今した数学を要約する数字です：

正弦波曲線

ほぼまったく同じトリックを使用して、正弦波曲線を作成しますが、式は異なります。今回はCubic-Bezier（0.5、V、0.5、-V）を使用します

前に行ったように、値を増やしたときに曲線がどのように進化するかを見てみましょう。

おそらく今までにアイデアを得ると思います。 Vに大きな値を使用すると、正弦波曲線に近づきます。

これが、連続アニメーションを備えたもう1つです。本物の正弦波アニメーションです！

数学

これのために数学を始めましょう！以前と同じ式をフォローして、次の機能を取得します。

• x（t）= 3/2（1 -t）²t3/2（1 -t）t²=（3/2）t-（3/2）t²t³
• y（t）= 3（1 -t）²tv -3（1 -t）t²vt³=（6v 1）t³ -9vt²3vt

今回は、y（t）の最小値と最大値を見つける必要があります。 y '（t）= 0は2つのソリューションを提供します。これを解決した後：

 y '（t）= 3（6V 1）t² -18vt 3V = 0

…私たちは得ます：

• T '=（3V SQRT（3V² -V））/（6V 1）
• T '' =（3V -SQRT（3V² -V））/（6V 1）

Vの大きな値の場合、t '= 0.211およびt "= 0.789があります。つまり、y（0.211）= maxおよびy（0.789）= min。それはx（0.211）= 0.26およびx（0.789）= 0.74を意味します。

Y（0.211）は0.289VおよびY（0.789）から-0.289Vに等しい。 Vは非常に大きいことを考慮して、いくつかの丸めでこれらの値を得ました。

正弦波曲線は、半分の時間（またはx（t）= 0.5）でx軸（またはy（t）= 0）を通過する必要があります。これを証明するために、y（t）の2番目の誘導体を使用します。これは0に等しい必要があります。

 y ''（t）= 6（6V 1）t -18V = 0

ソリューションは3V/（6V 1）であり、大きなV値の場合、ソリューションは0.5です。これにより、y（0.5）= 0およびx（0.5）= 0.5が得られます。これは、曲線が（0.5,0）ポイントを通過することを確認します。

次に、前の例を考えて、トップに戻るVの値を見つけてみましょう：0％。我々は持っています：

• 初期状態（0）：上：50％
• 最終状態（1）：上：49.9％
• 増分：-0.1％

トップに到達するには-50％が必要です。

ご覧のとおり、私たちの要素は上部に触れて、次のアニメーションがあるため、下部で姿を消しています。

トップ：50％→トップ：0％→トップ：50％→トップ：100％→トップ：50％→など...

計算をまとめる数値：

すべての曲線を一緒に説明する例：

はい、4つの曲線が表示されます！よく見ると、2つの異なるアニメーションを使用していることがわかります。1つは49.9％（-0.01％の増分）と50.1％（0.01％の増分）になります。増分の符号を変更することにより、曲線の方向を制御します。また、同じ曲線からより多くのバリエーションを作成するために、立方体ベジエの他のパラメーター（大きな値のままである必要があるVではありません）を制御することもできます。

以下では、インタラクティブなデモ：

私たちの例に戻る

インフィニティシンボルの形で動き回るボールの最初の例に戻りましょう。 2つの正弦波アニメーションを組み合わせて機能させました。

以前にしたことを複数のアニメーションの概念と組み合わせると、驚くべき結果を得ることができます。ここでも、今回はインタラクティブなデモとしての最初の例です。値を変更し、魔法を見てください：

さらに進んで、小さなCSS Houdiniをミックスに追加しましょう。 @Propertyのおかげで、複雑な変換宣言をアニメーション化できます（ただし、CSS Houdiniは現在、ChromeとEdgeサポートに限定されています）。

それでどんな図面を作ることができますか？ここに私が作ることができたいくつかがあります：

そして、ここにスピログラフのアニメーションがあります：

CSS Houdiniのないバージョン：

これらの例から奪うものがいくつかあります：

• 各キーフレームは、増分を含む1つの宣言のみを使用して定義されます。
• 要素とアニメーションの位置は独立しています。アニメーションを調整する必要なく、要素をどこにでも簡単に配置できます。
• 計算は行われませんでした。大量の角度やピクセル値はありません。キーフレーム内には小さな値と、cubic-bezier（）関数内に大きな値が必要です。
• アニメーション全体は、期間値を調整するだけで制御できます。

移行はどうですか？

タイミング関数に関しては同じロジックに従うため、CSS遷移プロパティでも同じ手法を使用できます。複雑なホバー効果を作成するときにキーフレームを避けることができるため、これは素晴らしいことです。

これが私がキーフレームなしで作ったものです：

マリオは放物線の曲線のおかげでジャンプしています。ホバーでそのシェイクアニメーションを作成するために、キーフレームはまったく必要ありませんでした。正弦波曲線は、すべての作業を完全に行うことができます。

これがマリオの別のバージョンです。今回はCSS Houdiniを使用しています。そして、うん、彼は放物線の曲線のおかげでまだジャンプしています：

適切な測定のために、キーフレームなしのより派手なホバーエフェクトを以下に示します（繰り返しますが、クロムとエッジのみ）：

それでおしまい！

これで、魔法のCubic-Bezier（）曲線とその背後に数学があります。もちろん、このようなカスタムタイミング機能は、一般的に到達する複雑なキーフレームなしで派手なアニメーションを行うことです。

私は誰もが数学志向ではないことを理解しています、そしてそれは大丈夫です。マシュー・レインの停戦者のように、支援するツールがあります。これにより、カーブポイントをドラッグして必要なものを手に入れることができます。また、まだブックマークされていない場合は、Cubic-bezier.comが別のものです。 CSSの世界の外でCubic-Bezierと遊びたい場合は、数学の公式を見ることができるDesmosをお勧めします。

Cubic-Bezier（）の価値をどのように取得するかに関係なく、うまくいけば、あなたは彼らの力の感覚と、プロセスでより良いコードを作るのにどのように役立ちますか。

以上がCubic-Bezierを使用した高度なCSSアニメーション（）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。