PIXI.ParticleContainer
今天介紹用PIXI.ParticleContainer
做粒子動畫
動動看
const app = new PIXI.Application();
document.body.appendChild(app.view);
let particle = new PIXI.ParticleContainer(10000,{
position:true,
rotation: true
}
)
app.stage.addChild(particle)
let animate = []
for (let i = 0; i < 100; i++)
{
let me = PIXI.Sprite.from("./me.png");
me.anchor.set(0.5)
particle.addChild(me)
animate.push(me)
}
app.ticker.add(delta=>{
for (let i = 0; i < 100; i++)
{
sprite=animate[i]
sprite.x=Math.random()*app.screen.width* delta
sprite.y=Math.random()*app.screen.height* delta
sprite.rotation-=0.01 * delta
}
})
成果畫面:
要看更多PIXI.ParticleContainer
屬性可以看官網的介紹
到後面幾天開始去新公司上班我都不知道我在寫什麼,有時候一知半解還是硬著頭皮寫出來,可能有很多錯QQ
希望之後有空再回來review一次,謝謝前公司同事找我參加,要不然我自己參加可能早就中途放棄了,耶~終於可以早點睡覺了~
~如有疑問或是錯誤,歡迎不吝指教~
參考來源:
[1]http://pixijs.download/release/docs/PIXI.ParticleContainer.html
[2]https://pixijs.io/examples/#/demos-basic/particle-container.js