フレームアニメーション (パラパラアニメ) する
フレームアニメーションを行うには g.FrameSprite
を利用します。
凡例
javascript
var frameSprite = new g.FrameSprite({
..., // その他のプロパティ
src: scene.asset.getImage("/image/explosion.png"),
// 元画像のフレーム 1 つのサイズ
srcWidth: 100,
srcHeight: 100,
// アニメーションに利用するフレームのインデックス配列
frames: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
loop: true // アニメーションをループする(省略した場合ループする)
});
scene.append(frameSprite);
frameSprite.start(); // アニメーションを開始する
描画内容ではなく、画像そのものを動かすには onUpdate
トリガーを利用する か、 より簡潔に複雑なアニメーションを行う akashic-timeline
を利用してください。
利用例
次のコンテンツは、画像アニメーションして表示します。
詳細
フレームアニメーションを行うには g.FrameSprite
を利用します。
FrameSprite
は src
プロパティに指定された画像を、幅 (srcWidth
), 高さ (srcHeight
) 単位で区切られた小さな画像の集まりと解釈します。各フレームの画像は左上から順に 0 から始まるインデックスで参照されます。frames
プロパティは指定されたインデックスを順番に描画することでアニメーションを実現します。
最初に表示するフレームを指定する frameNumber
プロパティやフレーム遷移の速度を指定する interval
を指定することができます。
アニメーションは start()
メソッドを呼び出すまで開始されません。アニメーションを終了したい場合は、 stop()
メソッドを呼び出します。