回春丹 MV 项目 - 经验总结

项目背景

这是一个游戏内药物公司产品"回春丹"的广告歌曲 MV 项目。使用前端技术（TypeScript + SVG 动画）制作与歌词同步的动画视频。

产品设定

回春丹是一种能透支生命力的药物：

• 效果：让35岁的人外貌和活力都像20岁
• 副作用：在老年期显现，导致预期寿命降低
• 讽刺点：药物公司不惮于威胁顾客——“你不吃有的是人吃，被时代抛下反而死得更快”

可复现的完整流程

第一步：生成歌词

使用 ChatGPT / Claude 等有创造力、会押韵的 AI 生成歌词。

提示词示例：

我需要为游戏内的一个虚构药物"回春丹"写一首广告歌曲。

背景设定：
- 回春丹能让35岁的人看起来像20岁
- 副作用是老年期寿命缩短
- 这是一个反乌托邦世界，职场年龄歧视严重
- 歌曲表面是昂扬的宣传曲，但歌词暗含威胁

要求：
- 押韵，朗朗上口
- 表面积极向上，实则讽刺
- 包含具体的职场焦虑元素（裁员、绩效、竞争）
- 时长约2-3分钟
- 需要 intro、verse、chorus、bridge 等结构
- 使用 Synthwave 风格

请同时给出 Suno 的 style 提示词。

第二步：生成音乐

使用 Suno（https://suno.ai）生成音乐：

1. 将歌词粘贴到 Lyrics 区域
2. 将 style 提示词填入 Style of Music
3. 生成并选择最满意的版本
4. 下载 MP3 文件

第三步：标注时间轴

使用 LRC 时间轴工具（如 https://lzltool.com/audio-lrc）：

1. 上传 MP3 文件
2. 播放音乐，在每句歌词开始时点击标记
3. 导出 LRC 文件

第四步：生成动画

使用 Claude Opus/Sonnet 基于背景、LRC 和 MP3 生成 JS 控制的 SVG 动画。

本项目的实际描述过程

初始描述（原始 story.md）

这是一个游戏中的药物公司的产品"回春丹"的广告歌曲周边项目，需要使用前端html、js动画（可以的话typescript更好）来制作广告歌曲的视频

回春丹是一种能透支人生命力的药物，它的效果可以让35岁的人不管外貌还是活力都看起来像20岁的年轻人，但其副作用会在老年显现导致预期寿命降低。歌曲本身应该听起来应该像是一个正常、昂扬的宣传曲，但是这个药物公司不惮于告诉潜在顾客"你没有选择，你不吃有的是人吃，到时候活力跟不上、绩效不佳被开除、又因为年龄太大找不到新工作，被时代抛下反而死得更快"

回春丹.mp3 和 回春丹.lrc 分别是这首歌曲的音频和和歌词时间轴

你可以自由使用任何你想用的第三方库来实现目标

迭代过程中的关键描述

1. 基础播放器实现后 → 要求加入 Portal 风格的 SVG 火柴人动画，反映歌词内容

2. 动画系统建立后 → 逐步细化：

   • 加入年龄变化效果（皱纹、年龄标签）
   • 加入老化/年轻化的视觉对比
   • 添加场景切换（办公室、竞争、吃药、衰老等）
   • 添加警告文字显示

3. Bug 修复阶段 → 精确描述问题：

   • “皱纹位置不对，应该是因为它们参照物不一样，皱纹应该是头部的子元素”
   • “老年人影子应该用同一个创建流程，支持鱼尾纹”
   • “药丸旋转中心不是形状中心”
   • “角色脑袋下沉了一段且一直没有恢复”

优化后的理想描述（下次使用的模板）

项目启动描述

# 项目：歌曲 MV 动画生成器

## 目标
为歌曲制作一个基于 Web 的动画 MV，动画与歌词时间轴同步。

## 素材
- `song.mp3` - 歌曲音频文件
- `song.lrc` - 带时间轴的歌词文件

## 技术要求
- 使用 Vite + TypeScript 构建
- 使用 GSAP 做动画
- 使用 SVG 绘制角色和场景
- 歌词需要与动画精确同步

## 视觉风格
- **Portal 游戏风格**的简笔火柴人
- 简洁的几何形状
- 深色背景 + 亮色角色
- 场景切换要有过渡效果

## 动画系统要求

