Tweenでカスタムeasing

簡単なアニメーションなら、手軽なTweenコンポーネントが便利。easingのカスタマイズ方法も交えて。

Tweenコンポーネント

例えば↑こんな感じのメニューを作る場合。
onEnterFrameを使ってアニメーションを作りこむよりも、Tweenコンポーネントを使うとラクです。

サンプルのメニューバーのMovieClipにリンクしたクラスは、
↓たったコレだけ。

import mx.transitions.Tween;
import mx.transitions.easing.*;
dynamic class Menu extends MovieClip{
 var twn:Tween;
 function Menu(){
  var _menuObj = this;//わかりやすいように・・
  //_menuObj._x を -160から-30に、30フレームで移動する。
  //ただし、イージングに Bounce.easeOutを使いなさい。
  twn = new Tween(_menuObj, "_x", Bounce.easeOut,
         -160, -30, 30, false)
;
  twn.stop();
  twn.onMotionStarted=function(){//1回クリックしたあと、
    _menuObj.onRelease=function(){//onReleaseを入れ替える。
      _menuObj.twn.yoyo(); //逆再生を繰り返す。
    }
  }
  _menuObj.onRelease=function(){ //一番最初だけstart()をコールする。
    twn.start();
  }
 }
}

_x の代わりに、_xscaleや_alphaなど全てのプロパティを指定できるので、フェードインなどの効果もかなり簡単に実現できます。
※02/01追記:こちらでもう少し複雑なデモをやってます。

ここでは、Bounceイージングを利用しました。
デフォルトで6種類のイージングが用意されています(「コンポーネントリファレンスガイド」を参照)。Tweenの利用方法から考えれば十分だとは思いますが、イージングを自作することもできます。

イージングをカスタマイズする

イージングメソッドのルールは以下のとおり。

 funtion easing( dt   //現在のフレーム
         ,begin //開始値
         ,finish //終了値
         ,duration)//総フレーム数

このメソッドを 0 <= dt <= duration の間、繰り返しコールするので、

 begin = easing[dt=0];
 begin+finish = easing[dt=duration];

の条件を満たすように、メソッドを実装します。例えば、等速のイージング(Noneと同じ)は、次のようになります。

 function easeIn (dt, begin, finish, duration){
   return begin + dt/duration * finish;
 }

あとは好きに実装すればOK。適当にこんなイージングを作って、

class CustomEasing {
 static function easeIn (dt, begin, finish, duration){
  return begin+Math.abs(Math.sin(dt/duration*Math.PI*3/2))*finish;
 }
}

Tweenコンポーネントに適用してみると、

twn = new Tween(_menuObj,"_x",CustomEasing.easeIn,
       -160,-30,30,false);

こんな動きになりました。


コメント
kon
2007/02/02
はじめまして。Tweenコンポーネントのサンプルをみると、動ききらないうちにクリックしたときにちゃんと動かなくなりませんか?このサンプルもそうなるようです。ですので、使えませんでした。
武田ソフト
2007/02/03
konさん、はじめまして。
対処方法はいろいろあるとは思います。例えば、yoyoの直前で、fforwardをして強制的にTweenを完了させてはいかがでしょうか。
サンプルを書き換えるとこんな風です。
_menuObj.onRelease=function(){
  _menuObj.twn.fforward();
  _menuObj.twn.yoyo();
} 
kon
2007/02/05
調べもしないで批判的なコメントをしました。すみませんでした。
武田ソフト
2007/02/05
konさん、いえいえ、私も勉強になります。またよろしくお願いします!

コメントしてください

closed.