3_2:p5.play.Animationオブジェクトのメソッドとプロパティ

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。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA