スポンサーサイト

ばねでイージング

イージングにバネっぽい動きを使ってみました。

「ばね」はバネの強さで、数字が大きいほどひっぱる力が強いデス。
「減衰」は収束する速さで、小さいほど収束するのが早いデス。1でまったく減衰しないデス。

「位置」は'_x'プロパティ、「大きさ」は'_width','_height'プロパティ、角度は'_rotation'プロパティ、「ブラー」はBlurFilterのブラーの強さをフレーム毎に変化させています。

変化量は、変化量をp'、直前の変化量をp、「ばね」をk、「減衰」をa、バネの伸びをlとすると

  p' = p * a + l * k

といったカンジで算出しています。

ActionScriptは以下のようなカンジです。

import flash.filters.BlurFilter;
// ばね定数
var k:Number;
// 減衰定数
var a:Number;
// 初期情報の保存
jien_mc.orgX = jien_mc._x;
jien_mc.orgY = jien_mc._y;
jien_mc.orgW = jien_mc._width;
jien_mc.orgH = jien_mc._height;
jien_mc.orgR = jien_mc._rotation;

// 再生フレーム数
var max:Number = 30 * 10;

// ムービークリップの初期化
function initMC() {
  jien_mc.filters = [];
  jien_mc._x = jien_mc.orgX;
  jien_mc._y = jien_mc.orgY;
  jien_mc._width = jien_mc.orgW;
  jien_mc._height = jien_mc.orgH;
  jien_mc._rotation = jien_mc.orgR;
}

// 位置ボタン
move_btn.onRelease = function () {
  initMC();
  // 定数
  k = Number(k_txt.text);
  a = Number(a_txt.text);
  // 移動初期位置
  jien_mc._x = 0;
  // かかっている力
  jien_mc.xp = 0;
  var cnt:Number = 0;
  // フレーム毎に位置を変化
  jien_mc.onEnterFrame = function () {
    // カウンタが再生フレーム数に達したら終了
    if (cnt++ > max) {
      this._x = this.orgX;
      delete this.onEnterFrame;
      return;
    }
    // ばねの伸び
    var lx:Number = this.orgX - this._x;
    // かかっている力
    this.xp = this.xp * a + lx * k;
    // 移動
    this._x += this.xp;
  }
}

// 大きさボタン
size_btn.onRelease = function () {
  initMC();
  // 定数
  k = Number(k_txt.text);
  a = Number(a_txt.text);
  // 初期サイズ
  jien_mc._width /= 10;
  jien_mc._height /= 10;
  // かかっている力
  jien_mc.xp = 0;
  jien_mc.yp = 0;

  var cnt:Number = 0;
  // フレーム毎にサイズを変化
  jien_mc.onEnterFrame = function () {
  // カウンタが再生フレーム数に達したら終了
    if (cnt++ > max) {
      delete this.onEnterFrame;
      return;
    }
    // ばねの伸び
    var lx:Number = this.orgW - this._width;
    var ly:Number = this.orgH - this._height;
    // かかっている力
    this.xp = this.xp * a + lx * k;
    this.yp = this.yp * a + ly * k;
    // サイズ変更
    this._width += this.xp;
    this._height += this.yp;
  }
}

// 角度ボタン
rotation_btn.onRelease = function () {
  initMC();
  // 定数
  k = Number(k_txt.text);
  a = Number(a_txt.text);
  // 初期角度
  jien_mc.r = -360;
  // かかっている力
  jien_mc.rp = 0;

  var cnt:Number = 0;
  // フレーム毎に角度を変化
  jien_mc.onEnterFrame = function () {
    // カウンタが再生フレーム数に達したら終了
    if (cnt++ > max) {
      delete this.onEnterFrame;
      return;
    }
    // ばねの伸び
    var lr:Number = this.orgR - this.r;
    // かかっている力
    this.rp = this.rp * a + lr * k;
    // 角度変更
    this.r += this.rp;
    this._rotation = this.r;
  }
}

// ブラーボタン
blur_btn.onRelease = function () {
  initMC();
  // 定数
  k = Number(k_txt.text);
  a = Number(a_txt.text);
  // 初期ブラー
  jien_mc.b = 64;
  // かかっている力
  jien_mc.bp = 0;
  var cnt:Number = 0;
  // フレーム毎にアルファを変化
  jien_mc.onEnterFrame = function () {
    // カウンタが再生フレーム数に達したら終了
    if (cnt++ > max) {
      delete this.onEnterFrame;
      return;
    }
    // ばねの伸び
    var lb:Number = 0 - this.b;
    // かかっている力
    this.bp = this.bp * a + lb * k;
    // ブラー変更
    var absB:Number = Math.abs(this.b);
    var filter:BlurFilter = new BlurFilter(absB, absB, 1);
    this.filters = [filter];
    this.b += this.bp;
  }
}

jien_mcは、イージング対象のムービークリップです。
ムービークリップのonEnterFrameイベントハンドラで、変化量の算出とムービークリップのプロパティの変更をしています。