feat: 调整动作相关方法, 新增获取动作文件列表方法

Author: hacxy

docs/.vitepress/theme/components/DemoModal.vue

@@ -59,10 +59,10 @@ watch(showModal, () => {
   if (showModal.value) {
     import('../../../../dist').then(({ init }) => {
       demo(init, l2dCanvas).then(model => {
-        if ((model as any).onClose) {
+        if ((model as any)?.onClose) {
           closeCallback.value = (model as any).onClose;
         }
-        if (model.on) {
+        if (model?.on) {
           model.on('settingsJSONLoaded', () => {
             settingsJsonLoaded.value = true;
           });

docs/demos/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /* eslint-disable max-lines */
 /* eslint-disable antfu/no-import-dist */
 
@@ -311,3 +312,87 @@ export async function demo9(init, l2dCanvas) {
     }
   };
 }
+
+export async function demo10(init, l2dCanvas) {
+  const loadModel = async () => {
+    const l2d: L2D = init(l2dCanvas.value! as HTMLCanvasElement);
+    // #region demo10
+    const model = await l2d.create({
+      path: 'https://model.hacxy.cn/live2d_002_101/object_live2d_002_101.asset.model3.json',
+      scale: 0.1
+    });
+    const motionGroups = model.getMotionGroupNames();
+    console.log(motionGroups);
+    // #endregion demo10
+
+    message.info(`动作组: ${JSON.stringify(motionGroups)}`, { showIcon: false });
+  };
+  loadModel();
+}
+
+export async function demo11(init, l2dCanvas) {
+  const loadModel = async () => {
+    const l2d: L2D = init(l2dCanvas.value! as HTMLCanvasElement);
+    // #region demo11
+    const model = await l2d.create({
+      path: 'https://model.hacxy.cn/live2d_002_101/object_live2d_002_101.asset.model3.json',
+      scale: 0.1,
+      motionPreload: MotionPreload.ALL
+    });
+    const motionGroups = model.getMotionGroupNames();
+    console.log(motionGroups);
+    const motionNames = model.getMotionListByGroupName('Tap');
+    console.log(motionNames);
+    // #endregion demo11
+
+    message.info(`动作组: ${JSON.stringify(motionGroups)}`, { showIcon: false });
+
+    message.info(`动作: ${JSON.stringify(motionNames)}`, { showIcon: false });
+  };
+  loadModel();
+}
+
+export async function demo12(init, l2dCanvas) {
+  const loadModel = async () => {
+    const l2d: L2D = init(l2dCanvas.value! as HTMLCanvasElement);
+    // #region demo12
+    const model = await l2d.create({
+      path: 'https://model.hacxy.cn/live2d_002_101/object_live2d_002_101.asset.model3.json',
+      scale: 0.1,
+      motionPreload: MotionPreload.ALL
+    });
+    const motionGroups = model.getMotionGroupNames();
+
+    model.showHitAreaFrames();
+
+    setTimeout(() => {
+      model.playMotion(motionGroups[1]);
+    }, 1000);
+
+    // #endregion demo12
+  };
+  loadModel();
+}
+
+export async function demo13(init, l2dCanvas) {
+  const loadModel = async () => {
+    const l2d: L2D = init(l2dCanvas.value! as HTMLCanvasElement);
+    // #region demo13
+    const model = await l2d.create({
+      path: 'https://model.hacxy.cn/live2d_002_101/object_live2d_002_101.asset.model3.json',
+      scale: 0.1,
+      motionPreload: MotionPreload.ALL
+    });
+    const motionGroups = model.getMotionGroupNames();
+
+    model.showHitAreaFrames();
+
+    setTimeout(() => {
+      model.playMotion(motionGroups[1], 1);
+    }, 1000);
+
+    // #endregion demo13
+  };
+  loadModel();
+}
+

docs/guide/motion/list.md

@@ -2,7 +2,6 @@
 sidebar:
   icon: line-md:emoji-neutral
   sort: 5
-
 ---
 
 # 口型动作同步

docs/guide/motion/motion-sync.md

@@ -1,8 +1,41 @@
 ---
 sidebar:
   icon: line-md:cog-filled
+  sort: 4
 ---
 
 # 动作播放
 
-待完善
+## 获取动作组列表
+
+<<< ../../demos/index.ts#demo10
+
+<DemoModal :demo="demo10"/>
+
+## 根据动作组名称获取动作列表
+
+<<< ../../demos/index.ts#demo11
+
+<DemoModal :demo="demo11"/>
+
+## 播放动作
+
+### 随机播放
+
+接下来我们可以使用上面的方法在1秒钟后从`Tap`动作组中随机播放一个动作:
+
+<<< ../../demos/index.ts#demo12
+
+<DemoModal :demo="demo12"/>
+
+### 指定播放
+
+`playMotion`方法支持在第二个参数传入一个索引值, 来准确指定播放某个动作组的哪一个动作:
+
+<<< ../../demos/index.ts#demo13
+
+<DemoModal :demo="demo13"/>
+
+<script setup>
+import { demo10, demo11, demo12, demo13 } from '../../demos/index.ts'
+</script>

docs/guide/motion/play.md

@@ -23,9 +23,9 @@ export class Model {
   ) {
     this.hitAreaFrames = new HitAreaFrames();
 
-    live2dModel.once('load', () => {
-      this.live2dModel.internalModel.on('afterMotionUpdate', () => this.emittery.emit('afterMotionUpdate'));
-    });
+    // live2dModel.once('load', () => {
+    //   this.live2dModel.internalModel.on('afterMotionUpdate', () => this.emittery.emit('afterMotionUpdate'));
+    // });
 
     live2dModel.on('hit', area => {
       this.emittery.emit('hit', area);
@@ -74,25 +74,25 @@ export class Model {
   /**
    * 获取当前模型所有动作组名称
    */
-  getMotionGroups() {
-    return Object.keys(this.live2dModel.internalModel.motionManager.motionGroups);
+  getMotionGroupNames() {
+    return Object.keys(this.live2dModel.internalModel.motionManager.definitions);
   }
 
   /**
-   * 根据名称获取动作组
+   * 根据动作组名称获取动作文件列表
    * @param name
    */
-  getMotion(name: string) {
-    return this.live2dModel.internalModel.motionManager.motionGroups[name];
+  getMotionListByGroupName(name: string) {
+    return this.live2dModel.internalModel.motionManager.definitions[name];
   }
 
   /**
    * 根据动作组名称播放动作
    * @param group
    * @param index
    */
-  playMotion(group: string, index?: number) {
-    this.live2dModel.motion(group, index);
+  async playMotion(group: string, index?: number) {
+    return this.live2dModel.motion(group, index);
   }
 
   /** @ignore */