PIXI.AnimatedSprite

今天介紹用PIXI.AnimatedSprite做影格動畫

做好每一格動畫的圖後，可以先用TexturePacker來做出相對應的spritesheet圖及json檔，只要直接匯入並選擇你要使用的套件，就可以會出相對應的格式喔，現在已經可以支援到PixiJS5了！

動動看
JS

let app = new PIXI.Application({width: 500, height: 500,backgroundColor:0xfafad2})
     document.body.appendChild(app.view)

     app.loader
        .add('spritesheet','./spriteSheet.json') //載入json
        .load(onAssetLoaded)//監聽載入完成，並執行onAssetLoaded()

    function onAssetLoaded() {
        const frames=[]
        for(let i=0;i<3;i++){
            frames.push(PIXI.Texture.from(`${i+1}.png`))
        } 
        let face=new PIXI.AnimatedSprite(frames)
        face.x = app.screen.width/2 //將AnimatedSprite置中
        face.y = app.screen.height/2 //將AnimatedSprite置中
        face.anchor.set(0.5) //將AnimatedSprite中心點，設至圖片中心
        face.animationSpeed=.1 //設置速度
        face.play() //開始動畫
        app.stage.addChild(face) //將AnimatedSprite加入stage
    }

JSON

{"frames": {

"1.png":
{
	"frame": {"x":0,"y":0,"w":118,"h":118},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":118,"h":118},
	"sourceSize": {"w":118,"h":118},
	"anchor": {"x":0.174648,"y":0.5}
},
"2.png":
{
	"frame": {"x":118,"y":0,"w":118,"h":118},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":118,"h":118},
	"sourceSize": {"w":118,"h":118},
	"anchor": {"x":0.174648,"y":0.5}
},
"3.png":
{
	"frame": {"x":236,"y":0,"w":118,"h":118},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":118,"h":118},
	"sourceSize": {"w":118,"h":118},
	"anchor": {"x":0.174648,"y":0.5}
}},
"meta": {
	"app": "https://www.codeandweb.com/texturepacker",
	"version": "1.0",
	"image": "spriteSheet.png",
	"format": "RGBA8888",
	"size": {"w":354,"h":118},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:284e27f896c7300d0fed1731537be3d6:68fd4826430705af2ee597f905a56731:01daf213c191fbc52b75953283de55c1$"
}
}

成果畫面：

要看更多PIXI.AnimatedSprite屬性可以看官網的介紹

～如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs5
[2]https://pixijs.io/examples/#/sprite/animatedsprite-explosion.js
[3]http://pixijs.download/release/docs/PIXI.AnimatedSprite.html