トゥイーンのイージング(イーズアウト)の比較





this is flash contents.


よくスクリプトでやったほうがスムーズだとデザイナさんが言うけどそのとおりで,オーサリング上のイージングとスクリプトで行うイージングは動きが違うって聞きます.
上のサンプルを見ると明らかに違いますね.

  • easing : オーサリング上でイージングを100に設定.
  • custom : Flash8から機能追加されたカスタムイージングにてmyEasingに近づけた.
  • myEasing : よくあるスクリプトのイージング.
  • mySpring : よくあるスクリプトのバネ運動.
  • (以下mx.trasitions.easingパッケージ使用)
  • None : まっすぐ.
  • Regular : 緩やかに近づく.
  • Strong : Regularよりハゲしく近づく.
  • Back : ちょっと行き過ぎてから戻る.
  • Elastic : バネのような動き.
  • Bounce : バウンドする.

いくらスクリプトの方がキレイな遷移を描くからといってスクリプトでイージングをするのは管理が悪くなるし,スクリプトに直接位置情報を書き込むのはあまりいい方法ではない.
少なくとも終着地点は大概デザインの情報なのでオーサリング(IDE上)で変えられた方がいい.
ってことは終着地点を示すMCを置いてあげたりして管理してあげた方がベター.

でも,Flash8からはカスタムイージングが使えるようになりました!(・∀・)/
そこで,[custom]ってやつがそれですが,[myEasing]とだいぶ近いトラジションになっているかと...
ただのアニメーションであればこれを使うのが1番いいと思います.

その下のNone以降はmx.transitions.easingパッケージを使ってみたもの.
でもこのパッケージってタイムラインエフェクトとかFlexとかで使うものであまりFlashのオーサリングでは使うものではない...?と思ったり.
この辺りのパッケージは mx.transitions.TransitionManagerこいつを起点に他のtransitions効果とeasingパッケージを使って行うっぽい.

よくある[myEasing]とかとは違ってフレーム数を指定するので必ず指定のフレーム数で終着地点へ落ち着く.
ちなみに引数でsetIntervalの仕様に変えられるみたいだけどあまりsetIntervalの仕様使わないと思う.

ダウンロード

参考)Macromedia Flash非公式テクニカルノート | Tweenクラス

以下はmx.transitions.easingを中を見てみスクリプトを(自分が)読みやすく書き直したサンプルです.


var duration = 50;
var targetX = this.goal_mc._x;
var firstX = this.none_mc._x; // none_mcを基準とする
var distance = targetX - firstX;

// easing
this.easing100_mc.onRelease = function() {
  this.gotoAndPlay(2);
};

// custom easing
this.custom_mc.onRelease = function() {
  this.gotoAndPlay(2);
};

// my easing
this.myEasing_mc.onRelease = function() {
  var easing = 0.1;
  
  this._x = firstX;
  
  this.onEnterFrame = function() {
    this._x += easing * (targetX - this._x);
    
    if (Math.abs(targetX - this._x) < 1)
      delete this.onEnterFrame;
  };
};


// my spring
this.mySpring_mc.onRelease = function() {
  var easing = 0.1;
  var springConstant = 0.8;
  var speedX = 0;
  var prevX = this._x;
  var count = 0;
  
  this._x = firstX;
  
  this.onEnterFrame = function() {
    speedX = speedX * springConstant + (targetX - this._x) * easing;
    this._x += speedX;
    
    if (Math.abs(this.prevX - this._x) < 1)
      delete this.onEnterFrame;
    
    if (count++ % 5 == 0)
      this.prevX = this._x;
  };
};

// None
this.none_mc.onRelease = function() {
  var currentTime = 0;

  this._x = firstX;

  this.onEnterFrame = function() {
    var timePercentage = currentTime / duration;
    var move = distance * timePercentage;
    
    this._x = move + firstX;
    
    if (currentTime++ >= duration)
      delete this.onEnterFrame;
  };
};

// Regular
this.regular_mc.onRelease = function() {
  var currentTime = 0;

  this._x = firstX;

  this.onEnterFrame = function() {
    var timePercentage = currentTime / duration;
    var mTimePercentage = 1 - timePercentage + 1; // 200% → 100%へと遷移するように調整
    var move = distance * (timePercentage * mTimePercentage);

    this._x = move + firstX;
    
    if (currentTime++ >= duration)
      delete this.onEnterFrame;
  };
};