### 角色系统
- 主角：白色火柴人，可做各种动作
- 支持的动作：站立呼吸、行走、跑步、欢呼、悲伤、工作、吃药、衰老、年轻化等
- 角色需要有年龄可视化（皱纹、年龄标签）

### 场景系统
- 场景包括：开场、办公室、竞争赛道、吃药、变年轻、变老、结局等
- 每个场景有对应的背景元素和道具

### 时间轴编排
- 基于 LRC 时间点触发场景切换和动画
- 每句歌词可以触发：场景切换、角色动画、特效（闪光、警告文字等）

## 歌曲背景（用于理解动画内容）
[在这里写歌曲的故事背景和情感基调，帮助 AI 理解应该在什么歌词配什么动画]

示例：
- "三十五岁不算晚" → 角色站立，略显疲惫
- "皱纹一条提醒难" → 角色脸上出现皱纹，显示年龄标签
- "一颗胶囊下咽" → 切换到吃药场景，药丸出现
- "年龄错误被倒转" → 年轻化动画，皱纹消失，年龄倒转

## 代码架构建议

src/ ├── main.ts # 入口文件 ├── lyrics.ts # LRC 解析 ├── svg-figure.ts # 火柴人绘制和动画 ├── scene-manager.ts # 场景管理 ├── animation-choreographer.ts # 时间轴编排 └── effects.ts # 特效处理

## 注意事项
1. 动画切换时要先 reset 姿势再播放新动画，避免"硬停"
2. SVG 元素使用 group 嵌套时注意 transform 的叠加
3. 使用 GSAP 的 timeline 管理复杂动画序列
4. emoji 作为 SVG 内容时注意居中和旋转中心问题

技术经验总结

SVG 火柴人架构

root (g) - 用于整体定位 (translate)
└── innerGroup (g) - 用于动画变换 (rotation, scale, y偏移)
    ├── head (g) - 头部组
    │   ├── circle - 头部圆形
    │   └── wrinkles (g) - 皱纹组（作为头部子元素，跟随移动）
    ├── body (line) - 身体
    ├── leftArm (line)
    ├── rightArm (line)
    ├── leftLeg (line)
    └── rightLeg (line)

关键点：

• root 只用于定位，动画不应该影响它
• innerGroup 用于所有动画变换
• 需要跟随移动的元素（如皱纹）应该作为父元素的子节点

GSAP 动画注意事项

1. 旋转中心：

   • SVG 元素用 svgOrigin: 'x y'（绝对坐标）
   • 一般元素用 transformOrigin: 'center center'（相对坐标）
   • emoji 文本推荐用 transformOrigin

2. 动画清理：

   • 切换动画前调用 timeline.kill() 和 gsap.killTweensOf()
   • reset() 方法要重置所有可能被动画修改的属性

3. 状态恢复：

   • 如果元素使用 transform 属性定位，reset() 时也要恢复 transform
   • 不要混用 cx/cy 属性和 transform 定位

时间轴编排最佳实践

const choreography = [
  { time: 0, scene: 'intro', animation: 'idle' },
  { time: 5, animation: 'wave' },  // 只切换动画，不切换场景
  { time: 10, scene: 'office', animation: 'work' },
  { time: 15, effect: 'flash' },   // 触发特效
];

项目文件结构

life-credit/
├── public/
│   ├── 回春丹.mp3        # 音频文件
│   └── 回春丹.lrc        # 歌词时间轴
├── src/
│   ├── main.ts           # 入口，初始化播放器
│   ├── lyrics.ts         # LRC 解析器
│   ├── svg-figure.ts     # SVG 火柴人创建和动画
│   ├── scene-manager.ts  # 场景管理
│   ├── animation-choreographer.ts  # 时间轴编排
│   ├── effects.ts        # 特效处理
│   └── styles/
│       └── main.css      # 样式
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── story.md              # 本文件

总结

这个项目试验了 AI 辅助创作的一个全新（至少我还没见过）工作流：

1. 创意生成：AI 生成歌词和音乐风格
2. 音乐生成：Suno 将歌词变成音乐
3. 时间标注：工具辅助标注 LRC
4. 动画生成：Claude 生成同步动画代码

其关键就是使用编程的方式实现 svg 动画，这相比于之前的“基于歌手图片生成演唱视频”的方案能提供更广的画面叙事空间，高度可定制，而且免去了需要自己给视频根据时间轴一个个写描述生成图片的麻烦

不得不说这个方案十分的绿皮，效果也颇为抽象，但至少在我这个场景俺寻思够用