vmitsaras/应用动态连续运动

应用动态连续运动 是做什么的？

目的

应用一种克制的运动语言，赋予布局物理记忆：元素保持可识别，响应用户的能量，并稳定在下一个决策可被做出的位置。

将提供的参考视频视为设计语言的证据，而非需要复制的模板。保留用户要求的概念、技术、范围和授权边界。仅当用户要求实施时才应用文件更改；对于规划或审查请求，仅返回指导而不编辑文件。

何时使用此技能

在以下情况下使用此技能：

• GSAP 演示或 Web 界面需要在空间或布局状态之间保持连续性。
• 任务涉及图像字段、画廊、轮播、接触表、锚定预览、基于路径的序列、路由组或克制型动态排版。
• 现有动画感觉脱节、在快速输入下显得陈旧、过于装饰性，或对象身份不明确。
• 用户希望将提供的运动参考转化为原创、可访问且可实施的交互语言。

在以下情况下不使用此技能：

• 简单的悬停、焦点、按下或不透明度变化可通过普通的 CSS 过渡处理。
• 请求是与连续性或空间状态问题无关的动画任务。
• 任务涉及电影、视频编辑或角色动画，而非界面行为。
• 用户需要全面的可访问性审计，而非针对运动的规划、实施或审查。

需检查的输入

检查最小的相关输入集合：

• 请求的用户任务、触发器、主题、起始状态和目标状态。
• 相关的组件、模板、样式、运动工具、测试、演示和文档。
• 现有的动画依赖项，尤其是已使用的 GSAP 插件。
• 用户提供的视频、原型、截图、故事板或运动分析笔记。
• 响应式行为、指针和触摸行为、键盘路径、焦点行为以及减运动要求。
• 性能约束，如重复项、图像权重、几何测量和高频输入。

当参考资料、GSAP 插件或项目规范不存在时，不要假设它们存在。

参考路由

在选择运动原语、调整时序和缓动、定义减运动行为或评估自然性时，请阅读 references/pattern-catalog.md。

该目录是自包含的。如果任务需要每个视频的来源或与指定剪辑的比较，请检查该任务工作空间中提供的参考媒体或运动分析文档，而不是假设此技能的细节。

核心运动契约

• 通过位置、缩放和布局变化保持对象身份。
• 为每个运动拍子赋予一个主导方向。
• 使相邻元素作为一个空间场响应，具有相关的速度和基于距离的错开。
• 在下一帧绘制时响应用户的直接输入。对稳定阶段应用缓动，而不是抓取点。
• 短暂加速，并在整个持续时间中花费更多时间减速。
• 重叠出场和入场状态，避免出现空白帧。
• 一致使用缩放来传达焦点、深度或优先级。
• 将活跃段落解析为稳定、可读的静止状态。
• 保持表现性变形简短、局部、可逆且非必要。

优先选择连续性而非奇观。移除不解释状态、层次、方向或反馈的运动。

选择一个主要原语

选择最能解释状态变化的原语。不要为了增加视觉新颖性而组合多个原语。

• 惯性场：可平移或漂移的星座，作为一个系统运动。
• 平行轨道：重复的媒体轨道，速度变化克制。
• 路由组：在可见通道或类别之间移动的簇。
• 锚定预览交换：稳定的索引控制一个有边界的预览区域。
• 曲线行进：卡片从单个路径进度值中导出位置、缩放和堆叠。
• 收敛链：概览弯曲并缩放为聚焦构图。
• 接触表解决：保留项连接密集和精细的布局。
• 有界文本扰乱：显示文本短暂偏移后干净重建。

当交互仅需要简单的悬停、焦点、按下或不透明度变化时，使用普通的 CSS 过渡。

工作流程

1. 确认请求是规划、实施还是审查，并保留该边界。
2. 识别触发器、主题、起始状态、目标状态和用户任务。
3. 写一句运动论文，解释运动为何存在。
4. 选择一个主要原语，并定义其稳定的起始和结束构图。
5. 在添加完整编排之前定义减运动状态。
6. 建立微观、中级和宏观层次。并非每个元素都需要每一层的运动。
7. 实施或指定直接响应、协调移动和平稳停留。
8. 使快速输入重新定位当前渲染状态，而不是将动画加入队列。
9. 验证指针、触摸、键盘、焦点、减运动、中断和失败路径。
10. 以正常速度查看，然后使用单帧步进或 0.25x 速度查找不连续和堆叠错误。
11. 当请求实施时，运行仓库的相关测试或检查，并报告仍需进行的验证。

时间签名

使用参考标记作为起点，然后根据移动距离和交互频率适度调整：

• 即时确认：约 90ms。
• 悬停或焦点：约 180ms。
• 紧凑状态变化：约 320ms。
• 布局重新配置：约 520ms。
• 大型空间场景：约 780ms，通常限制在 1000ms 以下。
• 空间错开：35–60ms，按距离运动源远近排序。

