什么是Animate
Animate 是一个专为现代跨平台 UI 框架设计的动画系统工具，支持 Flutter、React、SwiftUI、Jetpack Compose 和 React Native 等主流技术栈。它通过标准化的动画契约（Motion Contract）将模糊的产品意图转化为可执行、可测试的动画实现方案，帮助团队在多个平台上保持一致的动效体验。该工具的核心理念是‘以用户目标驱动动画设计’，强调动画应服务于明确的用户任务，而非单纯追求视觉华丽。 Animate 提供了一套完整的动画开发流程规范，包括从产品意图定义到具体平台实现的选择逻辑。它要求开发者先明确触发条件、状态变化和用户目标，再根据五种核心动画职能——方向引导、反馈提示、连续性维持、重点强调和愉悦点缀——来选择合适的动效类型。整个系统内置了对无障碍支持和低端设备兼容性的考量，默认集成减少动画模式（reduced-motion）和系统级动画缩放设置的适配机制，确保所有用户都能获得流畅且可访问的体验。 该工具采用本地存储架构，所有配置、动画令牌（tokens）、已验证模式和性能记录均保存在 `~/animate/` 目录下。其文件结构清晰，包含记忆模板、平台路由指南、性能护栏说明和质量保证检查表等模块，便于团队协作与知识沉淀。同时，Animate 避免使用过于复杂的第三方动画库（如 GSAP），优先推荐各平台原生的高阶抽象 API，以保证动画在交互中断、生命周期管理和性能优化方面的可靠性。
核心功能特点
- 基于用户目标和状态变化定义动画意图，避免无意义的视觉堆砌
- 强制编写动画契约（Motion Contract），明确触发条件、状态转换、持续时间和降级策略
- 为 Flutter、React、SwiftUI、Compose、React Native 提供平台专属的最佳实践与代码片段
- 优先使用各平台原生高阶动画 API，确保中断处理和性能稳定性
- 内置无障碍支持，自动适配系统级减少动画设置并提供替代性动效方案
- 覆盖加载、错误、重试等非理想路径状态，保障复杂业务场景下的动画连贯性
适用场景
Animate 最适合用于构建具有清晰用户旅程的微交互与导航过渡效果。例如，在一个电商应用中，当用户点击商品卡片时，可以使用共享元素过渡（shared-element transitions）让图片和标题平滑移动到详情页；或者在列表滚动时，新条目淡入的同时旧条目滑出，维持界面节奏感。这些场景都依赖于 Animate 提供的模式目录（pattern-catalog.md）中预定义的交互范式，确保动效既符合直觉又易于维护。 对于需要跨平台一致体验的团队而言，Animate 能有效解决不同技术栈间动画风格碎片化的问题。无论是 Flutter 中使用 Hero 组件实现页面跳转动画，还是在 SwiftUI 中利用 matchedGeometryEffect 完成视图匹配过渡，Animate 都会根据当前项目的技术栈自动推荐最合适的实现路径，并标注出关键注意事项，如避免在主线程执行复杂动画、防止布局抖动等。这使得同一套动效规范可以无缝落地于 iOS、Android、Web 乃至桌面端应用之中。 此外，Animate 特别关注真实生产环境中的边缘情况处理。它不仅要求对成功状态进行美化，更强调对异步数据加载、网络错误、表单校验失败等异常流程赋予合理的动画反馈。比如，在提交表单过程中显示旋转加载指示器，失败后震动提示并恢复原状，都能显著提升用户对系统状态的感知度。这种全面的状态覆盖能力，配合其严格的性能测试与回归检查机制（qa-playbook.md），使得 Animate 成为打造高可用、高性能现代 UI 不可或缺的基础设施。