Yahoo!ウィジェットで簡単アニメーション

バージョン2.1以上のヤフーウィジェットエンジンにはアニメーションをサポートする機能が最初からあるので、簡単にフェード、移動、回転なんかのアニメーションの実装が可能になってる。
あと、自分で定義したアニメーションを実行するカスタムアニメーションというのもあるようです。

animatorオブジェクトの主な関数は次のとおり(詳しくはウィジェットエンジンリファレンスマニュアル参照)

start

animator.start(object | array)
1つ、もしくは複数のアニメーションの開始。
ひとまずアニメーションを動かしたいなら、このファンクションだけでOK。

var a1 = new MoveAnimation(hogeImage, 5, 0, 1000, animator.kEaseOut);
var a2 = new MoveAnimation(hogehogeImage, 5, 0, 1000, animator.kEaseOut);
animator.start(new Array(a1, a2));

kill

animation.kill()
実行中の非同期なアニメーションを停止する場合に使用。

var a = new CustomAnimation(1, myAnimation);
animator.start(a);

if (hogehogeな条件) {
  a.kill();
}

sase(イーズ)

animator.ease(開始, 終了値, 完了度, 定数)

イーズ(sase)効果をカスタマイズします。

var e = animator.ease(0, 100, 0.5, animator.kEaseOut);

animator定数

animator.kEaseIn

低速で移動を開始し、移動中に加速。

animator.kEaseOut

高速で移動を開始し、停止位置に近づくにつれ減速。

animator.kEaseInOut

低速で移動を開始し、最高速に達した後に停止位置に近づくにつれ減速。

animator.kEaseNone

イーズ効果がなく、最初から最後まで一定の速度。