# 网页动画片

**Repository Path**: yangshare/web-animation

## Basic Information

- **Project Name**: 网页动画片
- **Description**: 尝试着用html+css生成生动的动画视频
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-06
- **Last Updated**: 2026-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 网页动画

[English](README.en.md)

用 HTML、CSS、SVG 和 Canvas 制作自然主题网页动画，并通过根目录脚本导出为 MP4 视频。每个动画主题都是独立目录，直接打开对应的 `index.html` 即可预览。

## 项目内容

当前包含的主题：

- 海浪拍岸
- 海浪拍岸2
- 极光流动
- 流星划过
- 落叶纷飞
- 蒲公英飞散
- 蜻蜓点水
- 森林晨雾
- 沙漠热浪
- 水母漂游
- 藤蔓生长
- 星空漩涡
- 星空漩涡2
- 樱花飘落
- 萤火虫夜舞
- 萤火虫之夜
- 萤火之森
- 萤火之森2
- 雨滴涟漪
- 月下荷塘

## 目录结构

```text
web-animation/
├─ codes/
│  └─ YYYY-MM-DD/
│     └─ 主题目录/
│        ├─ index.html
│        ├─ style.css
│        └─ app.js
├─ scripts/
│  └─ export-video.mjs
├─ output/
│  ├─ frames/
│  │  └─ YYYY-MM-DD/
│  └─ videos/
│     └─ YYYY-MM-DD/
├─ package.json
├─ README.md
└─ README.en.md
```

主题代码按日期组织在 `codes/YYYY-MM-DD/` 下，导出产物也按日期存放在 `output/videos/YYYY-MM-DD/`。

## 预览动画

无需安装依赖，直接用浏览器打开任意主题目录下的 `index.html`。

示例：

```text
codes/2026-05-07/樱花飘落/index.html
```

## 导出视频

导出 MP4 需要本机安装：

- Node.js 20+
- Chrome、Edge 或 Chromium
- FFmpeg，且包含可用的 H.264 编码器

执行：

```powershell
npm run export:video -- "codes/YYYY-MM-DD/藤蔓生长" --duration=12 --fps=30 --width=1080 --height=1920
```

默认输出：

```text
output/videos/YYYY-MM-DD/藤蔓生长.mp4
```

常用参数：

| 参数 | 说明 | 默认值 |
| --- | --- | --- |
| `--duration=<seconds>` | 视频时长，单位秒 | `8` |
| `--fps=<number>` | 视频帧率 | `60` |
| `--width=<pixels>` | 导出视口宽度 | `1080` |
| `--height=<pixels>` | 导出视口高度 | `1920` |
| `--dpr=<number>` | 浏览器 deviceScaleFactor | `1` |
| `--mode=<virtual\|realtime>` | 导出计时模式 | `virtual` |
| `--out=<file>` | 指定 MP4 输出路径 | `output/videos/<日期>/<主题>.mp4` |
| `--frames=<dir>` | 指定 PNG 帧目录 | `output/frames/<日期>/<主题>` |
| `--keep-frames` | 导出后保留 PNG 帧 | 默认删除 |
| `--show-controls` | 视频中保留页面控制按钮 | 默认隐藏 |
| `--browser=<file>` | 指定 Chrome/Edge/Chromium 路径 | 自动查找 |
| `--ffmpeg=<file>` | 指定 FFmpeg 路径 | 自动查找 |
| `--encoder=<name>` | 指定 H.264 编码器 | 自动选择 |
| `--crf=<number>` | `libx264` 质量，数值越小质量越高 | `18` |
| `--bitrate=<value>` | 非 CRF 编码器码率 | `12M` |

查看完整帮助：

```powershell
npm run export:video -- --help
```

## 导出模式

`--mode virtual` 会逐帧推进 `requestAnimationFrame`、CSS Animation 和页面时间，适合本项目大多数 Canvas、SVG、CSS 动画，画面更稳定。

`--mode realtime` 会按照真实播放时间录制，适合依赖真实计时器、音频或外部异步状态的页面。

## 环境变量

如果脚本无法自动找到浏览器或 FFmpeg，可以在 `.env.local` 中配置：

```text
WEB_ANIMATION_BROWSER=C:\Program Files\Google\Chrome\Application\chrome.exe
FFMPEG_PATH=C:\ffmpeg\bin\ffmpeg.exe
```

也可以通过 `--browser` 和 `--ffmpeg` 参数临时指定。

## 新增主题

可以使用内置脚本快速创建主题骨架：

```powershell
python .claude\skills\web-animation-theme\scripts\new_theme.py "主题名"
```

这会自动在 `codes/<当天日期>/` 下生成 `index.html`、`style.css` 和 `app.js` 三个文件。

手动创建时需注意：

1. 主题文件夹放在 `codes/YYYY-MM-DD/` 下，文件夹名即为导出命令中的主题名。
2. 至少提供 `index.html`，通常搭配 `style.css` 和 `app.js`。
3. 页面应能通过本地文件路径直接打开，不依赖构建步骤。
4. 如果页面有控制面板，需添加 `data-export-hide` 属性，导出时会自动隐藏。
5. 优先让动画响应视口尺寸，便于导出横屏、竖屏和不同分辨率。

## 常见问题

如果提示找不到浏览器，请安装 Chrome、Edge 或 Chromium，或使用 `--browser` 指定可执行文件路径。

如果提示找不到 FFmpeg，请安装 FFmpeg 并加入 `PATH`，或使用 `--ffmpeg` 指定路径。

如果导出画面和浏览器预览不一致，可以尝试 `--mode realtime`，或检查动画是否依赖真实时间、网络资源或用户交互状态。

如果视频体积过大，可以降低 `--fps`、分辨率、码率，或增大 `--crf`。

## 参与贡献

欢迎提交新的动画主题、优化已有主题、改进导出脚本或补充文档。提交前请确认：

- 主题目录可以直接打开预览。
- 导出命令可以正常生成 MP4。
- 新增文件没有把临时帧、视频产物或本地环境配置提交进仓库。