CSSアニメーション06、
cubic-bezier。

〽️cubic-bezier(3次ペジェ曲線)とは? 〽️つかいかた。 〽️値は0〜1で。 〽️定番の値を基準に。 〽️もう1つある。





⬆︎CSSアニメーションについてのまとめページはこちら。

こんにちは、「ふ」です。
CSSアニメーション基礎の6回目。


前回⬇︎はCSSアニメーションのanimation-timing-functionプロパティ、そのうち定番の値5つを紹介しました。

そのとき、各値の変化をグラフで表示していました。
横軸は時間で、縦軸はCSSアニメーションの進捗量でしたね。

〜でもどうせなら↓のように、

「縦軸はスピードそのもので表現したほうが直感的なのでは?」
と思う方もいらっしゃるでしょう。

ですが、CSSアニメーションのtiming-functionは、時間に対する進捗をもとにして決定されます。 結果的に見た目のスピードが速くなったり遅くなったりしているのです。

今回は時間に対する進捗量を、任意に指定する方法が登場します。



cubic-bezier。

それが、cubic-bezierという値形式です。
時間に対するアニメーションの進捗量を3次ペジェ曲線のハンドルの座標で決定します。

cubic-bezier(3次ペジェ曲線)とは?


cubic-bezier(3次ペジェ曲線)とは、「アンカーポイント」と「ハンドル」と呼ばれるものによって描かれる曲線のことです。

その内容について語りだすと長くなってしまい、皆さんもうんざりだと思いますが・・

CSSアニメーションで使われるcubic-bezierは、アンカーポイント2つ、ハンドル2つの最もシンプルな形をしています。
ペジェ曲線の全てを把握していなくても、問題なく操作することが可能です。

ここでは
「CSSアニメーションのanimation-timing-functionを使う場合」限定で、必要最小限のcubic-bezierの性質についてお話しします。

CSSアニメーションの時間推移で、「0」をstart、「1」をendとします(横軸)。
進捗に関しても0%を「0」、100%を「1」(縦軸)としたとき。

この青の線分は前回紹介した定番の値の1つ、「linear」の状態を表しています。
終始一定の比率でCSSアニメーションが進行しています。

animation-timing-functionを表現するcubic-bezierは、線分の両端から「ハンドル」というものが生えています。
ハンドルは線分のカーブの方向と量を調節します。

ハンドルを引っ張れば引っ張るほど、線分はその方向になびくように曲がっていきます。

ハンドルは線分のもう片方からも出ています。
両方のハンドルが干渉し合った結果、最終的な線分のカーブが決定されます。

今はグラフ上でお見せしていますが、cubic-bezierの状態は、全て「座標値」で表現することができます。
その「座標値」をanimation-timing-functionの値として指定することで、アニメーションの進捗具合を任意のカーブで制御することが可能になるのです。

つかいかた。


animation-timing-function: cubic-bezier( 「「1bb始点ハンドルのx座標, 始点ハンドルのy座標, bb終点ハンドルのx座標, 終点ハンドルのx座標」」 );

animation-timing-functionにおけるcubic-bezierの指定は、「ハンドルの先端の座標」で指定します。

例えば、timing-functionの初期値である「ease」をqubic-bezierで指定するとしたら、

animation-timing-function:「「1qubic-bezier(0.25,0,0.25,1.0)」」;

ということに成増。

#element { animation:frame1 4s infinite 「「1cubic-bezier(0.25,0.1,0.25,1.0)」」; }

もちろんショートハンド(一括指定)で記述することもできます。

使ってみましょう。

サンプル⬆︎は、初期値「ease」で動かしているCSSアニメーションです。

#sample { animation:sample 4s infinite; }

現在のcubic-bezierはこう。
例えば、始まりの部分を極端に遅らせたいとしたら。

始点側のハンドルをググッと引っ張って、このようにしてみました。
コードに反映させます。

#sample { animation:sample 4s infinite 「「1cubic-bezier(0.9,0.2,0.25,1.0)」」; }

はじめはジワジワと来て、途中から急激に進行するようになりました。
インパクト系のアニメーションに使えそうですね(笑)

〜みなさんもハンドルの座標をいじって、遊んでみてください。

値は0〜1で。


ここでちょっとした疑問が。

ハンドルをこのような方向に引っ張った場合、曲線が「0〜1」の範囲からはみ出してしまいます。
このとき、アニメーションの動きはどうなってしまうのでしょうか?



「時間」がはみ出した場合。

先に示した画像のように、曲線が水平方向、即ち「時間」の範囲に対してはみ出した場合。

animation-timing-function:cubic-bezier(「「4-0.4」」,0.6,0.25,1.0);

animation-delayなどの遅れ系エフェクトはともかくとして、CSSアニメーション自体の時間がマイナスになったり1以上になったりはあり得ません。
したがってアニメーションは無効となってしまいます。



「進捗」がはみ出した場合。

進捗(縦方向)に曲線がはみ出した場合は、そのぶんアニメーションで補完されます。

animation-timing-function:cubic-bezier(0.25,0,0.1,「「41.6」」);

実際のアニメーションです。
いったん丸が通り過ぎて、最終的に進捗100%の位置に戻ってきています。

これ、特殊な効果をねらっている場合には面白いのですが、「作り込んだキーフレームに反した動き」になってしまうのも確かです。

通常のキーフレーム通りにSVGアニメーションを実装したい場合には、xy方向共に、座標値は0〜1の範囲内に納めるようにしましょう。

定番の値を基準に。


扨(さて)実際にcubic-bezierを操作する場面になったとして。
そのとき、「脳内でグラフを思い浮かべながら座標値を指定する」というのもなかなか辛いものがあります。

前回紹介した「定番の値」をベースにハンドルを操作したほうが感覚を得やすいのでは、と思いました。
そこで、値5つをグラフで可視化して貼っておきます。



① ease。

cubic-bezier(0.25, 0.1, 0.25, 1.0);



② linear。

cubic-bezier(0.0, 0.0, 1.0, 1.0);

linearは「全くハンドルが出ていない状態」です。したがって座標は線分の両端と同じに成増。




③ ease-in。

cubic-bezier(0.42, 0, 1.0, 1.0);



④ ease-out。

cubic-bezier(0,0,0.58,1.0);



⑤ ease-in-out。

cubic-bezier(0.42, 0, 0.58, 1.0);


これら5つのグラフを基準に、cubic-bezierの調整を考えていただけたらと思います。
webアニメーションの実装に困ったら、いつでも「フーノページ」を訪ねて来てくださいね、ふふふ。

もう1つある。


最後までお読みいただき、ありがとうございました。
今回はちょっぴり難解な、qubic-bezierを取り扱いました。とっつきにくい印象ですが、timing-functionを指定する場合に限っては、今回紹介した知識で十分に扱うことができます。ぜひ試してみてください。

そして。animation-timing-functionにはもう1つ、「飛び道具」が用意されています。
次回はtiming-functionを使った「コマ送りアニメーション」の作り方について紹介させていただきます、お楽しみに。
ではまた〜 🎵



CSSアニメーション、発火のタイミングを制御する。

〽️ 好きなタイミングで発火/消火。











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。