[Android] アニメーション補間クラスをグラフ化してみました

Android 標準のアニメーション補間クラス（Interpolator）の名前と効果がわかりづらかったので、グラフ化してみました。

グラフ化にあたっては、入力を 0.00 から 1.00 まで0.01 ずつ変化させ、プロットしています。

グラフ化してみると、AnticipateOvershootInterpolator のように、

出力の範囲（0.00～1.00）を飛び越えているものもあり、興味深いですね。

※@esmasui さんが作ってくださったアニメーション「Android Interpolations」（要Chrome？）が わかりやすいです！

AccelerateDecelerateInterpolator

core/java/android/view/animation/AccelerateDecelerateInterpolator.java

 

AccelerateInterpolator

core/java/android/view/animation/AccelerateInterpolator.java

 

AnticipateInterpolator

core/java/android/view/animation/AnticipateInterpolator.java

 

AnticipateOvershootInterpolator

core/java/android/view/animation/AnticipateOvershootInterpolator.java

 

BounceInterpolator

core/java/android/view/animation/BounceInterpolator.java

 

CycleInterpolator

core/java/android/view/animation/CycleInterpolator.java

 

DecelerateInterpolator

core/java/android/view/animation/DecelerateInterpolator.java

 

LinearInterpolator

core/java/android/view/animation/LinearInterpolator.java

 

OvershootInterpolator

core/java/android/view/animation/OvershootInterpolator.java

 

ソースコード

グラフ化にあたっては、Android 上で以下のようなソースコードを実装しました。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.WHITE);
    Paint paint = new Paint();
    paint.setColor(Color.BLUE);
    paint.setAntiAlias(true);
    OvershootInterpolator interpolator = new OvershootInterpolator();
    PointF points[] = new PointF[100];
    for (int i = 0; i < 100; i++) {
        points[i] = new PointF();
        points[i].x = i;
        points[i].y = 100 - interpolator.getInterpolation((float) i / 100) * 100;
    }
    canvas.save();
    {
        PointF offset = new PointF(50.0f, 150.0f);
        canvas.translate(offset.x, offset.y);
        for (int i = 0; i < 99; i++) {
            canvas.drawLine(points[i].x, points[i].y,
                    points[i + 1].x, points[i + 1].y, paint);
        }
        Paint framePaint = new Paint();
        framePaint.setColor(Color.BLUE);
        framePaint.setAntiAlias(true);
        framePaint.setStyle(Style.STROKE);
        canvas.drawRect(0, 0, 100, 100, framePaint);
    }
    canvas.restore();
}

 

備考

• 上記補間クラスを用いた実際のアニメーションについては、ApiDemos/Views/Animation/Interpolators で確認できます
• Interpolator インタフェースを実装したクラスを作成すれば、好きな補間クラスを作成できます
• ちなみに ActionScript を触っていた頃は下図のような補間関数を実装した Tweener ライブラリを使っていました
  （誰か、Android にも移植しないかな＾＾； Android 標準だと少ないですもんね。。。）

 

追記

• 2011/08/22：グラフの縦軸の座標系がわかりづらかったので、下から上に0から1に増えるように修正しました（@zaki50さんThanks!）
• 2011/08/23：以下のページのようなライブラリもあると教えて頂きました（@itoz さんThanks!）
  「[Java][Android] Javaのトゥイーンライブラリ「Java Universal Tween Engine」を使ってみた。 | R o m a t i c A : Blog : Archive」
• 2011/08/27：@esmasui さんが Processing.js でアニメーションしてくれました！
  「Android Interpolations」