Animationオブジェクトにはplay()やstop()のほかにもメソッドやプロパティがあり、詳細はp5.playのリファレンスページで読むことができます。以降では、主なメソッドとプロパティを見ていきます。
目次
nextFrame()とpreviousFrame()
AnimationオブジェクトのnextFrame()はメソッド次のフレームに進んで停止し、previousFrame()メソッドは前のフレームに戻って停止します。両方のメソッドとも循環します。つまりnextFrame()への呼び出しは、最後のフレームの次は最初のフレームに戻り、previousFrame()への呼び出しは、最初のフレームの次は最後のフレームに戻ります。
次のサンプルは、Web上の紙芝居やプレゼンテーションで使えそうな簡単なスライドアプリです。
let slideAnim;
function preload() {
// 読み込む画像は3枚
slideAnim = loadAnimation('assets/slide/s0.png', 'assets/slide/s2.png');
}
function setup() {
createCanvas(500, 400);
// アニメーションの再生は止めておく
slideAnim.stop();
const nextButton = createButton('進む ->');
nextButton.position(100, 420);
nextButton.size(100, 30);
nextButton.mousePressed(goToNext);
const backButton = createButton('<- 戻る');
backButton.position(300, 420);
backButton.size(100, 30);
backButton.mousePressed(goToPrevious);
}
function draw() {
background(225);
animation(slideAnim, 250, 200);
}
function goToNext() {
// 前向きに循環する
slideAnim.nextFrame();
}
function goToPrevious() {
// 後ろ向きに循環する
slideAnim.previousFrame();
}
リファレンスメモ
Animation.nextFrame()
nextFrame ()
次のフレームに進んで止まる。
Animation.previousFrame()
previousFrame ()
前のフレームに戻って止まる。
goToFrame()
Animation.goToFrame()メソッドを使用すると、アニメーションを目的のフレームまで(順/逆)再生することができます。次のサンプルは上記の改変版で、一定の間隔をおいて、スライドが自動で変化します。
let slideAnim;
let startButton;
let rewindButton;
// 1つの画像を表示しておく時間(ミリ秒)
const interval = 1000;
function preload() {
// 読み込む画像は53枚
slideAnim = loadAnimation('assets/slide/s0.png', 'assets/slide/s4.png');
}
function setup() {
createCanvas(500, 400);
// アニメーションの再生は止めておく
slideAnim.stop();
startButton = createButton('スライド開始');
startButton.position(100, 420);
startButton.size(100, 30);
// ボタンのmouseClicked()に関数名を指定する方法
startButton.mouseClicked(start);
rewindButton = createButton('最初に戻る');
rewindButton.position(300, 420);
rewindButton.size(100, 30);
// ボタンのmouseClicked()に無名関数を指定する方法
rewindButton.mouseClicked(() => {
// アニメーションをフレーム1に戻す
slideAnim.rewind();
// 開始ボタンを有効にする
startButton.elt.disabled = false;
});
}
function draw() {
background(225);
animation(slideAnim, 250, 200);
}
function start() {
// アニメーション中はボタンを無効にしておく
startButton.elt.disabled = true;
rewindButton.elt.disabled = true;
// 1フレームずつ次のフレームに移動するアニメーション。
// 1フレームを表示する時間は変数intervalで指定する
const autoTimerID = window.setInterval(() => {
// 最終フレームまで行ったらアニメーションを終わる
const currentFrame = slideAnim.getFrame();
const lastFrame = slideAnim.getLastFrame();
// 今のフレームと最終フレームが同じなら、
// 最終フレームまで行ったということなので、アニメーションを終える
if (currentFrame === lastFrame) {
window.clearInterval(autoTimerID);
console.log('終了');
// 巻き戻しボタンを有効にする
rewindButton.elt.disabled = false;
}
// 今のフレームより1つ先のフレームに進む
slideAnim.goToFrame(currentFrame + 1);
}, interval);
}
一定の間隔を置いたスライドの変化にはJavaScriptのwindow.setInterval()メソッドを使っています。上記コードでは、変数intervalに代入する数値の大小で時間間隔が調整できます。
Animation.geToFrame()メソッドは指定されたフレームが存在しない場合には、何も行いません。したがってどんどん先に進んでも(または後に戻っても)、Animationオブジェクト並ぶフレームのどちらかの端で止まることになります。上記サンプルではまた、p5.jsのp5.Elementのeltプロパティを利用して、ボタンの有効化と無効化を適切なタイミングで切り替えています。
リファレンスメモ
Animation.goToFrame()
goToFrame ( toFrame )
アニメーションを、ターゲットフレームに向けて、順または逆再生する。
パラメータ
toFrame Number – 行先のフレーム番号(0から始まる)
Animation.rewind()
rewind ()
アニメーションを最初のフレームまで巻き戻す。
Animation.getLastFrame()
getLastFrame () Number
最後のフレーム番号を返す。
戻り値
Number: 最後のフレーム番号(0から始まる)
changeFrame()
Animation.changeFrame()メソッドを使用すると、描画するフレームを変更することができます。以下は、p5.dom.jsのスライダーコントロールで、アニメーションのフレームを制御するサンプルです。スライダーのつまみを左右にドラッグすると、ゴルフスイングのイラストが変化します。
let swingAnim;
let slider;
function preload() {
swingAnim = loadAnimation('assets/sw/sw0.png', 'assets/sw/sw12.png');
}
function setup() {
createCanvas(500, 400);
// アニメーションの再生は止めておく
swingAnim.stop();
frameRate(12)
// スライダーを作成
slider = createSlider(0, 120, 0, 1);
slider.size(300, 50)
slider.position(100, 300);
textSize(32);
fill(255, 255, 80);
}
function draw() {
background(80);
text('Golf Swing', 10, 40);
animation(swingAnim, 250, 200);
// スライダーの現在値を取得し、フレーム番号に合うように調整
const sliderVal = Math.floor(slider.value() / 10);
// 現在のフレームをsliderValに変更する
swingAnim.changeFrame(sliderVal);
}
リファレンスメモ
Animation.changeFrame()
changeFrame ( frame )
現在のフレームを変更する、
パラメータ
frame Number – フレーム番号(0から始まる)
Animation.looping
looping Boolean
falseに設定すると、アニメーションは最後のフレームに到達した後停止する。デフォルトはtrue。
Animation.playing
playing Boolean
アニメーションが現在再生中の場合true。デフォルトはtrue。
Animation.visible
visible Boolean
アニメーションが見えるかどうか。デフォルトはtrue。