こんにちは、みみです。2月というものはいつも気が付くと半月が過ぎていませんか。かろうじて前半に書けたぞ。

最近は普通に受託なお仕事をさせていただいていて、そろそろ確定申告終わらせなきゃなあ、というのと次男くんの卒園入学準備しなきゃなあというのが2大タスクとしてずーんとあって、趣味の編み物とアプリ開発には全然手が付けられません。読む会での駄弁りがオアシスです。そうだ、スプラトゥーン柄のオックス生地をポチらなければ（中断）。

そんな中でふいっと「ついついコピペで済ましてしまう」あれやこれやがたくさん居るなあと思ったので、ちょっとそのひとつを復習してみようと思いました。

そう、cubic-bezier です、皆さん、どうしてますか？

私はいっつもその名前さえ忘れて、transitionで自分のライブラリを検索して見つけてきてああこれこれなんつってコピペしちゃうというのを何度もやっているので、いい加減覚えようと思いでも覚えられないので記事にしてみました。

こんな記事より先に読むべき参照リンク:

timing-function – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/timing-function

僕らのMDNからやっぱりね。ちゃんと読もう。読んでから己の不出来を嘆こう。

Easing Functions Cheat Sheet
https://easings.net/

せっかちさんはこちらのチートシートをどうぞ。多分、何処をどう辿ったのか知りませんが、うっかりこのページに迷い込んできた方の大体の目的はこのサイトで済ませられると思います。

今回から、技術系の記事には「こんな記事より先に読むべき参照リンク」を明記することにしてみます。って次でいきなり忘れてたらごめんあそばせ。

ベジエ曲線ですよ

正直、この記事を起こすまで「あのぬるっと動いてくれる文字列」ぐらいの認識しかなかった（平謝り）のですが、あ、そうなのかベジエ曲線だったのか、って今頃膝を打っています。遅いね、遅い。ちゃんと関数名を読め私。

なんて知ったふうに書いてますが言葉しか知らないです。詳しくはWikipediaでどうぞ。我々の便利な日常生活にはきちんと数学が使われているのです。そうして面白い小説にさえなるのですよ。って「pとqには気をつけて / 高橋文樹」のテキストにリンク貼りたかったけれどモノが無いですどうにかしてください。

独断と偏見による心地よいイージング3選

さてWikipediaを読んでなるほど分からんとなったところで、この知がフロントエンドな場面でどう使われているかという話をしましょう。まだこの記事を読んでいる人は上記のリンク先に挫折した人か、心優しき私の知人か酔狂な御仁ぐらいでしょう。

cubic-bezier() というのはCSSで使えるタイミング関数（timing-function）で、イージング関数（easing function）ともよく言われます。CSSでアニメーションやグラデーションを表現する時に使えます。

実際に、どのように使うかは、やっぱりMDNのページとチートシートサイトが一番近道なのでどうぞ。なので、ここには私がよく使う数字を貼っておきます。

構文はこう。数値は0〜1の範囲ですが、縦軸（y1,y2）はマイナス値も1以上も持てます。

cubic-bezier(x1, y1, x2, y2)

でも数字だとなかなかイメージできないので、シミュレーションできるサイトとかがいくつかあります。

https://cubic-bezier.com

とはいえ、スクラッチで数字探る人はあんまり居なさそう。オススメは、チートシートサイトで良さげな数値を見つけて勘所を持ってからカスタムか、好きな動きを見つけてソースを見るとかが良いのでは。

1. cubic-bezier(0.77, 0.2, 0.05, 1)

私が好んで使う筆頭というか、ほぼコレしか常用してないやつ。あれこれ試す時間が無い時（だいたいそう）にコレを突っ込んでごまかしていますスミマセンスミマセン。もう忘れてしまいましたが、どこかの誰かのソースからコレ良いなと思って貰ってきた数字ですゴメンナサイゴメンナサイ。

プレビューはこちら：https://cubic-bezier.com/#.77,.2,.05,1

先のチートシートサイトにある easeInOutQuart（0.77, 0, 0.175, 1）でも全然良いと思います。

2. cubic-bezier(0.785, 0.135, 0.15, 0.86)

あと2つは、もうチートシートサイトからまんまです。これは、easeInBackのやつ。ちょと印象づけたい、positionとかtransparentに使うと綺麗。

3. cubic-bezier(0.23, 1, 0.32, 1)

easeOutQuintです。目立たせたくない邪魔にならない、さくっと自然にいれたい感じのときに。

とか書いてるけど、スクロールごとにやたらと適当なアニメーションするようなページは好きじゃないので、クライアントが欲しがったら全力で阻止する人です悪しからず。

記事にしたところでコピペしてしまうのはたぶんこれからも変わらないのですが、つまるところ外部記憶化なので、探す場所が固定出来るし、リピートするから気がついたら定着しているといいなと思っています。

もうちょっと知りたいなーと思ったひとはこの辺の記事とか面白いのでは。

Understanding the Cubic Bézier Curves
https://dev.wgao19.cc/cubic-bezier/