1实现原理 · 为什么它能做到
风格签名是一条可量化的时间契约：图形层在 24fps 成片里按 12fps 步进（每 2 帧保持同一值），而底图素材与音频保持 24fps 平滑——只顿 overlay，不顿底盘。
skills/map-animation/SKILL.md
The single most recognizable trait of this style is **animating the map graphics at 12fps inside a 24fps edit**.
注：把「像 Vox 那样」翻译成帧率比值，是这条 skill 最可复用的抽象。
顿帧的实现方式是「先把帧号量化，再用量化后的值算一切图形量」，且步长由 fps 推导（Math.round(fps/12)）而非硬编码 2，因此换帧率后风格仍成立。
skills/map-animation/SKILL.md
const f = Math.floor(frame / STEP) * STEP; // use `f`, not `frame`, for graphic motion
注：量化点写在使用侧（compute any animated value 之前），而不是渲染层——这决定了它能在 Remotion 里逐帧可复现。
两条生产路径按需求分派：要照片级地形/真 3D 建筑/电影感相机 → Google Earth Studio 出图像序列 + 相机 .jsx，在 After Effects 里重建相机并把 overlay 挂到 track null；要素描编辑风、全可控、数据驱动 → GeoJSON/SVG 走投影后代码渲染。
skills/map-animation/SKILL.md
| Photoreal terrain, real satellite/3D buildings, cinematic camera | **Google Earth Studio → After Effects** | Image sequence + camera `.jsx`, composited in AE |
注：分派表先问「你要什么成片」，再选工具链——避免了「什么都用代码硬做」或「什么都丢给 AE」。
矢量路径的锁定靠共享投影：底图、pin、route、label 全部走同一个 projection([lng,lat])，相机只是对同一组做 scale/translate，所以元素不会随镜头漂移。
skills/map-animation/SKILL.md
The same `projection([lng,lat])` converts every pin coordinate to a screen position, so pins, routes, and labels all share one coordinate space
注：「pin 漂移」是地图动效最常见的缺陷，这里用「同一坐标空间」机制性消除，而不是靠目检修正。
覆盖层四件套各有机制：pin 掉落（spring 过冲后落定 + 可选脉冲）、route 绘入（pathLength=1 归一化 + dashoffset）、区域高亮（focus + context，目标亮其余压暗）、标签引导线（锚定投影点、保持水平）。
skills/map-animation/SKILL.md
`pathLength="1"` normalizes any route length so one progress value (0→1) draws it.
注：路线跨大圆时用 geoInterpolate 加密，避免 Mercator 直线把飞行路径画错。
编排走数据驱动：单一 beats 数组同时决定相机目标、pin 顺序、route 段与标签，总时长由 calculateMetadata 对 holds 求和算出，换数据即换片、无需重新 keyframe。
skills/map-animation/SKILL.md
One array → camera targets, pin order, route segments, and labels stay in sync.
注：把「地图叙事」参数化成数组，才谈得上批量与复用。
验证是地理保真导向：每个 pin 必须落在正确经纬度、路线连接正确城市、高亮区域是目标区域、标签拼写正确；并要求取「相邻两帧」确认 overlay 真的保持了两帧而底图相机仍在逐帧推进。
skills/map-animation/SKILL.md
Two adjacent overlay frames are identical (12fps step holds) while the base camera advanced
注：「相邻帧相同」是一条罕见的、可机器判定的风格断言——把审美特征变成可验证条件。
Earth Studio 路径的关键操作是导出时勾选 3D Camera Export：只有勾了才会随图像序列一起给出相机 .jsx 与 track-point 数据，缺了它就只剩素材、无法在 AE 里重建相机、overlay 也就锁不住。
skills/map-animation/references/earth-studio-to-ae.md
**CRITICAL — enable the After Effects / 3D Camera Export option**
注：文档把最常见的失败点（忘勾选 → 无 .jsx）做成显式告警，并给了「重新导出」的补救。
2核心能力
0112fps 顿帧量化（代码侧量化帧号；AE 侧 Posterize Time(12) 或 12fps 嵌套 precomp）
02矢量投影：d3-geo（Mercator / EqualEarth / Orthographic）+ fitSize 自动取景，GeoJSON feature → SVG path
03矢量相机：transform 平移+缩放到目标经纬度，标签按 1/scale 反缩放保持可读
04Pin 掉落（spring 过冲后落定，错峰量化到 12fps 步）+ 可选脉冲环
05Route 绘入：逐点投影成 SVG 路径 + pathLength 归一化 + dashoffset；跨大圆用 geoInterpolate 加密，可加行进点
06区域高亮：focus + context（目标要素点亮加描边，其余压暗），或 clip-path 擦除 / 描边脉冲
07标签与引导线：锚定 px([lng,lat])、落在 pin 之后出现、不随地图旋转、必要时反缩放
08Earth Studio → AE 相机导入工作流（导出勾 3D Camera Export → 跑 .jsx 重建 3D 相机与 track null → overlay parent 到 track null → 只对 overlay precomp 上 12fps）
09数据驱动 beats 编排：zod schema + calculateMetadata 按 holds 求和出总时长，换数据即换片
3外部依赖
| 类型 | 依赖 |
|---|---|
| cli | npx remotion still / render（矢量路径的帧验证与编码） |
| package | d3-geo（geoMercator / geoPath / geoInterpolate 等投影与球面插值） |
| network | 底图数据源：Natural Earth（国家/州界 GeoJSON）或 world-atlas TopoJSON（用 topojson.feature 转换） |
| api | Google Earth Studio（浏览器工具，需 Google 账号；产出图像序列 + 相机 .jsx + track 数据） |
| package | zod（beats schema 校验） |
| cli | ffmpeg / ffprobe（contact-sheet.sh 拼图与 probe-mp4.sh 规格断言） |
4风险提醒 风险提醒：橙色 · 评估后使用
风险提醒：橙色 · 评估后使用
- 地理数据正确性风险高于安全风险 — 坐标序写反会静默把全部 pin 放到错误位置（文档已警告）；底图数据的边界/投影选择不当会导致高纬撕裂或 antimeridian 断裂。应在数据入口做一次投影与坐标序断言。
- Path A 不可由 agent 端到端完成 — Earth Studio 关键帧与 AE 内脚本运行都需要人工在 GUI 完成，且 Earth Studio 需 Google 账号；这意味着该路径无法离线、无法批量自动复现，人工验收（scrubbing master comp）也不可省略。
- Google 影像的使用与署名条款 — reference 明确提示 Earth Studio 影像受 Google 使用/署名条款约束，并建议保留其烧入的署名或遵循当前导出条款；用于商业成片前需自行确认合规。
- 渲染链依赖远程包并在本地执行项目代码 — `npx remotion` 从 npm 取包并 bundle 执行；离线或私有 registry 环境需先本地锁定依赖（d3-geo / zod / @remotion/*）。
- D3 网页交付路径较薄 — SKILL.md 把「D3 网页变体」列为可选路径，但只给要点（paused/seekable timeline + ?t 冻结），没有同 pack 其他 skill 那样的单文件 HTML 输出契约与验收清单；走网页交付时需自行补齐。
风险提醒：橙色，评估后使用。判级对象是 skill 自身目录（skills/map-animation/：SKILL.md + references/ 两份 + 0 字节 README.md；目录内无脚本、无凭证读取、不写盘）。触发橙档的是执行链与外部服务面：① 输出契约要求用 `npx remotion still/render` 渲染矢量地图，npx 从 npm registry 拉取并执行 Remotion CLI 与 @remotion/* 系列包，并在本地 bundle + headless Chromium 中执行被渲染项目代码（同作者 pack 先例：remotion-video 同因判橙）；② 依赖第三方包 d3-geo、zod 与底图数据集（Natural Earth / world-atlas / topojson）；③ Path A 依赖 Google 的 Earth Studio 服务（需 Google 账号；reference 还提示 Google 影像自带使用与署名条款）。skill 本体不读凭证/env、不调业务 API、不采集、不绕过防护，故非红档。触发条件：代码路径仅在真正渲染时发生远程拉取；Earth Studio 路径由用户手动在浏览器操作，agent 不代为登录。
5第二遍独立确认
- [ok] 外部依赖调用点复核（npx remotion / d3-geo / zod / Earth Studio / 底图数据） — SKILL.md 确有 `npx remotion still MapSeq out/f-start.png ...` 与 `npx remotion render MapSeq out/map.mp4`；SKILL.md 代码块确有 `import { geoMercator, geoPath } from "d3-geo";`；vector-maps 确有 `export const schema = z.object({` 与 Natural Earth/world-atlas 建议；earth-studio-to-ae 确有 earth.google.com/studio 与 3D Camera Export 告警。全部落地。
- [ok] Earth Studio 路径是否引入 agent 侧凭证行为 — 文档措辞是「Keyframe in Earth Studio (browser)」「In After Effects: … Run Script File…」——由人操作；skill 未要求 agent 登录 Google、未涉及任何 cookie/token 读取。故不计入 credential_reads，只作为外部服务依赖记入 external_deps 并在 reason 中标注账号前提。
- [ok] 12fps 量化实现与描述一致性 — SKILL.md 的代码块 `const STEP = Math.round(fps / 12); const f = Math.floor(frame / STEP) * STEP;` 与文字「at 24fps, hold each graphic-layer value for 2 frames (update on even frames only)」一致；vector-maps 用同一写法并额外给出 `Math.max(1, …)` 的 30fps 保护；AE 侧给了 posterizeTime(12) 与 12fps 嵌套 precomp 两种等价做法。三处口径一致。
- [ok] 「共享坐标空间」主张的成立性 — 矢量路径中底图用 `toPath(feat)`、pin/route/label 用 `px([lng,lat])`（同 projection），相机是对同一 group 的 transform；AE 路径则用 track null + `toComp([0,0,0])` 表达式。两条路都确实把「元素锁定」交给共享坐标系，而非逐元素手调关键帧。
- [ok] 坐标序与投影边界的风险是否明示 — vector-maps 的 Gotchas 明示两点：GeoJSON 与 projection() 都是 [lng, lat] 而非 [lat, lng]（写反会把每个 pin 送错位置）；Mercator 在高纬/跨 ±180° 会截断或撕裂，建议世界视图改用 geoEqualEarth/geoNaturalEarth1 或旋转投影。均为操作级警告，非泛泛提醒。
- [discrepancy] 跨目录 / 跨 skill 引用可解析性 — 正文引用的 `scripts/contact-sheet.sh`、`scripts/probe-mp4.sh` 位于仓库根，单装本 skill 目录会悬空（需装整个 repo）；另外 SKILL.md 把矢量路径定位为「Remotion 或 D3」，但 D3 网页变体只给要点（?t 冻结），完整网页交付契约与同 pack 其他 skill 相比更薄——属能力边界，非错误。
- [ok] 功能声明 vs 实际能力 — frontmatter 宣称覆盖 Earth Studio→AE 相机导入、GeoJSON/SVG 矢量地图动效、pin/route/highlight/label、12fps 顿帧与数据驱动 Remotion 渲染；正文两条路径与两份 reference 逐项兑现。未夸大——AE 侧的产出被明确定义为「AE 工程 + 渲染素材，由人工 scrubbing 验收」，而非声称 agent 能自动完成 AE 合成。
6结论
适合：适合纪录片/解说里需要「建立地点感」的段落：从全球缩放到城市、绕地标环绕、沿边界平移；也适合表现地理上的移动（路线、供应链、迁徙、航线）与「点亮某国/某区域并标注」的分步地理讲解。要照片级底盘就用 Earth Studio + AE，要素描编辑风与数据驱动批量就用 GeoJSON/SVG + Remotion。
不适合：不适合需要精确地理信息呈现（测地、面积比较）的场合——Mercator 会失真，须改用等积投影；不适合交互式地图应用（本 skill 产出的是视频/动效素材，不是可交互地图）；也不适合无法接受人工 GUI 环节的全自动流水线（Path A 必然有人工步骤）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 map-animation.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent8f12ba8c5bbce5eb…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库iart-ai / iart-ai/map-animation-skills
原始 GitHubiart-ai/map-animation-skills ↗
Stars13
最近推送2026-06-22
本 skill commit
390ca98bbc许可MIT（仓库根 LICENSE：MIT License / Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 声明 "license": "MIT"，GitHub API license.spdx_id = MIT）
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。