// Strong
this.strong_mc.onRelease = function() {
  var currentTime = 0;
  var POW = 5; // (1 <= STRONG < ∞)

  this._x = firstX;

  this.onEnterFrame = function() {
    var timePercentage = currentTime / duration;
    var rTimePercentage = timePercentage - 1;
    var move = distance * (-Math.abs(Math.pow(rTimePercentage, POW)) + 1);

    this._x = move + firstX;

    if (currentTime++ >= duration)
      delete this.onEnterFrame;
  };
};

// Back
this.back_mc.onRelease = function() {
  var currentTime = 0;
  var MARGIN = 1.70158;
  var POW = 2;

  this._x = firstX;

  this.onEnterFrame = function() {
    var timePercentage = currentTime / duration;
    var rTimePercentage = timePercentage - 1;
    var move = distance * ((Math.abs(Math.pow(rTimePercentage, POW)) * ((MARGIN + 1) * rTimePercentage + MARGIN)) + 1);

    this._x = move + firstX;

    if (currentTime++ >= duration)
      delete this.onEnterFrame;
  };
};

// Elastic
this.elastic_mc.onRelease = function() {
  var currentTime = 0;
  var MARGIN = 1.70158;
  var POW = 2;
  var PERIOD_CONSTANT = 0.25;
  var PERIOD_ATTENUATION = 0.3;
  var period = duration * PERIOD_CONSTANT;
  var attenuation = period * PERIOD_ATTENUATION;

  this._x = firstX;

  this.onEnterFrame = function() {
    var timePercentage = currentTime / duration;
    var move;

    if (currentTime==0)
      move = 0; 
    if (timePercentage == 1)
      move = distance;

    move = (distance * Math.pow(2, -10 * timePercentage) * Math.sin((timePercentage * duration - attenuation) * (2 * Math.PI) / period) + distance);

    this._x = move + firstX;

    if (currentTime++ >= duration)
      delete this.onEnterFrame;
  };
};

// Bounce
this.bounce_mc.onRelease = function() {
  var currentTime = 0;
  var MARGIN = 1.70158;
  var POW = 2;

  this._x = firstX;

  this.onEnterFrame = function() {
    var timePercentage = currentTime / duration;
    var rTimePercentage = timePercentage - 1;
    var move = distance * ((Math.abs(Math.pow(rTimePercentage, POW)) * ((MARGIN + 1) * rTimePercentage + MARGIN)) + 1);

    if ((timePercentage) < (1 / 2.75)) {
      move = distance * (7.5625 * timePercentage * timePercentage);
    } else if (timePercentage < (2/2.75)) {
      timePercentage -= 1.5/2.75;
      move = distance * (7.5625 * timePercentage * timePercentage + 0.75);
    } else if (timePercentage < (2.5/2.75)) {
      timePercentage -= 2.25 / 2.75;
      move = distance * (7.5625 * timePercentage * timePercentage + 0.9375);
    } else {
      timePercentage -= 2.625 / 2.75;
      move = distance * (7.5625 * timePercentage * timePercentage + .984375);
    }

    this._x = move + firstX;

    if (currentTime++ >= duration)
      delete this.onEnterFrame;
  };
};


// play allボタン
this.playAllButton_mc.onRelease = function() {
  this._parent.easing100_mc.onRelease();
  this._parent.custom_mc.onRelease();
  this._parent.none_mc.onRelease();
  this._parent.regular_mc.onRelease();
  this._parent.strong_mc.onRelease();
  this._parent.back_mc.onRelease();
  this._parent.elastic_mc.onRelease();
  this._parent.bounce_mc.onRelease();
  this._parent.myEasing_mc.onRelease();
  this._parent.mySpring_mc.onRelease();
};


contributor nao : 2006年01月10日 21:32

trackback

trackback for this entry URL:
http://blog.graffiti-web.org/mt/mt-tb.cgi/381

comment

この検証、ツボにずっぽしです。
特にMacとかは再生スピード自体も変わってきますしね。
勉強になります。

contributor TT : 2006年01月11日 03:58


勉強になるしかわいいし、やられました

contributor lp : 2006年01月11日 22:26


>TTさん
参考になってよかったです.
macでの検証はいつも怠け気味です...

>lpさん
この大砲の画像探すのがすごい大変でしたw

contributor nao : 2006年01月12日 13:13


これはわかりやすいサンプルですねぇ。
とても参考になりました。ありがとうございます。

contributor 木本達朗 : 2006年01月13日 16:13


>木本さん
いえいえ参考になってなによりです.

contributor nao : 2006年01月14日 13:40