Project6 动效库

这里不是“特效大全”,而是 Project6 的动画制作工作台。Garden 决定章节结构,Emil Skills 决定动画是否合理与怎么设计,GSAP 负责真正执行,Edge TTS SentenceBoundary 负责把动画落在正确的口播语义点。

← 返回工作台
核心原则:动画的职责是解释、建立空间关系、表示状态和避免突兀变化。观众正在阅读的文字必须稳定;“更炫”不是合格理由。

Project6 动画制作链

① Garden先确定 Chapter / Step / Narration 边界。
② Find OpportunitiesEmil:先决定哪些地方真的值得动,主动拒绝无意义动画。
③ Animate / Vocabulary确定目的、空间故事、属性、曲线、时长和退出方式。
④ GSAP RuntimeTimeline / DrawSVG / MotionPath / Flip / Morph 等执行。
⑤ Review / ImproveEmil 十条标准审核,再做高杠杆优化。

核心动画体系

CORE RUNTIME

GSAP 3.15

第一动画执行引擎。负责时间线、SVG 绘制、路径运动、共享对象状态、文字与场景编排。官方仓库已经完整镜像到 Project6。

TimelineStaggerDrawSVGMotionPathFlipMorphSVG
vendor/upstream/gsap/
CORE TASTE / REVIEW

Emil Kowalski Skills

不只用于最后验收。现在它贯穿“找机会 → 构建 → 词汇 → 审查 → 改进”全过程,决定什么该动、为什么动、怎么动。

find-animation-opportunitiesanimateanimation-vocabularyemil-design-engreview-animationsimprove-animations
vendor/upstream/emil-skills/

本地原始文档阅读

下面读的是 Project6 仓库自己的上游镜像,不依赖外部 GitHub 页面。

正在读取 Project6 本地镜像…

成熟动效 Primitive

从“单纯出现”升级到空间连续性。以后视频优先从这些模式组合,而不是整屏 fade / pop。

路径故事DrawSVG + MotionPath
起点
过程
结果
共享对象过渡Spatial consistency
Prompt
HarnessContext
Tools
State
Recovery
连续状态完成State indication
01
02
03
04
05
06
07
08
09
10

Emil Review 快速检查

Why?

每个动画必须能说清楚是 Explanation、Spatial、State、Feedback 还是 preventing jarring change。

Physicality

不从 scale(0) 凭空出现;同一对象要有来源和去向,进入后保持稳定。

Performance

普通 UI 优先 transform / opacity;SVG path 只在解释关系时使用。

Timing

UI 反馈保持快速;解释动画按 narration 语义决定,不用统一固定时长。

Accessibility

必须支持 prefers-reduced-motion;hover 只给真正的鼠标/触控板。

Reject motion

文字正在阅读时持续漂移、无意义呼吸、无限 runner、整屏 simultaneous pop 都应删除。