优先使用 power3.out 进行标准稳定，power4.out 用于更强的编辑性入场，power2.inOut 用于已知状态重新配置。仅当进度随滚动、拖拽或其他连续输入变化时使用线性运动。

不要将弹性或回弹缓动作为系统标志。如果释放弹需要过冲，请将其保持在约 3% 以下。

实施不变性

• 使用 CSS 处理简单状态过渡，使用 GSAP 时间线处理协调序列。
• 当共享元素连续性有价值时，使用 GSAP Flip 处理实际布局变化。
• 仅在拖拽是真实交互且存在等效的可见控件时使用 Draggable。
• 仅用于真实的滚动叙事时使用 ScrollTrigger；不要引入滚动劫持。
• 从一个归一化进度值派生曲线运动属性，使 x、y、缩放、不透明度和堆叠不会漂移。
• 使用 overwrite: "auto"、quickTo() 或一个由进度驱动的时间线来实现可中断运动。
• 首先动画化 transform 和 opacity。
• 批量 DOM 读取，缓存几何数据，避免在高频更新中进行测量。
• 仅在运动活跃时应用 will-change，并在大型一次性序列后尽可能移除。
• 确保在 JavaScript 失败时最终内容仍可用。不要依靠入场时间线来显示基本内容。

遵循仓库现有的 HTML、CSS、JavaScript、资源和演示文档规范。未经用户授权，不要添加或替换动画依赖项。

交互和可访问性不变性

• 使悬停与焦点、点击或轻触行为匹配。
• 保持焦点样式可见，且至少与悬停一样清晰。
• 当视觉项变为空间布局时，保留语义源顺序。
• 对于拆分或打乱的排版，保留一个完整可读的文本来源。
• 使拖拽、滑动和滚轮成为可选的输入方式；提供“上一个”和“下一个”控件或其他键盘路径。
• 在开始新手势时取消动量。
• 在有意义的交互期间以及页面不可见时暂停连续运动。
• 对于 prefers-reduced-motion: reduce，移除惯性、轨道旋转、自动播放、缩放移动和文本扰乱。通过即时更改或简短的不透明度过渡来保留内容和选择。
• 未经测试不得声称符合可访问性标准。

审查标准

当运动出现以下情况时标记：

• 传送或替换本应保持可识别的对象；
• 使用没有空间来源的随机错开；
• 将过时的悬停状态加入队列；
• 在阅读内容旁边持续运动；
• 使缩放成为装饰性而非有意义；
• 依赖拖拽、悬停或动画来揭示基本内容；
• 在每个动画帧上产生布局计算；
• 变换粘性容器而不是内部场景层；
• 比状态变化所需的更长或更精致。

输出格式

返回模式相关的结果：

规划

• 运动论文和所选原语。
• 起始、过渡和稳定状态。
• 运动层次、时序、中断和减运动行为。
• 可访问性、性能、实施和验证说明。

实施

• 应用的运动行为摘要。
• 更改的文件以及每个更改的作用。
• 所选原语、运动层次、减运动效果、可访问性行为和性能策略。
• 已运行的测试或检查以及仍需进行的手动检查。

审查

优先级	问题	证据	建议

同时报告推断的原语、运动层次、减运动效果、可访问性行为、性能策略以及任何证据限制。

质量门槛

任务仅当以下条件满足时才完成：

• 所选原语比更简单的过渡更清晰地解释了状态变化。
• 对象身份、方向、响应、中断、稳定和静止是连贯的。
• 全运动和减运动状态保留相同的内容和任务结果。
• 指针、触摸、键盘和焦点行为在适用时具有等效的可用路径。
• 高频运动避免重复布局测量和过时的排队状态。
• 审查结果引用具体的界面状态、代码或可观察行为。
• 实施工作遵循项目规范，并包含适当的验证。

边缘情况

• 如果项目不使用 GSAP，则保留其现有技术栈，除非用户要求添加 GSAP；以可用的平台 API 表达相同原则，或提供计划。
• 如果参考媒体不可用，请使用捆绑的模式目录，并披露未执行特定剪辑的比较。
• 如果多个状态变化需要不同的原语，为每个状态变化选择一个主要原语，并保持共享的时序和物理规则一致。
• 如果动画失败或 JavaScript 不可用，基本内容和控件必须保持可用。
• 如果粘性容器或滚动元素需要看似变换，请动画化内部场景层，而不是粘性容器。
• 如果某个概念与减运动、键盘或内容访问要求冲突，在简化编排的同时保留任务结果和状态关系。

相关技能

• motion-behavior-planner 用于实现与库无关的运动计划，不包含实施。
• motion-experience-director 用于更广泛的站点级运动系统。
• motion-animation-accessibility-audit 用于全面的运动可访问性审计。
• creative-technologist 用于更广泛的前端可行性和渐进增强规划。