# Remotion video

1. 本项目将remotion所有的skills技能全部汉化，在.opencode/skills/remotion-best-practices-zh文件夹下 2. 另外本项目搭建了一个基本的地图视频案例。 ## Commands **Install Dependencies** ```console npm i ``` **Start Preview** **项目名：** 全国省级 GDP 可视化（Remotion + D3 + TopoJSON）简介 - 这是一个基于 Remotion 的视频/演示工程，使用 D3 与 TopoJSON 渲染中国省级地图，并按 GDP 排名逐省放大镜头，展示 3D 凸出效果与动态 GDP 数值。 - 地图数据请放在 `public/china-provinces.json`（TopoJSON，feature.properties 需包含省份名称字段），GDP 数据请放在 `public/gdp-data.json`（键为省份名称，值为数值）。主要功能 - 全国到省级的镜头推进与回缩（可配置时长）。 - 选中省份的“3D 凸出”视觉效果（通过多层偏移模拟挤出）。 - 右上角按出现顺序显示 GDP 排行榜，随着镜头进度逐项淡入。 - 每个省出现时展示动态计数的 GDP 数值。运行（开发预览） 1. 安装依赖： ```powershell npm install ``` 2. 启动 Remotion Studio（打开预览页面，通常在 http://localhost:3000）： ```powershell npm run dev ``` 3. 在 Studio 中选择相应的合成（composition）来预览动画或帧。渲染最终视频 ```powershell npm run build # 或使用 remotion CLI 精确渲染 npx remotion render --codec=vp9 ``` 文件说明 - `src/ChinaMap.tsx`：地图主组件（加载 TopoJSON 与 GDP 数据，控制镜头与动画）。 - `public/china-provinces.json`：TopoJSON 地理数据（需自行提供）。 - `public/gdp-data.json`：省级 GDP 数据（JSON 对象，键为省名）。自定义与调优 - 可修改 `src/ChinaMap.tsx` 中的参数：入/出场时长、展示时长、最大凸出像素（extrude）、缓动函数等，以获得不同视觉节奏。常见问题 - 如果出现空白或定位偏移：确认 TopoJSON 的坐标系与 `geoMercator()` 兼容，且 `properties.name` 与 `gdp-data.json` 的键完全一致（包含“省/市”后缀）。许可 - 本项目为私有工程，根据需要自行添加 LICENSE。欢迎反馈与改进建议。 ## 地图转换代码 npm install -g mapshaper ### 用 Douglas-Peucker 简化为 10%（可调），并输出 TopoJSON mapshaper china.geojson -simplify dp 10% -o format=topojson public/china-provinces.json 说明： dp = Douglas–Peucker；10% 是保留细节比例，越小文件越小但细节越少，按需调整（5%~20% 常用）。 mapshaper 会保留属性（properties），确保其中有省名字段（如 name）与你的 gdp-data.json 键匹配。