运动效果选择器
来源:tools/repos/awesome-ai-motion(MIT;GSAP 在其免费许可证下捆绑,参见其 ATTRIBUTIONS.md)。637张效果卡片,其中128张附带渲染片段和HTML模板,11个配方,决策表。切勿阅读整个索引;请查询它。
步骤
- 用一句话说明场景意图和媒介(例如“打开视频的问题,短视频”)。
- 查询:
python -S studio.py motion find reveal --purpose attention --medium shorts --rendered --limit 8
python -S studio.py motion show mask-reveal
python -S studio.py motion recipe # 列表显示配方
python -S studio.py motion recipe edu-hook # 包含时间和参数的步骤
目的:attention、explanation、comparison、sequence、emphasis、transition、data、feedback、atmosphere、branding。
媒介:explainer、shorts、scrolldeck、presentation、product-demo、data-story、web-ui。
也可使用 --family、--level 参数。
3. 选择2到3个候选效果,阅读每张卡片的 use_when、avoid、params、ease、pairs_with。先采用卡片默认值,然后进行调整。
4. 按照共享规则进行组合:每个场景一个焦点,一个主要动作加上一个或两个辅助动作,完成状态保持足够阅读时间,仅使用 transform 和 opacity。
5. 实现为纯时间函数。卡片 snippet 是 GSAP 代码;请翻译它,不要导入:
- 秒数到进度:
p = clamp((t - start) / duration);交错:start + i * gap - 来自
templates/motion-helpers.js的缓动函数(easeOut、easeIn、easeInOut、backOut、elasticOut、spring):power3.out是easeOut(3) yPercent: 110 -> 0表示在overflow: hidden窗口内的行上应用translateY(110% -> 0%)
- 使用
motion-ui-polish(令牌和门控)构建,查看开始、主要动作和结束状态的帧,并与卡片的good_example进行比较。
存在模板时
如果 show 输出了 html_template,请打开它以查看结构和时间安排,将其复制到任务的 source/ 目录中,并替换文本或数据。保持时间线不变。未经安装 Playwright 依赖,请勿运行目录的 render.mjs;我们的流水线通过 vstudio 或 HTML 渲染器进行渲染。
前五秒(教育类和解说类视频)
0到1秒:一个问题或令人惊讶的结果;1到3秒:机制或比较的线索;3到5秒:带有可读保持的学习承诺。每屏一个主张。大型相机移动仅用于揭示问题或结果。从 motion recipe edu-hook 开始,然后使用 mask-reveal、split-compare、count-up、annotation-callout。
限制
- 卡片参数名称部分为韩文;值、范围、
ease和snippet与语言无关。描述和提示返回英文。 planned卡片没有片段或模板;仅使用其参数和提示。- 过度使用的效果会显得生成化。每场场景不要对一个以上的元素重复使用同一效果,也不要在同一时刻堆叠三个效果。