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
イーズ効果がなく、最初から最後まで一定の速度。