イージング
https://gyazo.com/68328022b90c6d23150b07c57d2239f7
https://gyazo.com/2f373d7f0ee0a4bf023f7e60bc8d667a
https://twitter.com/suika_mmd/status/1234059398898536448
https://twitter.com/panlepan/status/1256190649042456581
https://twitter.com/songofsaya_/status/1143911606394351616
https://drive.google.com/file/d/1J3PeZDwWqK59NsKdd1-jGlNWqpn62SJK/view?usp=sharing
https://twitter.com/sztko/status/1325483816387948544
何?
アニメーションで等速直線運動で動かすと面白くなかったりする。そんな時にはイージング関数を使って、動きに表情をつける。
イーズ曲線、フェード関数とも言う。
座標の変化だけでなく、色の変化、形状の変化などでもイージングが利用できる。
AE、AviUtil界隈で良く聞く用語。2D/3Dプログラミングでも使われる。
かんがえかた
時間が0.0から1.0のあいだで数字が変化するものとして扱う。この変数をtとする。これをいいかんじに変化させるものがイージング関数。
イージング関数は0.0から1.0までの範囲で値を与えると、そのイージングの性質に応じた数字を返す。
開始時間をt0、終了時間をt1として、0.0==tの場合がt0、1.0==tの場合でt1となるように時間経過を扱う。
↓こんなかんじの式で扱うと良い。つまり線形補完。
(開始してからの経過時間 - t0) / (t1 - t0)
時間に応じてtが線形に増加するなら等速直線運動になる。tをn次関数で加工するなどするとイージングになる。
lerp関数の第三引数tにこのイージングの値を与えてあげれば、関数がサポートされている環境ならすぐイージングが使える。(GLSLの場合はmix関数)
イージング関数集には数十種類の関数があるが、特徴的なのは数種類なのでそれだけ使えるようにしておけばとりあえずOK。
もうちょっとかいせつ
TODO: なんかかく
誰かモーショングラフィックスに明るい人おしえて
「物理量保存則に従え」。動いている物体は急に速度がゼロにならない。
いろいろな言語のイージング関数
HLSLのイージング Easing.HLSL
GLSLのイージング Easing.GLSL
c#のイージング Kmath.Easing.cs
setchi/EasingCore
JavaScriptのイージング Easing.JavaScript
資料など
http://robertpenner.com/easing/
https://qiita.com/yuji_yasuhara/items/117b8559beed1a8d8377
https://learning.unity3d.jp/2854/
イージング関数を使ったUI挙動の作り方