Blog / 開発者ブログ

AndroidのInterpolatorをlibGDXを使ってグラフ化してみた

2015.6.9

少し前の話ですが、Android Support Library, revision 22.1.0に、Material Design対応を行う上で重要なInterpolatorが追加されました。これは、Authentic motionを実現する上で必要な動きを実現するためのクラスです。

Interpolatorとは

開始点〜目的点までのアニメーションを補間してくれるクラスです。
例えば、y座標を0から100まで変更するアニメーションがあったとして、単純に値を0.01秒に1進ませるようなプログラミングを行うと、最初から最後まで同じ速度で移動します。そこにInterpolatorを挟むと、「最初は早いけれどだんだん遅くなるアニメーション」「バウンドするようなアニメーション」などを簡単に実現できるようになります。

今回、このInterpolatorが、どのようにアニメーションを補間してくれるのかをグラフ化するアプリを、libGDXで作成してみました。

作ったもの

libgdx intrpolator screenshot

こちからから実際に試していただくことが出来ます。

ダウンロードには、Releasesページを開き、下のリンクをクリックします。

20150609_download

以下の様な特徴があります。

  • Android、デスクトップ環境(Windows/Mac/Linux)、iOS、HTMLで動作する
  • libGDXはOpenGLを通しているので、高速に動作する
  • Android OSメジャーアップデート時に新しいInterpolatorが出ても動作する
    • Android上では、 android.R.interpolator のリソースをリフレクションで取り出しているため。

ソースコード的にはほとんど問題ないはずので、ビルド通ればiOS/ブラウザ上でも動くと思うんですが、ちょっと時間が取れませんでした。。1

Interpolatorの一覧の取得は下のようなコードで実現してます。

@Override
public ArrayList<Interpolator> create() throws IllegalAccessException {
    ArrayList<Interpolator> list = new ArrayList<>();

    Class<android.R.interpolator> interpolatorClass = android.R.interpolator.class;
    Field[] fields = interpolatorClass.getDeclaredFields();

    int i = 0;
    for (Field field : fields) {
        field.setAccessible(true);
        int value = field.getInt(null);
        Interpolator interpolator = AnimationUtils.loadInterpolator(context, value);
        list.add(interpolator);
    }

    // Add Support library Interpolators
    list.add(new FastOutLinearInInterpolator());
    list.add(new FastOutSlowInInterpolator());
    list.add(new LinearOutSlowInInterpolator());

    return list;
}

実はこういったグラフを作成するものはいくつもある

Interpolatorの時間軸と変化の度合いで可視化するツールというのは、既にあります。

それでも作ったのは、下のような理由です。

  • Material Designのグラフ可視化が欲しかった
  • 快適に動くマルチプラットフォームでの確認ツールが欲しかった
  • ブログのネタに調度良かった(!)
  • libGDXのAPI触ってみたかった(?)

libGDXのScene2Dを利用したりもしてるので、Android側の処理とlibGDXを連携するサンプルとしても使えたりするかもしれません。よければ参考の一つとしてお使いください。


  1. (追記: 2015-06-18 htmlとiOSに対応しました。)