tmdf.net | Shapetween

何か書かないと永遠に放置しそうになるので久しぶりに投稿。
今回はActionScriptじゃなくてProcessingについて。

ActionScriptだと「Tweener」というアニメーションライブラリが有名でとても便利なんだけど、Processingだと「Shapetween」が同じようなライブラリにあたるみたい。このライブラリについて、日本語であまり解説されていないみたいなので、Tweenerとちょっと比べてみました。

まず、考え方で大きく違うのはTweenerはオブジェクト（DisplayObejct?）にアニメーションを指定するのに対して、Shapetweenではそれ自体がオブジェクトだということ。だからShapetweenでは、time()とposition()という2つのメソッドで0〜1までのfloat（ActionScriptだとNumber）を取得し、それを任意のオブジェクトのプロパティなどに代入するといった具合で使います。

描画の概念が違うのでActionScriptと比べること自体ナンセンスな感じがするけど、下のプログラムは、マウスを押すたびに赤い円のサイズが大きくなる両プログラムのサンプル。ActionScriptの方はWonderflに追加してみました。

import megamu.shapetween.*;

Tween tweener;

//設定
void setup() {

	//アニメーション設定
	tweener = new Tween(this, 1, Tween.SECONDS, Shaper.LINEAR);

	//一度だけ実行（リピートしない）
	tweener.setPlayMode(Tween.ONCE);

	//描画設定（線なし、塗り赤）
	noStroke();
	fill(255, 0, 0);
}

//描画
void draw() {

	//初期化
	background(255);

	//円を描画
	ellipse(width / 2, height / 2, tweener.position() * 100, tweener.position() * 100);
}

//マウスが押された場合
void mousePressed() {

	//アニメーション再開
	tweener.start();
}

package {
	import caurina.transitions.Tweener;
	import flash.events.MouseEvent;
	import flash.display.Sprite;

	public class Main extends Sprite {

		private var Circle_mc:Sprite;

		public function Main():void {

			//赤い円を描画
			Circle_mc = new Sprite();
			addChild(Circle_mc);
			Circle_mc.graphics.beginFill(0xFF0000, 1.0);
			Circle_mc.graphics.drawEllipse(0, 0, 1, 1);
			Circle_mc.graphics.endFill();

			//リスナー
			stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
		}

		//マウスが押された場合
		private function MouseDown(e:MouseEvent):void {

			//アニメーション解除
			Tweener.removeTweens(Circle_mc);

			//サイズを初期化
                        Circle_mc.x = Circle_mc.y = 50;
			Circle_mc.width = Circle_mc.height = 1;

			//アニメーション開始
			Tweener.addTween(Circle_mc, {
				x			:0,
				y			:0,
				width		:100,
				height		:100,
				time		:2.0,
				transition	:"liner"
			});
		}
	}
}