Easing関数についてのメモ

JavaScript jQuery 
// 一般的なスタイル
function linear(t, b, c, d) { return c * t / d + b; }
// jQueryスタイル
function linear(x, t, b, c, d) { return x; }
// x = t / d, b = 0, c = 1 なので x == t/d == c * t / d + b
// つまり上も下もやっていることは同じ。
  • x: t/d。
  • t: 経過時間。
  • b: 初期値。jQueryでは常に0。
  • c: 変動値。変化する値。jQueryでは常に1。
  • d: アニメーション時間（duration）。

jQueryスタイルのxは非常に便利なので、jQueryがこのパラメータを導入したのも頷ける。

1秒でフェードアウトするアニメーション

動作確認はしていません。

# CoffeeScript
FPS = 30

easeInQuad = (x) -> x * x

elTarget = document.getElementById "target"
initialLife = FPS * 1 # 1[s]
life = initialLife

# https://gist.github.com/s-shin/9071179
animator = new Animator FPS, (frameCount) ->
  life--
  elTarget.style.opacity = 1 - easeInQuad(life/initialLife)
  if life <= 0
    elTarget.style[k] = v for k, v of {display: "none", opacity: 1}
    animator.stop()
animator.run()

参考