Processingでアニメーション制御をするときは、毎回計算して実装していたんですが、結構面倒なのでEasingとかRepeatとか制御するライブラリでも作ろうかと思っていたら、ちょうどいいライブラリを見つけました。

java-universal-tween-engine - The Universal Tween Engine allows you to create smooth interpolations on every attribute from every object in your project ! - Google Project Hosting

Androidで利用している以下の例などを参考に、Processingで実装してみました。

java-universal-tween-engine - トゥイーンエンジンでダイナミックな変化を « androidnote

Processingへのライブラリ追加は、過去記事を参考にしてください。

Tips : Processing で外部Libraryを追加する方法 - [séns]

アニメーションをあてるオブジェクトを用意する

Universal Tween Engineはアニメーション制御の仕組みと、インターポーレーションの計算などを行ってくれるエンジンで、その計算結果を当てるオブジェクトは任意に用意することができます。

今回は、自作アプリ試作のコードで試してみました。タイトルを構成する文字画像ファイルを持つオブジェクトを用意して、それをバウンスで動かしてみます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


public class TitleChar {
    private PImage body = null;
    private float posX = 0;
    private float posY = 0;

    public TitleChar() {
    }

    public void setImage(String imagePath) {
        body = loadImage(imagePath);
    }

    public float getX() {
        return posX;
    }

    public float getY() {
        return posY;
    }

    public void setX(float posX) {
        this.posX = posX;
    }

    public void setY(float posY) {
        this.posY = posY;
    }

    public void draw() {
        pushMatrix();
        translate(posX, posY);
        image(body, 0, 0);
        popMatrix();
    }
}

TweenAccessorを用意する

次にインターポーレーションを制御するインターフェイスを実装します。アニメーション指定するときに必要になるオブジェクトになります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


public class TitleCharAccessor implements TweenAccessor<TitleChar> {
    public static final int POSITION_XY = 0;

    @Override
    public int getValues(TitleChar target, int tweenType, float[] returnValues) {
        returnValues[0] = target.getX();
        returnValues[1] = target.getY();

        return 2;
    }

    @Override
    public void setValues(TitleChar target, int tweenType, float[] newValues) {
        target.setX(newValues[0]);
        target.setY(newValues[1]);
    }
}

TimelineとTweenManagerを用意する

とりあえず動作させてみようと思っていたので、後で詳しく調べるとして、まず参考コードをトレースしてTimelineとTweenManagerによるupdateを実装しました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


TitleChar o = new TitleChar();
TweenManager manager;
long startTime = System.currentTimeMillis();

void setup(){
    size(1280,720);

    Tween.registerAccessor(TitleChar.class, new TitleCharAccessor());
    manager = new TweenManager();
    o.setImage('imgs/photo_o.png');
    Timeline.createSequence()
        .push(Tween.to(o, TitleCharAccessor.POSITION_XY, 1.0f).target(500,500).ease(Bounce.OUT))
        .repeat(5, 0.5f)
        .start(manager);
}

これでタイムラインと、アニメーションのセットができたので、あとはTweenManagerを通して進行させるだけです。

TweenManager#updateをonDrawで実装する

参考サイトにならって、実行開始後2秒たってからアニメーションを開始するようにしてあります。スピードは動作をみるために0.01f固定にしています。

1
2
3
4
5
6
7
8
9


void draw(){
    background(color(249, 193, 74));

    if ((startTime + 2000) < System.currentTimeMillis()){
        manager.update(0.01f);
    }

    o.draw();
}

まとめ

以上でアニメーション動作の確認ができました。

Timelineを使うことで、複数のオブジェクトのアニメーションを独立させつつ同時に制御したりできるようなので結構使えそうです。また、Easingも基本的な関数は用意されているようなので、楽に実装できそうです。

今回のコードは以下にあります。

tomoyukim/processing_tween_sample · GitHub

Processing アニメーションプログラミング入門 Amazonで見る