うむるむ -[ GreenSock ] TweenMax でカスタムイージングしちゃうんです- by um

[ GreenSock ] TweenMax でカスタムイージングしちゃうんです - 09/01/15 17:25 by um

TweenMax もイージングいじれるんですの続編。前回は Back と Elastic のカスタム方法だけだったけど、今回は完全カスタムイージング。
Saqooshaさんが書いた Fuse のCustom Easing Tool をTweener で使う方法を TweenMax でも真似てみようという試みであり企み。Tweener ではほとんどコピペで済んだとあったけど TweenMax でもほとんどコピペでOK。Tweener とは変数の名前が違うくらい。
方法は以下に。

まずはCustom Easing Tool のダウンロード。
MosesSupposesのサイトにある、Download Fuse 2.1.4 からもろもろまとまった zip がダウンロードできる。examples/if not using mxp の中に単体で動く swf が入ってるのでこれを使えばいい。
Flash を使っていて、mxp で追加した場合は ウィンドウ / その他のパネル / CustomEasingTool2 で swf と同じパネルが開くのでそちらでもいい。

次に、イージングに必要なデータを CustomEasingTool で作成する。
copy to clipboard を押すと設定したイージングのデータ（配列宣言文）をコピーできるのでそれをそのままソースにペースト。これだけ。配列の宣言と初期化だけなので AS2 も AS3 も関係ない。

使用するデータを作成したので、残るはイージングの関数（TweenMax で ease に設定する関数）を用意を残すのみ、なんだけど、この関数は Fuse からそのままコピーして使えるので難しい作業は一切ナシ。
com / mosesSupposes / fuse / CustomEasing.as の中にある fromCurve がカスタムイージングの動きの部分なのでこれを丸っとソースにコピペ。

ソースを整理すると下の様な感じに完了。
※タイムラインに書いてます。

import gs.TweenMax;
 
//CustomEasingToolで作成した配列
var customEasing:Array =
  [
    {Mx:0,My:0,Nx:51.1,Ny:-276.4,Px:15.55,Py:209.75},
    {Mx:66.65,My:-66.65,Nx:51.4,Ny:108.4,Px:15.25,Py:-175.05},
    {Mx:133.3,My:-133.3,Nx:22.9,Ny:-132.9,Px:43.8,Py:66.2},
    {Mx:200, My:-200}
  ];
 
TweenMax.to(_mc, 1, {delay:0.5, x:400, ease:fromCurve, easeParams:[customEasing]});
 
//Fuseから頂戴した関数
function fromCurve (t:Number,b:Number,c:Number,d:Number,pl:Array):Number{
  var r:Number = 200 * t/d;
  var i:Number = -1;
  var e:Object;
  while (pl[++i].Mx<=r) e = pl[i];
  var Px:Number = e.Px;
  var Nx:Number = e.Nx;
  var s:Number = (Px==0) ? -(e.Mx-r)/Nx : (-Nx+Math.sqrt(Nx*Nx-4*Px*(e.Mx-r)))/(2*Px);
  return (b-c*((e.My+e.Ny*s+e.Py*s*s)/200));
}

本当にコピペばっかりでカスタムイージングが TweenMax でも実現した。
こんな感じにクラスを作って、TweenMax のパッケージ内に加えちゃうと他の関数と同じ様に扱える。例のクラスだと ease:Custom.easeCustom。
便利な世の中だなぁ。

« [ AS3 ] 外部swfの動作が異常に重い時 -getDefinitionByName- 前編 | ブログトップ | [ AS3 ] 外部swfの動作が異常に重い時 -getDefinitionByName- 後編 »