# Fec Motion Interaction

> 用于设计、实现或审查前端交互动效、页面转场、滚动动画、Framer Motion、GSAP、Lottie、CSS 动画、动效强度、动画性能、减少动效行为或兼具表现力与可访问性的 UI 动效。不要用于仅 SVG 路径绘制、Canvas/WebGL 渲染或普通 hover 状态；中文触发词包括 动效设计、交互动效、页面转场、滚动动画、Framer Motion、GSAP。

- Skill: `majiayu000/fec-motion-interaction-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/fec-motion-interaction-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/fec-motion-interaction-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/majiayu000/fec-motion-interaction-2

---


# 交互动效

适用于需要把页面转场、滚动叙事、组件入场、微交互和反馈节奏设计成可维护、可降级、可验证的前端动效任务。需要具体实现模式时加载 [motion-patterns.md](references/motion-patterns.md)。

## 用途

为前端界面选择合适动效工具、强度和质量门禁。

## 流程

1. 判断动效职责
   - 先写清动效服务的用户意图：定位、反馈、层级变化、状态确认、叙事引导或品牌记忆。
   - 工具型界面默认克制，优先保障扫描效率；营销页和作品页可增加节奏，但不能遮挡主要信息。
   - 若动效只装饰而不改善理解、反馈或品牌识别，应删掉或改成静态视觉处理。
   - loading、skeleton、toast、错误提示和成功反馈属于状态沟通；动效只能增强反馈节奏，不能替代文本、语义或可见状态。

2. 选择技术路线
   - CSS transition/keyframes：hover、focus、toast、简单入场和小型状态反馈。
   - Framer Motion：React 状态驱动、布局过渡、列表编排和可中断的组件级动画。
   - GSAP：时间轴、滚动触发、复杂序列和跨元素精确编排。
   - Lottie：设计工具输出的图标或空状态动画，按需懒加载。
   - CSS scroll-driven animation：可接受渐进增强且无需旧浏览器一致性时使用。

3. 定义强度等级
   - Level 1-2：只用 150-250ms opacity/transform，适合后台、表单和高频工具。
   - Level 3-4：加入短 stagger、局部 spring 和轻量 reveal，适合仪表盘、设置页和管理台。
   - Level 5-6：加入视差、布局 morph、指针响应，适合产品展示和交互式首页。
   - Level 7+：使用滚动叙事、固定段落或 3D/WebGL 配合，必须单独做移动端和 reduced-motion 降级。
   - 场景默认值：公共服务、医疗、金融和强可访问性产品从 Level 1-2 起步；SaaS 工具和数据后台从 Level 2-3 起步；营销页、品牌页和作品集可从 Level 4-6 起步；实验性活动页或沉浸式叙事才考虑 Level 7+。
   - 如果 UI 设计流程已经设定了动效强度拨盘，沿用该拨盘；不要因为引入了某个动效库就自动提高强度。

4. 建立性能边界
   - 只高频动画 `transform`、`opacity`，谨慎使用 `filter` 和 `clip-path`。
   - GSAP、Lottie、Three.js、重型动画组件必须动态导入或隔离在叶子组件。
   - 持续动画需要暂停条件：不可见、标签页隐藏、用户关闭、低电量或 reduced motion。
   - 不在滚动事件中同步读写布局；使用 IntersectionObserver、ScrollTimeline 或节流后的 rAF。
   - 滚动叙事、stagger、spring、磁吸指针和视差效果必须各自有明确职责；同一屏不要同时堆叠多种高强度运动语言。
   - 长页面中重复 reveal 动画要控制节奏，避免每个区块都以同一种延迟、方向和 easing 进入，造成模板感和滚动疲劳。

5. 设计可访问降级
   - 所有非必要动效读取 `prefers-reduced-motion`，降级为静态、淡入或即时状态。
   - 自动播放或循环动效若超过 5 秒，应提供暂停方式或只在局部非关键区域运行。
   - 不闪烁超过每秒 3 次；不要用动效作为唯一状态提示。
   - focus ring、错误提示、成功反馈必须在无动效时同样清楚。
   - 手势动画必须有点击、键盘或明确控件替代；拖拽、滑动和长按不能成为唯一操作路径。

6. 验证交付
   - 在 375px、768px、1440px 检查动效是否遮挡文案、按钮或表格内容。
   - 检查首次加载 bundle 是否因动效库显著膨胀。
   - 手动开启 reduced motion，确认动画被禁用或弱化。
   - 用性能面板或实际设备确认滚动和关键交互没有明显掉帧。
   - 检查动效强度是否匹配页面类型：工作台不应出现营销式滚动剧场，作品集也不应只有默认 hover 淡入。
   - 对滚动触发序列确认用户可以快速到达内容，不因 pinned 区块、过长时间轴或不可中断过渡丢失上下文。

## 约束

- 不在同一个组件内混用 Framer Motion 和 GSAP 控制同一元素。
- 不用动效掩盖 loading、empty、error、disabled 等状态缺失。
- 不为普通后台表格、配置页和高频工作台默认加入大幅视差或滚动劫持。
- 不让所有区块使用相同 reveal 模板；动效节奏应随信息层级和用户任务变化。
- 不动画 `width`、`height`、`top`、`left`、`margin`、`padding` 等会频繁触发布局的属性。
- 不把大型 Lottie JSON、GSAP 插件或 3D 场景放入首屏同步包。
- 不让动画改变阅读顺序、焦点顺序或键盘可达性。
- 不用 skeleton 长时间占位掩盖真实加载失败；超过预期时应转入可理解的 loading、retry 或 error 状态。

## 预期输出

输出应包含动效目的、技术选型、强度等级、降级策略、性能边界和验证结果。完成后交互动效应帮助用户理解状态和层级，在 reduced-motion 与低端设备上仍可用，并且不显著拖慢首屏或滚动体验。