3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ちょっとしたeasingの解説

Last updated at Posted at 2013-04-19

まずはソース。

function easing(time, begin, change, duration) {
   var s = 2.5;

	if (t / d >= 1) {
	    return b + c;
	}

	return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; 
}

//分かりやすく分解
var e = t / d - 1;
c * (e * e * (3.5 * e + 2.5) + 1) + b;

//+ bはスタートからの値を求めるため、実際にイージングを行なっているのはその前の式。
//かつ、cが最終変化量でイージングの性質として0 -> 1に変化する必要があるから、
//実質イージングを成しているのはcとbを抜いた部分。
(e * e * (3.5 * e + 2.5) + 1)

//さらに、最後に+1されているため、その前の部分が-1 -> 0に変化する。よって
//1 < (e * e * (3.5 * e + 2.5) < 0
//となる。

s = 2.5で行なっているのが、イージング途中で1を超える値の定義。
e = t / d - 1の部分で、渡された時間を逆点させ、-1 -> -0.9 -> -0.8 … -0.1 -> 0のように変異させる。

((s + 1) * e + s)の部分で、tにマイナス値が渡るためsの値を減ずることになるが、-0.5を境にプラスの値が大きくなるため結果増加値が上がり、上限を行き過ぎてから到達地点に達する、という動きになる。

まぁ基本的に0 -> 1に遷移するのでそれをベースに色々書いてみたい。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?