Communitygithub.com

社交动态动画代理

从包含637种效果和11个配方(awesome-ai-motion)的目录中为场景选择合适的动画,并实现为纯时间函数。适用于规划或构建任何动画场景、标题展示、转场、图表构建、钩子或字幕。

社交动态动画代理 是什么?

该技能提供了一个系统化的运动效果选择与实现方法。它基于包含637种效果卡片的目录(其中128种附带渲染片段和HTML模板),以及11个动画配方和决策表,帮助开发者避免临时拼凑动画。用户通过Python CLI查询效果库,可根据意图(如注意力、解释、比较等)和媒体类型(如解说视频、短视频、演示文稿等)筛选,并查看每个效果的使用时机、避免情况、参数、缓动函数和搭配建议。技能强调将动画实现为纯时间函数,将GSAP片段翻译为CSS或JavaScript,并共享规则(每场景一个焦点、一个主动作+一两个辅助动作、最终状态保持足够阅读时间、仅使用transform和opacity)。特别为教育类和解说类视频提供了前5秒的设计策略,并提醒避免过度使用重复效果。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/aievolutionpl/social-motion-agent/tree/HEAD/.agents/skills/motion-effect-picker

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

运动效果选择器

来源:tools/repos/awesome-ai-motion(MIT;GSAP 在其免费许可证下捆绑,参见其 ATTRIBUTIONS.md)。637张效果卡片,其中128张附带渲染片段和HTML模板,11个配方,决策表。切勿阅读整个索引;请查询它。

步骤

  1. 用一句话说明场景意图和媒介(例如“打开视频的问题,短视频”)。
  2. 查询:
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%)
  1. 使用 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 卡片没有片段或模板;仅使用其参数和提示。
  • 过度使用的效果会显得生成化。每场场景不要对一个以上的元素重复使用同一效果,也不要在同一时刻堆叠三个效果。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相关技能