Interface Lab
登录
返回知识库
Frontend Implementation

Copy-in 动效组件本地化与可访问性

复制外部动效组件、Lottie/Rive 播放器、Motion/GSAP 示例或 registry block 后，要把文字、状态、方向、时长、reduced-motion、pause/stop/hide、键盘路径和授权来源改成本地契约。

copy-inmotionlocalizationaccessibility

设计原则

动效组件复制进仓库后不再是演示片段，而是本地交互资产。它必须同时满足品牌语气、语言方向、可访问降级、性能预算和来源授权。

大理论

复制式动效库能快速做出有表现力的界面，但演示组件通常默认英文文案、理想数据、装饰性运动和单一视觉主题。agent 不能只把 Magic UI、Motion-Primitives、Animate UI、Lottie、Rive 或 GSAP 示例粘进项目再换颜色；它要把动效目的、文本、状态、可访问性和授权一起收敛成本地契约。

小知识点

  1. 先判断动效角色：反馈、连续性、引导、状态变化、品牌氛围或庆祝，不要为所有元素加运动。
  2. 本地化不只是翻译文案；还包括 zh/en 长度、数字/日期格式、RTL 方向、按钮标签、空/错/加载/完成状态和语气。
  3. prefers-reduced-motion 或 Motion 的 useReducedMotion 需要替换大位移、缩放、视差和自动播放，保留必要的 opacity 或即时状态变化。
  4. 自动播放、循环、闪烁、ticker、marquee、carousel 和背景视频要提供 pause/stop/hide 或短时停止机制，不能与主要内容抢注意力。
  5. 键盘路径、focus-visible、aria-live、aria-busy、alt/poster、静态 fallback 和屏幕阅读器名称要随组件一起验收。
  6. 复制组件时记录 source URL、license、commit/version、依赖、导入文件、被删除的 demo 资产和本地修改说明。

设计判断

如果关闭动画后用户仍能理解状态并完成任务，且开启动画时能更清楚地解释变化或品牌语气，这个组件可以入库。若动画承担唯一信息、阻止键盘操作、无法暂停或只适合英文 demo，它还没有完成本地化。

实现建议

建立 motion intake checklist：source、license、component role、localized copy、state matrix、duration/easing、reducedMotion behavior、pause/stop/hide control、keyboard path、ARIA/live-region、asset fallback、dependency diff、performance notes 和 QA screenshots。React/Motion 项目优先用 MotionConfig reducedMotion="user" 或 useReducedMotion 做全局/局部降级；Tailwind 动画使用 motion-safe/motion-reduce；Lottie/Rive 保留静态 poster 和文本状态。

反例/风险

把英文空状态 Lottie 直接放进中文后台、marquee 伙伴 logo 永久滚动且不可暂停、loading 只靠旋转图形没有文字、复制 Motion 示例后忘记安装依赖或 license、关闭动画后内容顺序错乱、RTL 下位移动画方向错误。

案例分析

Magic UI 把自己定位为可复制粘贴的动效组件和效果库，MIT 授权；Motion-Primitives 提供基于 Motion 与 Tailwind 的动效组件，并提示项目处于 beta；Animate UI 是基于 React、Tailwind、Motion 和 Shadcn CLI 的动效组件分发。Motion 官方可访问性文档建议尊重 Reduced Motion 偏好，用 opacity 替换大元素 transform、禁用 autoplay 视频和 parallax；WCAG 2.2.2 要求并行内容中的自动移动、闪烁、滚动或自动更新可暂停、停止或隐藏。可学习点是：复制动效组件的速度收益，必须用本地化、降级和控制机制还回来。

来源链接

Magic UI: https://github.com/magicuidesign/magicui Motion-Primitives: https://github.com/ibelick/motion-primitives Animate UI: https://github.com/imskyleen/animate-ui Motion useReducedMotion: https://motion.dev/docs/react-use-reduced-motion Motion accessibility: https://motion.dev/docs/react-accessibility WCAG Pause, Stop, Hide: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html WCAG Animation from Interactions: https://www.w3.org/TR/WCAG22/#animation-from-interactions

Agent 指令

复制动效组件前必须记录来源授权和动效角色；入库时必须本地化文案、状态、reduced-motion、pause/stop/hide、键盘路径和静态 fallback，禁止只复制 demo 效果。