MOTION Animate — 跨平台 UI 动画设计与实现
v1.0.0Animate 助力设计和实现跨 Flutter、React、SwiftUI、Compose 和 React Native 的 UI 动画，提供动效系统、防护措施和减弱动画回退。帮助开发者创建统一的动画体验，支持微交互、导航过渡、共享元素流等，确保动画的可访问性和性能。
0· 370·6 当前·8 累计
by 安全扫描
OpenClaw
安全
high confidence本技能仅提供指令，内部一致，用于设计和实现 UI 动画，仅在 ~/animate/ 存储轻量级本地内存，所有请求和安装内容与该目标成比例。
评估建议
本技能为指令式动效设计助手，描述一致。安装/启用前注意：1) 将创建 ~/animate/ 文件（不存储敏感信息）；2) 检查创建文件权限；3) 共享机器使用后考虑禁用或删除目录；4) 验证无自动上传/遥测；5) 不希望保留上下文，请拒绝激活或删除 ~/animate/。...详细分析 ▾
✓ 用途与能力
名称和描述（跨多个栈的 UI 动画）与 SKILL.md 和伴随文档内容匹配。没有不与动画/设计助手一致的无关环境变量、二进制文件或安装步骤请求。
ℹ 指令范围
运行时指令指示代理读写 ~/animate/ 本地内存文件夹，捕获产品/平台上下文和可重用默认值。适用于设计/内存助手，但意味着技能将保留您提供的信息。SKILL.md 明确指出避免保存机密信息， 默认情况下机器外无数据离开；这是指导（不是强制机制）——用户应避免将敏感凭据或个人身份信息 (PII) 粘贴到内存文件中。
✓ 安装机制
无安装规格或代码（仅指令）。这是最低风险模型：安装程序除了技能请求创建的显式内存文件外， ничего不会下载或写入。
✓ 凭证需求
技能不请求环境变量或凭据。唯一请求的工件是用于本地内存的配置路径 (~/animate/)，与技能的目的（存储动效令牌、模式和 QA 笔记）成比例。
ℹ 持久化与权限
技能将本地内存持久化到 ~/animate/（记录文件名和结构）。它不设置 always:true，也不请求更广泛的系统权限。保留用户提供的产品上下文是预期的，但用户应了解此数据将保留在磁盘上直到删除，并应为敏感数据设置适当的文件系统权限。
安全有层次，运行前请审查代码。
运行时依赖
🖥️ OSLinux · macOS · Windows
版本
latestv1.0.02026/3/7
初始版本，聚焦应用、网页和 React 动画系统、实施防护和 QA。
● 无害
安装命令
点击复制官方npx clawhub@latest install animate
镜像加速npx clawhub@latest install animate --registry https://cn.longxiaskill.com
技能文档
适用场景
用户需要在产品 UI 中设计或实现动效。代理将模糊的需求转化为动效契约、技术栈特定的实现选择和可测试的验收标准，覆盖 Flutter、React、Next.js、SwiftUI、Compose、React Native 和更广泛的 Web 技术栈。
适用于微交互、导航转场、共享元素流程、加载状态、手势反馈和动效系统设计。不适用于视频编辑、GIF 渲染或媒体编码。
架构
记忆存储在 ~/animate/。如果 ~/animate/ 不存在，运行 setup.md。结构和状态字段见 memory-template.md。
~/animate/
|- memory.md # 持久动效偏好和平台上下文
|- tokens.md # 已批准的时长、缓动和弹性阶梯
|- patterns.md # 经过验证的交互和转场模式
|- platform-notes.md # 技术栈特定的实现决策
- qa.md # 回归、低端设备发现和无障碍备注
快速参考
仅加载当前任务所需的最小相关文件。
| 主题 | 文件 |
|---|---|
| 安装流程 | setup.md |
| 记忆模板 | memory-template.md |
| 动效系统和规范契约 | motion-system.md |
| 按技术栈路由 | platform-routing.md |
| 按技术栈的起始代码片段 | implementation-snippets.md |
| 常见应用动画模式 | pattern-catalog.md |
| 性能和无障碍约束 | performance-accessibility.md |
| QA 和回归检查 | qa-playbook.md |
核心规则
1. 从产品意图和状态变化出发
- 在选择效果之前，先定义触发器、用户目标和状态转换。
- 将动效映射到五种任务之一：定位、反馈、连续性、强调或愉悦。
- 如果意图不明确，不要急于添加动画。
2. 编写代码前先写动效契约
每个提案必须指定：
- 触发器和受影响的界面
- 初始状态、结束状态和减弱动画回退
- 时长、缓动或弹性、延迟或交错，以及取消行为
- 验收标准：响应性、无障碍性、一致性和性能
不允许没有具体数值的模糊措辞如"流畅"或"高端"。
3. 路由到最安全的原生抽象
使用能解决问题的最高层 API：
Flutter：隐式动画组件、AnimatedSwitcher、TweenAnimationBuilder、Hero- React 和 Next.js：CSS 优先的转场、Motion presence/layout API，以及路由安全的转场，优先于定制编排
SwiftUI：withAnimation、内容转场、matchedGeometryEffectCompose：animate*AsState、AnimatedVisibility、updateTransition- React Native：原生线程或 worklet 安全的动画路径，优先于 JS 线程编排
Web：CSStransform和opacity、View Transitions 或框架原生转场，优先于 GSAP 级别的复杂度
当更高级的原语已处理中断和生命周期时，避免低层动画代码。
4. 优化合成器安全的动效和中断处理
- 优先使用保持布局稳定的 transform、opacity、color 和 scale 模式。
- 避免使用 width、height、top、left 和布局驱动的循环，除非技术栈提供专用的布局动画原语。
- 定义快速点击、返回手势、关闭、重新渲染、离屏和导航取消时的行为。
- 用户永远不应被动画卡住。
5. 默认提供无障碍变体
- 尊重减弱动画和系统动画缩放设置。
- 用更平静的等效方案替代大位移、视差、弹跳、重度模糊装饰和无限循环。
- 永远不要仅依赖运动来传达状态。
- 动画期间保持焦点顺序、屏幕阅读器输出和点击目标稳定。
6. 覆盖真实产品状态，不仅是理想路径
- 在相关时为加载、成功、错误、空、禁用、重试和乐观更新状态添加动画。
- 协调导航、覆盖层、列表、表单和异步数据，确保动效在延迟和内容变化时仍然正常工作。
- 先交付稳健的 V1，然后仅在约束允许时提供更有表现力的 V2。
7. 用预览、测试和设备现实验证
- 为你涉及的动效状态留下确定性预览、story 或演示开关。
- 当应用技术栈支持时，添加或更新行为测试、E2E 测试或视觉测试。
- 在宣布完成之前，验证减弱动画、中端性能和中断流程。
常见陷阱
- 没有用户理由的漂亮动画 → 额外的动效，更少的清晰度。
- 每个屏幕硬编码时间 → 不一致的产品体验和痛苦的迭代。
- 关键移动动效使用 JS 或主线程编排 → 负载下掉帧。
- 只为理想路径状态添加动画 → 加载、错误或快速重试时体验崩溃。
- 缺少取消规则 → 卡住的覆盖层、幽灵状态或导航故障。
- 只发布一种变体 → 无障碍回归和低端设备性能差。
安全与隐私
离开你机器的数据：
- 此技能本身默认不发送任何数据。
留在本地的数据：
~/animate/下的动效偏好、已批准的 token、平台备注和 QA 学习记录。
此技能不会：
自动上传构建、视频或遥测数据。为记忆修改~/animate/之外的文件。- 禁用无障碍设置。
修改自身的SKILL.md。
相关技能
用户确认后使用 clawhub install 安装：
flutter- Flutter 动效有用的组件生命周期和性能规则。react- 影响 React 应用动画行为的组件和渲染模式。react-native- React Native 的移动生命周期和动画线程约束。swift- Apple 平台的 Swift 和 SwiftUI 实现模式。android- 原生动效的 Android 和 Compose 实现细节。
反馈
如果有用：clawhub star animate保持更新：clawhub sync`