学习笔记：一起进入 PixiJS 的世界 (六)

上一篇有提到可以利用PIXI.Ticker将定期渲染的机制加进场景，建立基础的小动画，接下来就来试试看利用PixiJS做个小动画吧！

可以利用ticker.add()将动画逻辑加进场景中，而动画的逻辑则用函式的形式，作为第一个参数传入。

let app = new PIXI.Application({ width:800, height: 800 })
app.ticker.add(
 //动画逻辑function
)

我准备了一个圆形物件，放置於一个container中，预计制作放大缩小的动画效果。

//建立场景
let app = new PIXI.Application({ width:800, height: 800 })
document.body.appendChild(app.view);
//在场景中建立container
const container = new PIXI.Container();
app.stage.addChild(container);
//建立圆形物件，并放入container中
let myObj = new PIXI.Graphics();
myObj.beginFill(0xffdd00);
myObj.drawCircle(400,400,400);
container.addChild(myObj);
//调整container位置与container轴心位置
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;
container.pivot.x = container.width / 2;
container.pivot.y = container.height / 2;

接下来利用ticker.add()设定动画，利用DisplayObject的scale属性，运用逻辑运算来设定：在scale的数值为1(100%)的状态时，进行减法运算产生缩小效果至0，数值往负数前进时，会从缩小变成放大效果，当scale数值被减去至-1(-100%)时，事实上形状会与1(100%)相同，达成这个状态时，调整为初始值1(100%)，达成重复播放的效果。
(刚刚有进行container的定位调整，因此这边的动画逻辑将设定在container上)

app.ticker.add(()=>{
  if(-1<container.scale.x && -1<container.scale.y){
    container.scale.x = container.scale.x - 0.007
    container.scale.y = container.scale.y - 0.007
  }
  else {
    container.scale.x = 1
    container.scale.y = 1
  }
})