打造专属萌宠：BongoCat模型动画编辑器全攻略

你是否也曾想让屏幕上的Bongo Cat拥有独一无二的动作？是否希望猫咪能随着你的操作展现更多个性化反应？本文将带你深入了解BongoCat的模型动画系统，从零开始创建自定义猫咪动作，让你的每一次键盘敲击都充满专属乐趣。

模型动画系统基础架构

BongoCat的动画系统基于Live2D Cubism技术构建，通过参数化控制实现角色的生动表现。核心配置文件采用JSON格式，定义了模型的基础属性、动画片段与交互逻辑。

模型配置文件结构解析

模型主配置文件（src-tauri/assets/models/standard/cat.model3.json）是动画系统的核心，包含以下关键部分：

• 文件引用：指定模型数据(Moc)、纹理资源(Textures)和动画文件路径
• 参数组：定义可控制的动画参数（如EyeBlink眼动参数组）
• 动作映射：关联输入事件与动画片段的触发关系

以下是参数组定义示例，控制猫咪眨眼动作：

{
  "Target": "Parameter",
  "Name": "EyeBlink",
  "Ids": [
    "ParamEyeLOpen",
    "ParamEyeROpen"
  ]
}

动画参数控制原理

每个动画参数通过取值范围（min/max）控制模型部件的状态。例如通过ParamMouseX和ParamMouseY参数控制猫咪头部朝向，取值范围通常为-1到1，对应屏幕坐标系中的相对位置。

src/composables/useModel.ts中的handleMouseMove函数实现了鼠标位置到动画参数的转换逻辑，核心代码如下：

const xRatio = (cursorPoint.x - position.x) / size.width
const yRatio = (cursorPoint.y - position.y) / size.height

live2d.setParameterValue('ParamMouseX', xRatio)
live2d.setParameterValue('ParamMouseY', yRatio)

动画文件格式详解

BongoCat使用.motion3.json格式存储动画数据，通过关键帧控制实现流畅的动作过渡。每个动画文件包含元数据(Meta)和曲线数据(Curves)两大部分。

关键帧动画结构

以src-tauri/assets/models/standard/live2d_motion1.motion3.json为例，元数据定义了动画的基本属性：

"Meta": {
  "Duration": 1.633,  // 动画时长(秒)
  "Fps": 30.0,        // 帧率
  "Loop": true        // 是否循环播放
}

曲线数据通过时间点和参数值的组合定义动画轨迹，例如猫咪手部动作的关键帧序列：

"Segments": [
  0, 0,         // 时间0秒，参数值0
  0.033, 1,     // 0.033秒，参数值1（手部按下）
  1.5, 0,       // 1.5秒，参数值0（手部抬起）
  1.633, 0      // 动画结束，参数值0
]

多动作组合策略

系统支持通过动作组(Groups)管理多个相关动画，如src-tauri/assets/models/standard/cat.model3.json中定义的CAT_motion和CAT_motion_lock动作组，分别对应普通和锁定状态下的动画集合。

创建自定义动画的完整流程

1. 准备动画编辑环境

首先需要准备JSON编辑工具（如VS Code）和Live2D Cubism Editor（可选）。通过src/stores/model.ts中的模型管理逻辑，我们可以了解系统如何加载和管理自定义模型：

const modelsPath = await resolveResource('assets/models')
const nextModels = [
  {
    id: nanoid(),
    mode: 'custom',
    isPreset: false,
    path: join(modelsPath, 'custom')
  }
]

2. 设计动画关键帧序列

以创建"挥手"动作为例，需要定义手部骨骼的旋转参数ParamHandAngle的关键帧序列：

{
  "Target": "Parameter",
  "Id": "ParamHandAngle",
  "Segments": [
    0, 0,         // 起始位置
    0.2, 30,      // 0.2秒时手抬起30度
    0.5, -20,     // 0.5秒时手挥动到-20度
    1.0, 0        // 1秒时回到起始位置
  ]
}

3. 配置动画触发条件

在模型配置文件中注册新动画，并通过src/composables/useModel.ts中的handlePress方法关联键盘事件：

// 在supportKeys中注册新的按键-动画映射
supportKeys['KeyW'] = 'custom/wave.motion3.json'

// 按键按下时触发动画
const handlePress = (key: string) => {
  const path = modelStore.supportKeys[key]
  if (path) live2d.playMotion(path)
}

4. 测试与调试动画效果

将自定义动画文件放置在src-tauri/assets/models/custom/目录下，通过模型选择界面加载自定义模型，测试动画效果并调整关键帧参数，直至达到理想效果。

高级动画技巧与最佳实践

参数联动与表情控制

通过组合多个参数可以实现复杂的表情动画，例如同时控制ParamMouthOpen（嘴巴张开度）和ParamEyeOpen（眼睛张开度）参数创建说话表情。系统在src/utils/live2d.ts中提供了批量设置参数的方法：

// 同时设置多个动画参数
public setParameters(values: Record<string, number>) {
  const coreModel = this.getCoreModel()
  Object.entries(values).forEach(([id, value]) => {
    coreModel?.setParameterValueById(id, value)
  })
}

性能优化建议

• 控制单动画关键帧数量，建议不超过30个关键帧/秒
• 复杂动画拆分为多个独立片段，通过代码控制播放顺序
• 非活跃状态下降低动画帧率，通过src/composables/useModel.ts中的handleResize方法动态调整

动画分享与导入导出

自定义动画可以通过模型打包功能分享给其他用户。系统在src/stores/model.ts中提供了模型导入导出的基础框架，你可以扩展该功能实现动画文件的打包：

// 导出自定义模型配置
export const exportModelConfig = (model: Model) => {
  return JSON.stringify({
    id: model.id,
    mode: model.mode,
    motions: motions.value,
    expressions: expressions.value
  })
}

通过本文介绍的方法，你可以充分发挥创造力，为Bongo Cat设计各种有趣的自定义动作。无论是庆祝动画、反应表情还是游戏互动特效，都能让这只呆萌的猫咪更加生动有趣。现在就动手创建你的第一个自定义动画，让Bongo Cat成为你独一无二的桌面伙伴吧！