iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
0
Modern Web

菜雞用Canvas/Pixi動動動動動起來系列 第 28

【Day28】Pixi-Ticker

PIXI.Ticker

之前介紹的pixi.application創造的五個的剩最後一個

  • loader
  • renderer
  • stage
  • ticker
  • view

前面那介紹了一些pixi的方法,拖(廢!?)了那麼多天,接近尾聲了要趕快讓它動起來了,今天來可以產生循環動畫的PIXI.Ticker

基本上就是將要做的動作add()進ticker並呼叫function
動動看

let app = new PIXI.Application({width: 500, height: 500,backgroundColor:0xfafad2})
    document.body.appendChild(app.view)
    let container = new PIXI.Container()
    container.x=app.screen.width/2 
    container.y=app.screen.height/2 

    PIXI.loader
    .add('./me.png') 
    .load(setup)

    function setup() { 
      let sprite = new PIXI.Sprite(
        PIXI.loader.resources['./me.png'].texture
      )
      sprite.anchor.set(0.5)
      app.stage.addChild(container) 
      container.addChild(sprite)
      app.ticker.add(() => { 
      sprite.rotation += .1 //把要循環做的動作加進ticker
    })
    }

成果畫面:

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

~如有疑問或是錯誤,歡迎不吝指教~

參考來源
[1]http://pixijs.download/release/docs/PIXI.Ticker.html
[2]https://github.com/Zainking/learningPixi
[3]https://hsiangfeng.github.io/javascript/20200323/2334412373/


上一篇
【Day27】Pixi-Mask
下一篇
【Day29】Pixi-AnimatedSprite
系列文
菜雞用Canvas/Pixi動動動動動起來30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言