【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/


<<:  [Day 26] 从 AsyncPipe 出发,微探讨 Angular 处理 pipe 的流程

>>:  以Postgresql为主,再聊聊资料库 应用递回加快 count distinct 的等效查询

Day 4 : Git 分支与远端仓库

远端仓库 打RPG的时候,队友的占位与分配是很重要的! 後排玩家是要对准BOSS的弱点来个会心一击,...

[Day1] - 开赛!

The lone wolf dies but the pack survives. ---- Ga...

风险热度地图(Risk heat map)

-ISO 31000 “风险评估/分析”是什麽意思? 请注意,在 CISSP 考试大纲、OSG 和...

[Python 爬虫这样学,一定是大拇指拉!] DAY02 - 关於 Python (1)

所谓工欲善其事,必先利其器。 选择 Python 的理由又是什麽? 那我们得先从语言的特性及优缺点来...

【LeetCode】DFS

今天出去玩,买了好多东西,只想赶快把这篇赶出来。 DFS:碰到一个新节点时,先从这个新节点开始往下做...