Flutter Motion Kit

可预览的 Flutter 动画 + 避坑指南 · 支持 Claude Code 一键复用

每个动画都能在线预览(DartPad 真跑)、给出可直接使用的代码,并标注 对应的坑(含出处与可信度)。在 Claude Code / Cursor 里可通过 MCP 一键检索复用。

一键接入 AI 编辑器
Add to Cursor Add to VS Code
claude mcp add --transport http flutter-motion https://flutter-motion-kit.mx8515703.workers.dev/mcp
全部 explicitheroimplicitstaggered

AnimatedContainer 隐式动画

点击时让方块的尺寸 / 颜色 / 圆角平滑过渡。能用隐式动画解决的,就不要手写 AnimationController —— 更短、更不容易出错。

implicit 难度 1/5 ⚠ 3 个坑

AnimatedSwitcher 内容切换

在新旧内容之间做淡入缩放过渡(如计数器、加载/成功状态切换)。关键是给子组件唯一 Key。

implicit 难度 2/5 ⚠ 3 个坑

Hero 共享元素转场

点击网格项,元素「飞」到详情页对应位置。两端用同一个 Hero tag,框架自动接管过渡。

hero 难度 2/5 ⚠ 4 个坑

自定义页面转场(淡入+上滑)

用 PageRouteBuilder 自定义进场动画(淡入 + 轻微上滑),替代默认平台转场。

explicit 难度 2/5 ⚠ 4 个坑

Shimmer 骨架屏加载

数据加载时用「扫光」骨架占位。单个 controller + ShaderMask 渐变扫过,比逐个 item 开控制器省。

explicit 难度 3/5 ⚠ 4 个坑

列表项交错入场

列表项依次「淡入 + 上滑」入场。用单个 AnimationController + Interval 错峰驱动, 比给每个 item 各开一个 controller 更省资源。

staggered 难度 3/5 ⚠ 4 个坑