Motion Skill 的作用
Motion For Anything You Draw 技能可帮助设计师和工程师为代码绘制的作品添加动画，让它们显得鲜活，而不是像一组不断切换的插画。它适用于角色、生物、植物、布料、火焰、烟雾、水、天气、灯光、机器、图标、徽标、图表以及完整场景。
该项目专注于让动画更可信的细节：整个场景使用一个时钟、围绕真实支点运动、滞后一个节拍跟随的拖尾部件、持续的待机生命感、平滑经过关键姿势的路径、克制的振幅，以及有力的时间曲线。
它还解决了智能体生成动画中的常见问题。该技能不鼓励让每个姿势都使用独立的缓动补间，而是强调协调运动、自然过渡、易读的眨眼、稳定的接触，以及细微的次级运动。
安装技能
使用 skills 命令安装技能：
npx skills@latest add rossark0/rossark-motion-skill安装后，该技能会提供参考资料、可复用模板、分析工具和示例场景。随附的引擎同时支持 React Native 和 SwiftUI 模板。
了解仓库结构
阅读主要技能指南
从 SKILL.md 开始。该文件介绍核心原则、不同主题的制作方法、动态面部、全身表演、基于场景的动作、界面动效、常见陷阱、参考视频分析，以及推荐的工作流程。
创建项目专用的运动说明
将 MOTION.md 复制到作品旁边，并在工作过程中完成第 2 部分。记录动画代码的位置、项目遵循的规则、作品无法实现的内容，以及验证修改的方法。技能会首先读取此文件，因此它能在智能体修改或创建运动效果前提供重要的项目背景。
选择动画引擎
仓库为每个受支持的 UI 框架提供了一个引擎：
- 用于 React Native 的
motion.ts。 - 用于 SwiftUI 的
Motion.swift。
该引擎包含循环时钟和单次时钟，以及 track、flow、seg、wave、loop、bell、seeded 和运动曲线。需要为绘图添加动态眼睛和嘴巴时，请使用配套的动态面部模板。
逐步构建动画
- 描述作品及其限制。 使用
MOTION.md记录现有绘图结构、可用几何图形和约束。 - 将场景拆分为各个部分。 确定身体、头部、四肢、道具、阴影、面部特征和次级元素。决定哪些部件围绕真实支点旋转，以及哪些部件应该产生拖尾。
- 选择共享时钟。 使用一条时间线协调整个场景，而不是为每个元素设置互不相关的补间。这样可以让接触和反应保持同步。
- 定义关键动作。 规划进入、落地、踢腿、眨眼、注视、挥手、生长或停稳等事件。使用可用的引擎辅助函数将这些姿势连接为平滑运动，其中包括用于经过关键姿势进行运动的
flow。 - 添加次级运动。 让头部、前臂、辫子、帽子、罐子、阴影或其他松动部件以轻微延迟跟随主要动作。
- 检查接触关系。 确保脚部接触地面，手始终连接在把手上，被抛出的物体在正确的位置开始和结束，并且碰撞不会破坏绘图的体积感。
- 逐帧检查结果。 使用仓库中的分析工具和渲染输出，找出幅度过小、过于突兀或时机不正确的运动。
使用动态面部模板
liveFace.tsx 和 LiveFace.swift 提供会滑动、眨眼和微笑的动态眼睛与嘴巴。你只需提供几何图形和颜色，模板就能添加面部运动，无需为每种表情分别绘制一张图。
保持面部变化清晰且连续。避免极短、看起来像闪烁的眨眼，也避免直接从一种表情切换到另一种表情。细微的眼球运动，以及头部与视线之间略有延迟，都能让角色显得更加专注。
研究随附示例
Reveal
Reveal 场景展示了手机画面中的全身表演。一个剪影脚部下垂地飘入画面，一个孩子受重力影响摔倒并在落地时压缩，一个球滚入画面，眼睛跟随它移动，角色随后踢球、转身、挥手，并继续保持待机动作。该序列是一个每秒 60 帧、时长 9 秒的循环，并使用一个场景时钟。
Garden
Garden 场景将角色表演与环境变化结合起来。水滴沿着由种子确定的弧线运动，土壤逐渐变暗，茎秆分两次推动生长，叶片依次展开，花瓣扭转开放，蝴蝶落下时茎秆会对其重量作出反应。角色的头部和眼睛跟踪蝴蝶，而辫子、帽子和浇水壶则滞后跟随动作。
Chef
Chef 场景展示了时机、重力、预备动作、惊讶和接触效果。一块煎饼翻转并在落地时压缩，第二次尝试时飞得过高，撞到厨师帽，摇晃后滑落，最后被平底锅接住。蒸汽和火焰的运动使用额外的波形，而手部则被定位到把手上。
Orbit
Orbit 场景演示了深度排序。卡片围绕一只鸟旋转，根据自身位置显示在鸟的前方、后方或侧面。鸟会浮动和倾斜，翅膀会扇动，脚和羽冠会产生跟随动作，循环过程中还会在预设时间出现闪光。
渲染 SwiftUI 演示
在 macOS 14 或更高版本上，使用以下命令编译 SwiftUI 模板和演示场景：
swiftc -parse-as-library -target arm64-apple-macos14 templates/swiftui/Motion.swift templates/swiftui/LiveFace.swift demo/*.swift -o /tmp/render-demo将 Reveal 场景以每秒 60 帧渲染到 frames 目录：
/tmp/render-demo reveal /tmp/frames phone fps=60使用 garden、chef 或 orbit 代替 reveal，即可渲染其他场景。使用 FFmpeg 将渲染后的帧序列转换为 MP4：
ffmpeg -framerate 60 -i /tmp/frames/%04d.png -c:v libx264 -pix_fmt yuv420p -crf 20 demo/reveal.mp4渲染可以为检查完整时间线、比较修订版本以及验证动画在目标帧率下保持稳定，提供一致的方法。
分析参考动作
有参考视频时，应在构建之前先进行研究。实时观看时难以察觉的小幅动作，可能决定最终效果是自然扎实还是机械僵硬。
sheet.sh以视频的完整帧率创建联系表，让时间安排和逐帧变化更容易检查。track_edges.py逐帧测量主体边缘，帮助显现细微的抖动、漂浮和摇摆。sample_colors.py读取视频帧中的精确颜色。
在将动作转化为代码之前，使用这些测量结果确定动作的时间安排、幅度和间距。参考视频之所以显得有生命力，可能是因为细微的重心转移、延迟的跟随动作，或轮廓几乎不可察觉的变化。
高级动作技巧
优先采用协调的时间安排
为场景使用一个统一时钟，让相关动作共享时间关系。踢腿、眼睛移动、转头和球的轨迹应共同传达同一事件，而不是表现为彼此独立的动画。
使用跟随动作和预备动作
次要部件不应总是在主体停止时同时停止。让松散的元素短暂延续、逐渐稳定，或对加速度作出反应。这对头发、辫子、帽子、衣物、四肢、阴影和携带的物体尤其有用。
保持待机状态的生命力
角色和场景不应在主要动作之间完全静止。细微的呼吸、眨眼、浮动、摇摆或其他低幅度动作，可以让循环保持活力，同时不干扰主要动作。
在冲击过程中保持体积感
挤压和拉伸应当服务于画面，而不是随意使其变形。Reveal 和 Chef 示例会在落地时使用挤压效果，同时保持角色或物体易于辨认，并与场景保持连贯。
在重复效果重要时使用有种子的变化
对于闪光或水滴等重复细节，当动作需要变化但仍必须可复现时，应使用带种子的行为。可复现的时间安排有助于调试和比较渲染结果。
遵循界面动作指导
对于界面中的动作，请参考项目引用的原则，包括Emil Kowalski 的 skills和 Benji Taylor 的Family values。让界面动作具有明确目的，并与周围设计保持一致。
结论
Motion skill 为将代码绘制的艺术作品转化为富有表现力的动画提供了实用基础。使用 npx 安装它，在 MOTION.md 中记录项目，围绕统一时钟构建，使用 React Native 或 SwiftUI 模板，并通过渲染帧和分析工具检查结果。核心目标很简单：平滑衔接各个姿势，协调整个场景，并为每个部分提供恰当的时间安排和跟随动作，使其充满生命力。