const app = new PIXI.Application({
  view: document.getElementById('main'),
  width: 512,
  height: 512,
  antialias: true,
  transparent: false,
  backgroundColor: 0x00CC99,
});

const animals = {
  "frames": {
    "am1fw-0atxv-0.png":
    {
      "frame": {"x":1,"y":1,"w":202,"h":219},
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": {"x":32,"y":37,"w":202,"h":219},
      "sourceSize": {"w":256,"h":256},
      "anchor": {"x":0,"y":0}
    },
    "am1fw-0atxv-1.png":
    {
      "frame": {"x":364,"y":218,"w":188,"h":213},
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": {"x":50,"y":43,"w":188,"h":213},
      "sourceSize": {"w":256,"h":256},
      "anchor": {"x":0,"y":0}
    },
    "am1fw-0atxv-2.png":
    {
      "frame": {"x":1,"y":222,"w":192,"h":211},
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": {"x":40,"y":45,"w":192,"h":211},
      "sourceSize": {"w":256,"h":256},
      "anchor": {"x":0.00390625,"y":0.0078125}
    },
    "am1fw-0atxv-3.png":
    {
      "frame": {"x":205,"y":1,"w":193,"h":215},
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": {"x":26,"y":41,"w":193,"h":215},
      "sourceSize": {"w":256,"h":256},
      "anchor": {"x":0,"y":0}
    },
    "am1fw-0atxv-4.png":
    {
      "frame": {"x":400,"y":1,"w":147,"h":205},
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": {"x":74,"y":51,"w":147,"h":205},
      "sourceSize": {"w":256,"h":256},
      "anchor": {"x":0,"y":0}
    },
    "am1fw-0atxv-5.png":
    {
      "frame": {"x":195,"y":222,"w":167,"h":210},
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": {"x":53,"y":46,"w":167,"h":210},
      "sourceSize": {"w":256,"h":256},
      "anchor": {"x":0,"y":0}
    }},
  "animations": {
    "am1fw-0atxv": ["am1fw-0atxv-0.png","am1fw-0atxv-1.png","am1fw-0atxv-2.png","am1fw-0atxv-3.png","am1fw-0atxv-4.png","am1fw-0atxv-5.png"]
  },
  "meta": {
    "app": "https://www.codeandweb.com/texturepacker",
    "version": "1.0",
    "image": "https://i.imgur.com/5plMZXh.png",
    "format": "RGBA8888",
    "size": {"w":553,"h":434},
    "scale": "1",
    "smartupdate": "$TexturePacker:SmartUpdate:fcb0e723d2ce02e416f362956e9fa06f:584974099924c88c3fedefc7528bdd78:c1c2995b3eaff7e861dc32fc03a9253c$"
  }
}


const loader = new PIXI.Loader();
loader
  .add('run',animals.meta.image)
  .load((loader, resource)=> {
  init(resource);
})

function init(resource) {
  const gameImg = resource;
  const textureArray = [];
  for(let i in animals.frames) {
    let frame = animals.frames[i].frame;
    let rectangle = new PIXI.Rectangle(frame.x, frame.y, frame.w, frame.h);
    let Newtexture = new PIXI.Texture(gameImg.run.texture, rectangle);
    // const sprite = new PIXI.Sprite(Newtexture);
    textureArray.push(Newtexture);
  }
  let animatedSprite = new PIXI.AnimatedSprite(textureArray);
  app.stage.addChild(animatedSprite);
  // 控制播放速度
  animatedSprite.animationSpeed = 0.2;
  animatedSprite.play();
}