〽️cubic-bezier(3次ペジェ曲線)とは? 〽️つかいかた。 〽️値は0〜1で。 〽️定番の値を基準に。 〽️もう1つある。
⬆︎CSSアニメーションについてのまとめページはこちら。
こんにちは、「ふ」です。
CSSアニメーション基礎の6回目。
前回⬇︎はCSSアニメーションのanimation-timing-functionプロパティ、そのうち定番の値5つを紹介しました。
そのとき、各値の変化をグラフで表示していました。
横軸は時間で、縦軸はCSSアニメーションの進捗量でしたね。
〜でもどうせなら↓のように、
「縦軸はスピードそのもので表現したほうが直感的なのでは?」
と思う方もいらっしゃるでしょう。
ですが、CSSアニメーションのtiming-functionは、時間に対する進捗をもとにして決定されます。 結果的に見た目のスピードが速くなったり遅くなったりしているのです。
今回は時間に対する進捗量を、任意に指定する方法が登場します。
それが、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の指定は、「ハンドルの先端の座標」で指定します。
例えば、timing-functionの初期値である「ease」をqubic-bezierで指定するとしたら、
ということに成増。
もちろんショートハンド(一括指定)で記述することもできます。
サンプル⬆︎は、初期値「ease」で動かしているCSSアニメーションです。
現在のcubic-bezierはこう。
例えば、始まりの部分を極端に遅らせたいとしたら。
始点側のハンドルをググッと引っ張って、このようにしてみました。
コードに反映させます。
はじめはジワジワと来て、途中から急激に進行するようになりました。
インパクト系のアニメーションに使えそうですね(笑)
〜みなさんもハンドルの座標をいじって、遊んでみてください。
ここでちょっとした疑問が。
ハンドルをこのような方向に引っ張った場合、曲線が「0〜1」の範囲からはみ出してしまいます。
このとき、アニメーションの動きはどうなってしまうのでしょうか?
先に示した画像のように、曲線が水平方向、即ち「時間」の範囲に対してはみ出した場合。
animation-delayなどの遅れ系エフェクトはともかくとして、CSSアニメーション自体の時間がマイナスになったり1以上になったりはあり得ません。
したがってアニメーションは無効となってしまいます。
進捗(縦方向)に曲線がはみ出した場合は、そのぶんアニメーションで補完されます。
実際のアニメーションです。
いったん丸が通り過ぎて、最終的に進捗100%の位置に戻ってきています。
これ、特殊な効果をねらっている場合には面白いのですが、「作り込んだキーフレームに反した動き」になってしまうのも確かです。
通常のキーフレーム通りにSVGアニメーションを実装したい場合には、xy方向共に、座標値は0〜1の範囲内に納めるようにしましょう。
扨(さて)実際にcubic-bezierを操作する場面になったとして。
そのとき、「脳内でグラフを思い浮かべながら座標値を指定する」というのもなかなか辛いものがあります。
前回紹介した「定番の値」をベースにハンドルを操作したほうが感覚を得やすいのでは、と思いました。
そこで、値5つをグラフで可視化して貼っておきます。
① ease。
② linear。
linearは「全くハンドルが出ていない状態」です。したがって座標は線分の両端と同じに成増。
③ ease-in。
④ ease-out。
⑤ ease-in-out。
これら5つのグラフを基準に、cubic-bezierの調整を考えていただけたらと思います。
webアニメーションの実装に困ったら、いつでも「フーノページ」を訪ねて来てくださいね、ふふふ。
最後までお読みいただき、ありがとうございました。
今回はちょっぴり難解な、qubic-bezierを取り扱いました。とっつきにくい印象ですが、timing-functionを指定する場合に限っては、今回紹介した知識で十分に扱うことができます。ぜひ試してみてください。
そして。animation-timing-functionにはもう1つ、「飛び道具」が用意されています。
次回はtiming-functionを使った「コマ送りアニメーション」の作り方について紹介させていただきます、お楽しみに。
ではまた〜 🎵
CSSアニメーション、発火のタイミングを制御する。
〽️ 好きなタイミングで発火/消火。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。