Google Closure Libraryでアニメーションメモ

goog.fx.dom.Slideクラスからインスタンスを作り、その後にplayメソッドなどでアニメーションを実行するのが基本的な流れ。
引数は、[element, startPos, endPos, duration, easing-opt] の順。

easing-optに指定するのは関数で、イージングの状態を制御する関数を渡す。標準的なease-inなどは予めgoog.fx.easingのプロパティとして、easeIn, easeOut, inAndOutの3つが登録されている。

var el = this.getEl(),
    startPos = [0, 0],
    endPos   = [100, 100],
    time     = 3000,
    slide = new goog.fx.dom.Slide(el, startPos, endPos, time);

goog.style.setStyle(el, {
    position: 'absolute'
});
slide.play();

定義されている関数は以下の通り。
基本的に0 ≤ t ≤ 1の値を渡すと、0→1に変化する関数を渡せばよさそう。

//easeOut
function (t) {
  return 1 - Math.pow(1 - t, 3);
}

//easeIn
function (t) {
  return t * t * t;
}

//inAndOut
function (t) {
  return 3 * t * t - 2 * t * t * t;
}