minetの日記： 放物線アニメーションを描く3次ベジェ曲線の数学的正しさとデザイナー的実際？

Web系のお仕事で、
CSS Transitionを使って、オブジェクトに放物的な挙動をさせるアニメーションを描く（ようなスタイルを生成するJavaScript_※を書く）ことになった。
なので付け焼刃的にちょっと調べてみたことを書く。

CSS Transitionでは、transition-timing-functionプロパティに3次ベジェ曲線を指定できる。ただし、制御点に制限があって、始点が(0,0)、終点が(1,1)に固定されている。
放物線は2次関数なので、3次ベジェ曲線で忠実に再現できる。
y=x^2 の曲線は簡潔に記述できて、制御点は “(0, 0), (1/3, 0), (2/3, 1/3), (1, 1)” となる。
これをCSSの記述にすると
transition-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333)
となる。（ここでは小数3位で四捨五入した）

ところが、2次曲線（quadratic）のtransition-timing-functionをぐぐってみると、こんなような記述が随所で見つかる。
cubic-bezier(0.55, 0.085, 0.68, 0.53)
んんんん？

y=x^2 であれば原点での傾きは0なので、2番目の引数が0でない時点で、これは明らかに何かが違う。
原点から始まる放物線ではなく、何か他の2次曲線を近似しているのだろうか。
例えば何か大手のアニメーションソフトが「2次曲線」という名前で提供している放物線ではない関数があって、それをそっくりエミュレートしているのだろうか。
そしてその曲線が放物線ではない理由は、例えばアニメーション中に傾きが0となる区間があると、オブジェクトの移動速度に依存するスクリプトが誤判定するだとかゼロ除算するだとかで不都合が生じる可能性を考慮して、傾きが0とならないよう工夫されたのだろうか。
あるいはもっと感性的な理由で、「数学的に正しい放物線より、この方が『自然な』アニメーションに見えるから」だったりするのだろうか。
または単に、誰かが間違って記述したものが子引き孫引きされているだけの、インターネットミーム的なモノなのだろうか。
その辺の事情は、ちょっと調べただけではわからなかった。

とりあえず今回のお仕事では放物線に合わせることが要件なので、前者の指定でいくことにした。

_{※JavaScriptはOracleの登録商標らしいです。}

easeInQuad ＆ easeOutQuad

[Anonymous Coward]

easeInQuad とか easeOutQuad で検索してみてください

アニメーションの easing の式の一つに quadratic と呼ばれている式があるだけで
それは y=x^2　という意味ではありません

Re:easeInQuad ＆ easeOutQuad

[taka2 (14791)]

いわゆる「Easing」は、Flashの開発者であった Robert Penner 氏が開発・提唱したもの [robertpenner.com]が広く世の中に広まってデファクトスタンダードとなったものですが、その元祖の定義では、EaseInQuad は正確に「p(t)=t²」という二次関数です。

この数式表現をベジェ化するにあたって、数学的な素養がない人が、数学的な正確さは考えずに、「なんか適当にそれっぽいパラメータをでっちあげた」のが出回ってるってことなんだと思いますね。