# Flutter Motion Kit

> 可预览的 Flutter 动画实现集合，每条带「对应的坑（含出处与可信度）」，
> 并提供 MCP server 供 AI 编码助手（Claude Code / Cursor）直接检索复用。

## Use via MCP

- claude mcp add flutter-motion -- npx -y flutter-motion-mcp
- tools: search_flutter_animation, get_animation, list_pitfalls, list_categories

## Animations (6)

- [AnimatedContainer 隐式动画](https://flutter-motion-kit.pages.dev/a/animated-container-implicit) — implicit, 难度 1/5, 3 pitfalls. 点击时让方块的尺寸 / 颜色 / 圆角平滑过渡。能用隐式动画解决的，就不要手写 AnimationController —— 更短、更不容易出错。
- [AnimatedSwitcher 内容切换](https://flutter-motion-kit.pages.dev/a/animated-switcher-swap) — implicit, 难度 2/5, 3 pitfalls. 在新旧内容之间做淡入缩放过渡（如计数器、加载/成功状态切换）。关键是给子组件唯一 Key。
- [Hero 共享元素转场](https://flutter-motion-kit.pages.dev/a/hero-shared-element) — hero, 难度 2/5, 4 pitfalls. 点击网格项，元素「飞」到详情页对应位置。两端用同一个 Hero tag，框架自动接管过渡。
- [自定义页面转场（淡入+上滑）](https://flutter-motion-kit.pages.dev/a/page-route-transition) — explicit, 难度 2/5, 4 pitfalls. 用 PageRouteBuilder 自定义进场动画（淡入 + 轻微上滑），替代默认平台转场。
- [Shimmer 骨架屏加载](https://flutter-motion-kit.pages.dev/a/shimmer-skeleton) — explicit, 难度 3/5, 4 pitfalls. 数据加载时用「扫光」骨架占位。单个 controller + ShaderMask 渐变扫过，比逐个 item 开控制器省。
- [列表项交错入场](https://flutter-motion-kit.pages.dev/a/staggered-list-entrance) — staggered, 难度 3/5, 4 pitfalls. 列表项依次「淡入 + 上滑」入场。用单个 AnimationController + Interval 错峰驱动， 比给每个 item 各开一个 controller 更省资源。

## Machine-readable catalog

- https://flutter-motion-kit.pages.dev/api/animations.json