アニメーション プログラミング

Animation Programming
情報表現基礎 1
アニメーションを作るには？
• パラパラ漫画と同じ原理
A
• ブロック崩しの時は
ボールの座標を少しずつ増減させた
x = x + dx
y = y + dy
x = x + dx
y = y + dy
x = x + dx
y = y + dy
アニメーションを作るには？
A
「Aまで来た！」を
どうやって判定する？
加速？減速？
速さは？
何秒かける？
B
実はやることがたくさんある
アニメーションライブラリ “Ani”
簡単にアニメーションを制御できる枠組み
Step1
Aまで移動
時間：4秒
動き：減速
A
Step1が終わったら…
Step２
Bまで移動
時間：２秒
動き：加速
B
Aniのサンプルを動かしてみよう
• Aniライブラリをインポートする
• Processing起動
スケッチ
→ライブラリをインポート
→ライブラリを追加
Aniのサンプルを動かしてみよう
• Aniライブラリをインポートする
上から5つ目の“Ani”をクリック
Installをクリック
インポート完了！
Aniのサンプルを動かしてみよう
• サンプルファイルのDL
授業Wikiページの
Sample.zipをダウンロード
• サンプルの実行
Sample.zipを展開
sample1.pdeを実行
ソースコードの解説
2.0秒かけて
バウンドの軌道で
setup()16 行目
Ani.to(this, 2.0, "y:280", Ani.BOUNCE_OUT);
yが現在の値から
280まで徐々に変化
draw()22 行目
ellipse(width/2, y , 40, 40);
ボールの動きを変える
バウンド以外にも
様々な動きが用意されている
参考：
http://www.looksgood.de/libraries
/Ani/Ani_Cheat_Sheet.pdf
アニメーションの繋ぎ合わせ
達成
Step1
Aまで移動
時間：4秒
動き：減速
A
どうやってつなげる？
未達成
Step２
Bまで移動
時間：２秒
動き：加速
B
アニメーションの繋ぎ合わせ
(sample2.pde)
seq = new AniSequence(this);
アニメーションを登録する箱
seq.beginSequence();
seq.add(Ani.to(this, 2, “y:280”));
seq.add(Ani.to(this, 2, “x:100”));
seq.endSequence();
ここから
Step1の動き
Step2の動き
ここまで
seq.start();
登録したアニメーションを再生
登録
1ステップでふたつ動かす
seq.beginSequence();
ステップ１
seq.add(Ani.to(this, 2, "y:280"));
ステップ２
seq.beginStep();
seq.add(Ani.to(this, 2, "y:100"));
seq.add(Ani.to(this, 2, "x:150"));
seq.endStep();
seq.endSequence();
beginStep() と
endStep() で囲むと
1ステップとして実行
Stepの開始時/終了時に関数を実行
A
ステップ1 開始時
ボールを出現
ステップ2終了時
サーボを動かす
B
Stepの開始/終了時に関数を実行 (sample3.pde)
Ani.to(this, 2, “y:280”, Ani.BOUNCE_OUT,
“onStart : funcA, onEnd : funcB");
void funcA(){
//開始時の処理
}
void funcB(){
//終了時の処理
}
関数の名前を書いておくと実行してくれる
onStart： 開始時に実行する関数
onEnd ： 終了時に実行する関数
Tips-1
同
じ
処
理
Ani.to(this, 2.0, “x:100");
Ani.to(this, 2.0, “y:280");
Ani.to(this, 2.0, “x:100, y:280”);
同じ時間で動かす場合、
一つにまとめることができる
Tips-2
Ani.to(this, 2.0, "y:280");
同
じ
処
理
この記法では
変数を入れることができない
int position = 280;
Ani.to(this, 2.0, “y”, position);
分けて書くと
変数を扱うことができる
Ani 公式サイト
• Ani - An animation library for Processing
http://www.looksgood.de/libraries/Ani/
- サンプルプログラムが豊富。
- ここで紹介した以外の機能もたくさんあります。
いろいろ試してみましょう。
- 困ったらリファレンスを読んでみよう。英語だけど。
（もちろん授業中はTAを頼ってもよい）