イージング処理の計算式

ちょっと自前でイージング処理を書く必要に迫られ、調査。

こちらに計算式を書かれているサイトを発見。イージングって色々な種類が有るんですね。

Easing Equations
http://gizma.com/easing/

サイトにはJavaScripでの実装も記載されています。JavaScriptで使いたい場合はこちらのサイトのコードを参考にすると良いでしょう。

こちらのサイトで紹介されているイージングは以下のもの

Quadratic
Cubic
Quartic
Quintic
Sinusoidal
Exponential
Circular

グラフで見るとそれぞれどの様な曲線になってるかを知りたかったのでNodeBoxでグラフにしてみました。

引数はそれぞれ以下を設定。

t : 0〜1
b : 0
c : 100
d : 1

因みに、引数はそれぞれ以下のデータのなります。

t : 時間(進行度)
b : 開始の値(開始時の座標やスケールなど)
c : 開始と終了の値の差分
d : Tween(トゥイーン)の合計時間

赤いグラフがIn、緑のグラフがOut、黄色のグラフがInOutの出力をグラフにしています。

※グラフは点を打って作っています。点が離れている部分は一つ前に点を打った場所からの移動量が多い箇所となります。その様な地点ではアニメーションの速度が速くなります。
【Quadratic】

def ease_in(t, b, c, d):
	t /= d
	return c*t*t + b

def ease_out(t, b, c, d):
	t /= d
	return -c*t*(t-2.0) + b

def ease_in_out(t, b, c, d):
	t /= d/2.0
	if t < 1:
		return c/2.0*t*t + b
	t = t - 1
	return -c/2.0 * (t*(t-2) - 1) + b

【Cubic】

def ease_in(t, b, c, d):
	t /= d
	return c*t*t*t + b

def ease_out(t, b, c, d):
	t /= d
	t = t - 1
	return c*(t*t*t + 1) + b

def ease_in_out(t, b, c, d):
	t /= d/2.0
	if t < 1:
		return c/2.0*t*t*t + b
	t = t - 2
	return c/2.0 * (t*t*t + 2) + b

【Quartic】

def ease_in(t, b, c, d):
	t /= d
	return c*t*t*t*t + b

def ease_out(t, b, c, d):
	t /= d
	t = t - 1
	return -c*(t*t*t*t - 1) + b

def ease_in_out(t, b, c, d):
	t /= d/2.0
	if t < 1:
		return c/2.0*t*t*t*t + b
	t = t - 2
	return -c/2.0 * (t*t*t*t - 2) + b

【Quintic】

def ease_in(t, b, c, d):
	t /= d
	return c*t*t*t*t*t + b

def ease_out(t, b, c, d):
	t /= d
	t = t - 1
	return c*(t*t*t*t*t + 1) + b

def ease_in_out(t, b, c, d):
	t /= d/2.0
	if t < 1:
		return c/2.0*t*t*t*t*t + b
	t = t - 2
	return c/2.0 * (t*t*t*t*t + 2) + b

【Sinusoidal】

def ease_in(t, b, c, d):
	return -c * math.cos(t/d * (math.pi/2.0)) + c + b

def ease_out(t, b, c, d):
	return c * math.sin(t/d * (math.pi/2.0)) + b

def ease_in_out(t, b, c, d):
	return -c/2.0 * (math.cos(math.pi*t/d) - 1) + b

【Exponential】

def ease_in(t, b, c, d):
	return c * 2**(10*(t/d - 1)) + b

def ease_out(t, b, c, d):
	return c * (-(2.0**(-10.0 * t/d)) + 1) + b

def ease_in_out(t, b, c, d):
	t /= d/2.0
	if t < 1:
		return c/2.0 * 2.0**(10.0 * (t-1)) + b
	t = t - 1
	return c/2.0 * (-(2**(-10*t)) + 2 ) + b

【Circular】

def ease_in(t, b, c, d):
	t /= d
	return -c * (math.sqrt(1 - t*t) - 1) + b

def ease_out(t, b, c, d):
	t /= d
	t = t - 1
	return c * math.sqrt(1 - t*t) + b

def ease_in_out(t, b, c, d):
	t /= d/2.0
	if t < 1:
		return -c/2.0 * (math.sqrt(1 - t*t) - 1)
	t = t - 2	
	return c/2.0 * (math.sqrt(1 - t*t) + 1) + b

Quadraticでグラフを描画した時のプログラム全体は以下となります。他のものについては計算式の所以外は同じなので省略します。

size(100, 100)

base_line = 100

# t: current time
# b: start value
# c: change in value
# d: duration

# Linear
def linear(t, b, c, d):
    return c*t/d + b

stroke(0, 0, 1)
for x in range(101):
    t = x/100.0
    y = linear(t, 0, 100, 1)
    print x, "%.4f" % y, "%.4f" % t, "%.4f" % t**6
    oval(x-1, base_line - y-1, 2, 2)

# EaseInQuad
def easeInQuad(t, b, c, d):
    t /= d
    return c*t*t + b

stroke(1, 0, 0)
for x in range(101):
    t = x/100.0
    y = easeInQuad(t, 0, 100, 1)
    print x, "%.4f" % y, "%.4f" % t
    oval(x-1, base_line - y-1, 2, 2)

# EaseOutQuad
def easeOutQuad(t, b, c, d):
    t /= d
    return -c*t*(t-2) + b

stroke(0, 1, 0)
for x in range(101):
    t = x/100.0
    y = easeOutQuad(t, 0, 100, 1)
    print x, "%.4f" % y, "%.4f" % t
    oval(x-1, base_line - y-1, 2, 2)

# EaseInOutQuad
def easeInOutQuad(t, b, c, d):
    t /= d/2.0
    if t < 1:
        return c/2.0*t*t + b
    t = t - 1
    return -c/2 * (t*(t-2) - 1) + b

stroke(1, 1, 0)
for x in range(101):
    t = x/100.0
    y = easeInOutQuad(t, 0, 100, 1)
    print x, "%.4f" % y, "%.4f" % t
    oval(x-1, base_line - y-1, 2, 2)

強火で進め

このブログではプログラム関連の記事を中心に書いてます。

イージング処理の計算式

関連情報