| INDEX |

[as]TweenerのModifierをつくってみる

3月 19, 2008

いつもお世話になっているTweenerのことをもう少し勉強してみようと思い立って、Modifierをつくってみることにした。Modifierは、Tweenerが対象Objectのプロパティを更新する際に何かしらの処理を割り込ませるようなもので、例えば「Tweener→displayObject.x」を「Tweener→Modifier→displayObject.x」という流れにするものらしい。試しに簡単な関数を間に挟む「FunctionModifiers」を書いてみる。

「FunctionModifiers」はTweenerから渡されるtransitionの値を任意の関数の引数にして、その返値を対象Objectのプロパティに渡すようなものです。
とりあえずスクリプトはこんな感じで使うものです。 

import caurina.transitions.Tweener;

//まずは初期化
FunctionModifiers.init();

//Tween追加
var funcProp1:Object = { func:Math.sin, begin:0, end:Math.PI*6, multi:100 };
//「_func」がカスタムでつけたもの
Tweener.addTween( targetObj1, { y:150, _func:{ y:funcProp1 }, time:2, transition:"linear" } );

//或いは
function ff( value:Number ):Number
{
  return Math.sin(value) * Math.pow(Math.E,-value/4);	
}
var funcProp2:Object = { func:ff, begin:0, end:Math.PI*6, multi:100 };
Tweener.addTween( targetObj2, { y:150, _func:{ y:funcProp2 }, time:2, transition:"linear" } );

動くとこんな感じ。左がtargetObj1で、右がtargetObj2です。

例えば、targetObj1の場合は、funcProp1[“begin”]からfuncProp1[“end”]まで値がTweenし、その値をtとすると、targetObj1.y = Math.sin(t)*funcProp1[“multi”]、といった処理になります。
※最後はaddTweenで指定した「y:150」の値になります。

で、Modifierの中はこんな感じ。 

package {
  
  import caurina.transitions.Tweener;
  
  public class FunctionModifiers {
    
    /**
     *  Tweenerに対して任意Modifier「_func」を登録
     */
    public static function init(): void
    {
      //引数にはModifier名、初期化関数、割り込み関数を指定
      Tweener.registerSpecialPropertyModifier("_func", _func_modifier, _func_get);
    }
    
    /**
     *  初期化関数
     *  引数：addTweenで渡されるオブジェクト
     *  　　　例：{ func:Math.sin, begin:0, end:Math.PI*6, multi:100 }
     *  返値：[ ...{name:属性名,parameters:[]} ]
     *    　Tweenで指定された属性(上記だとy)に対応するパラメータを返す
     */
    public static function _func_modifier (p_obj:*):Array
    {
      var mList:Array = [];
      for ( var istr:String in p_obj )
      {
        var funcobj:Object = p_obj[istr];
        mList.push( {name:istr, parameters:[ funcobj["func"], funcobj["begin"], funcobj["end"], funcobj["multi"] ]} );
      }
      return mList;
    }
    
    /**
     *  割り込み関数
     *  引数：
     *   b  対象オブジェクトの開始値( 例：Tween開始前のtargetObj1.<属性>　)
     *   e  終了値( 例：{ <属性>:150,..}の値 )
     *   t  Tweenerから渡される値。開始0.0,終了1.0
     *    ※終了時にこの関数はコールされない。
     *   p  初期化関数での返値の<属性>に対応するparametersの配列
     *  返値：targetObj1.<属性>に入る
     */
    public static function _func_get (b:Number, e:Number, t:Number, p:Array):Number
    {
      var currentVal:Number = p[0].apply( null, [p[1] + (p[2]-p[1])*t] ) ; 
      return b + p[3] *currentVal;
    }
  }
}

Tweenerは懐が深いですね。ていうか楽しいですね。

| INDEX |