背景
UnityにてDOTweenなるアニメーションライブラリを普段から利用しており、Processingでも似たようなUIアニメーションを実装したい場面に遭遇したのでライブラリを探しました。
Aniライブラリというシーケンシャルなアニメーションを実装できるライブラリを見つけたので、その簡単な利用方法をまとめます。
公式ページ
対象者
Processingにてゲームのような動きのあるプログラムを書いたことがある人を対象としています。
イージングという用語を掘り下げて説明している為、知っている人にとっては冗長な説明になってしまいますが、ご了承ください。
準備
Processing3(筆者のバージョンは3.3.7)をインストールしておいてください。
次にライブラリをダウンロードします。スケッチ＞ライブラリ＞ライブラリを追加でライブラリウィンドウを出します。
その後、著者がBenedikt GrossさんのAniライブラリを以下の手順でインストールします。
概要
Aniライブラリの基礎部分のみを紹介致します。筆者もこのライブラリを見つけて10秒経たないくらいで記事を書き始めたため、大した事は書いていません。
それでも助けになれば幸いです。
以下のような手順で説明します。
1. 基本的な利用方法
2. イージングタイプを指定した様々なアニメーション
3. シーケンスを用いたアニメーション
4. コールバックの登録
それぞれの章で、プログラムのみを掲載しております。
実行結果を掲載しようと努力しましたが、難しいため各自で動作確認をお願いいたします。
では、手順に沿ってやってみましょう。
1.基本的な利用方法
まずは、基本的な利用方法を学びましょう。
必要に応じてコメントを書いています。
import de.looksgood.ani.*; //必ずimportしてね
float x = 0;
void setup(){
size(200, 100);
smooth();
noStroke();
Ani.init(this); //初めに、必ずAniクラスをこれで初期化。
//Ani.to(this, 秒数, "グローバル変数名", 対象数値);
Ani.to(this, 3, "x", 200); //xの値を3秒後に200に変更する
}
void draw(){
background(255);
fill(255, 0, 0);
ellipse(x, 50, 20, 20);
}
重要なポイントは以下の二つです。
1.Ani.init(PApplet applet);で初期化
2.Ani.to(対象の変数をフィールドに持つオブジェクト, 秒数, 対象の変数名, 目標値);
1番に関しては、Aniクラス内の関数を使う前に必ず呼び出さなければいけませんね。
2番に関しては、対象とする変数型は(int, float, double, PVector)です。（多分）
フィールドに宣言した変数を文字列にて参照するので、変数名変更時は要注意です。
（しかし文字列で変数参照とはどういう仕組みで動いているんでしょうか・・・？）
2.イージングタイプを指定した様々なアニメーション
次に、イージングタイプを指定したアニメーションの例を紹介します。
では、そもそもイージングとはなんでしょうか？
私たちが生きる世界で何か物が落ちたり、跳ねたりする際、物が一定速度で動くことは無いと思います。そのような加速減速をプログラムとして数学的に組み込んだものがイージングと呼ばれるものです。
イージングの動作はこちらをご覧ください。
では、コードを見てみましょう。
import de.looksgood.ani.*;
float x = 0;
void setup() {
size(200,100);
smooth();
noStroke();
Ani.init(this);
Ani.to(this, 3, "x", 200, Ani.LINEAR); //第五引数にイージングタイプの指定（線形）
}
void draw() {
background(255);
fill(255, 0, 0);
ellipse(x, 50, 20, 20);
}
重要なポイントは以下の一つです。
1.Ani.toメソッドの第五引数にAni.LINEARと追加しただけです。;
このAni.LINEAR以外にもたくさんの種類が用意されています。
イージングタイプを説明する際は、移動量と時間を掛け合わせた線グラフで良く説明します。
気になる方は、こちらをご覧ください。
3.シーケンスを用いたアニメーション
シーケンス(sequence)を訳すと、「～を順序付ける」や「～を並べると」いう意味です。
その意味の通り、AniSequenceクラスを使用すると、順序通りにアニメーションを実行する事が可能です。
では、コードを見てみましょう。
import de.looksgood.ani.*;
float x = 0;
float y = 0;
void setup() {
size(512, 512);
smooth();
noStroke();
Ani.init(this);
AniSequence seq = new AniSequence(this); //シーケンスの準備を行う
seq.beginSequence(); //シーケンスの登録開始
seq.add(Ani.to(this, 2, "x", 500, Ani.LINEAR)); //１番目のアニメ
seq.add(Ani.to(this, 2, "y", 500, Ani.LINEAR)); //２番目のアニメ
seq.beginStep(); //複数のアニメーションを同時に行う宣言
seq.add(Ani.to(this, 2, "x", 0, Ani.LINEAR)); //3-1番目のアニメーション
seq.add(Ani.to(this, 2, "y", 0, Ani.QUAD_IN)); //3-2番目のアニメーション
seq.endStep(); //複数のアニメーション登録の終了
seq.endSequence(); //シーケンスの登録終了
seq.start(); //シーケンスに登録したアニメーションをスタートする
}
void draw() {
background(255);
fill(255, 0, 0);
ellipse(x, y, 20, 20);
}
重要なポイントは以下の四つです。
1.beginSequenceメソッドでアニメーションを開始し、endSequenceメソッドでアニメーションを終了する宣言をする。
2.addメソッドでアニメーションを順番に登録。
3.一度の順序内で複数アニメーションをbeginStepメソッドで登録開始、endStepメソッドで終了する宣言をする。
4.startメソッドで登録されたアニメーションを開始。
seq.stop()でアニメーションを停止、seq.resume()でアニメーションを一時停止する事が可能です。
4.コールバックの登録
コールバックとは、アニメーションが完了した際に呼ばれる関数のことです。
自分で宣言した関数を登録する事が出来ます。
ではコードを見てみましょう。
import de.looksgood.ani.*;
float x = 0;
float y = 0;
void setup() {
size(512, 512);
smooth();
noStroke();
Ani.init(this);
Ani.to(this, 3, "x", 512, Ani.SINE_IN, "onStart:startExe, onUpdate:updateExe, onEnd:endExe");
}
void draw() {
background(255);
fill(255, 0, 0);
ellipse(x, height / 2, 20, 20);
}
void startExe(Ani theAni){
println("start animation");
}
void updateExe(Ani theAni){
println("update animation");
}
/*
引数なしでもOK
void updteExe(){
}
*/
void endExe(Ani theAni){
println("end animation");
}
重要なポイントは以下の二つです。
1.登録したいメソッドを引数無しか、Ani型を引数に取るメソッドで宣言する。
2.toメソッドの第六引数に文字列で"onStart:開始時に呼び出したいメソッド名, onUpdate:アップデート時に呼び出したいメソッド名, onEnd:終了時に呼び出したいメソッド名"として登録する。全てのメソッドを登録する必要はない。
まとめ
簡単ではありますが、Aniライブラリの説明は終了します。
アニメーションを自前で実装するとなるとなかなか大変ですが、このライブラリを使うと楽にアニメーションを実装する事が出来ますね。
皆さんもこのライブラリを使ってみてください！