Easing(イージング)の公式と復習

インタラクティブなことやホームページ等のJavaScriptでもイージングは使うことが多いので公式と復習を兼ねて覚書

Easing(イージング)とは

Easing(イージング)とは、エフェクトの動きを加速/減速させる、直線的でない滑らかな動きを付与したものをEasing(イージング)と言います。
例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。

Easing(イージング)の公式

AS、JavaScriptともにそうですが、この公式でフェードイン、フェードアウト、動きのEasing(イージング)まで対応可能。
日本語で表記すると下記のようになります。

現在の値 += (目標値 - 現在の値) * イージング係数

で実際のプログラムだとこうなります。0.5秒の変化

nowValue += (tagetValue - nowValue) * 0.05;

座標0から800まで0.5秒のx軸移動

Processingで記述

float nowValue = 0;
float tagetValue = 800;

void setup(){
  size(800,500);
}

void draw(){
    background(0);
    // 現在の値 += (目標値 - 現在の値) * イージング係数
    nowValue += (tagetValue - nowValue) * 0.05;
    ellipse(100, 100, 30, 30);
}

X軸 Easing(イージング)実行結果

サイズの大きさので0から来てないように見えますが0から800まで動いています。

RBG 0～256まで0.5秒のフェード変化

Processingで記述

float nowValue = 0;
//色の指定
float tagetValue = 256;

void setup(){
  size(500,500);
}

void draw(){
    // 現在の値 += (目標値 - 現在の値) * イージング係数
    nowValue += (tagetValue - nowValue) * 0.05;
    colorMode(RGB,256);
    // 縁線を消す
    noStroke();
    // Bを0～256までイージングさせる（フェードさせる）
    fill(0,0,nowValue);
    //図形の描画
    rect(140, 140, 250, 250);
}

Originally posted 2016-01-06 11:55:03.