Vue 3 使用 Pixi.js 播放 JSON 动画帧

要在 Vue 3 中使用 Pixi.js 播放 JSON 动画帧，你可以按照以下步骤进行操作：

安装 Pixi.js 和相关依赖：

npm install pixi.js @pixi/ticker

在 Vue 组件中创建 Pixi.js 的舞台容器：

<template>
  <div ref='container'></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as PIXI from 'pixi.js';

export default {
  name: 'AnimationComponent',
  setup() {
    const container = ref(null);

    onMounted(() => {
      // 创建 Pixi.js 的舞台容器
      const app = new PIXI.Application({
        width: 800,
        height: 600,
        transparent: true,
      });
      
      // 将舞台容器添加到组件的 DOM 元素中
      container.value.appendChild(app.view);

      // 加载动画资源
      PIXI.Loader.shared.add('animation', 'path_to_animation.json').load((loader, resources) => {
        // 创建动画精灵
        const animation = new PIXI.AnimatedSprite(resources.animation.spritesheet.animations['animation_name']);

        // 设置动画精灵的属性
        animation.x = 400;
        animation.y = 300;
        animation.animationSpeed = 0.5;
        animation.loop = true;

        // 播放动画
        animation.play();

        // 将动画精灵添加到舞台
        app.stage.addChild(animation);
      });

      // 更新 Pixi.js 舞台
      app.ticker.add(() => {
        app.render();
      });
    });

    return {
      container,
    };
  },
};
</script>

在上述代码中，你需要将 path_to_animation.json 替换为你的 JSON 动画文件的路径。你还需要将 animation_name 替换为你要播放的动画的名称。
在 Vue 模板中使用组件：

<template>
  <div>
    <animation-component></animation-component>
  </div>
</template>

<script>
import AnimationComponent from './AnimationComponent.vue';

export default {
  components: {
    AnimationComponent,
  },
};
</script>

这样，你就可以在 Vue 3 中使用 Pixi.js 播放 JSON 动画帧了。