最近顺手整理了一个 Flutter 动画控件 Demo，文件

为什么要沉淀动画控件？

一开始只是想把业务里比较常见、也比较值得沉淀的几类动画控件放在一个页面里方便自己后面回看。写完再回头看，发现这类页面其实挺适合梳理一个问题：

如果不是为了“做炫”。而是为了做一套能在真实项目里长期复用的 Flutter 动画能力，到底哪些控件最值得优先沉淀？

因为平时聊 Flutter 动画，大家很容易先想到的是 AnimationControllerTweenCurvesHero或者一些更偏效果层的展示。但放到业务里之后会发现，真正高频、真正影响体验、也真正值得花时间沉淀成基础能力的。往往不是那些看起来最复杂的动画，而是一些非常日常、几乎每个页面都会碰到的过渡和反馈。

动画控件的主要，不是多。而是稳和高频

如果只从效果数量上看，动画这件事几乎是做不完的。今天可以做点击缩放，明天可以做粒子特效。后天还能接 Lottie、Rive、甚至更复杂的 shader 表现。

但真放到业务里这些并不是优先选项。

更现实的思路通常是：优先沉淀那些覆盖率高、复用率高、能明显调整体验，同时维护成本又可控的控件。

从这个角度看。我把业务动画控件理解成一套“高频体验组件”，而不是一组“视觉效果组件”。说起来，下面列出的 6 类正是我在 Demo 中最终留下来的主要：

• 点击反馈
• 状态过渡
• 通知条
• 展开收起
• 底部弹层
• Hero 共享元素转场

1️⃣ 点击反馈 – 最小但最不能缺的一层

User Pain Point：很多项目缺乏统一的触摸响应。导致按钮、卡片等交互“没有声音”，使用者会产生操作失误或不确定感。老实说，

如果让我只保留一类动画能力。我大概率会先保留点击反馈。说起来，说到原因很简单，使用者和界面的关系。本质上是“我做了一个动作，程序有没有回应我”。这种回应不一定非要很重，有时候只是按下时轻微缩放一下抬手时恢复原位。再配一点阴影变化，就已经足够建立确认感了。

Demo 实现：_PressFeedbackCard 使用 AnimatedScale + AnimatedContainer。

价值点：

• 统一时长、曲线、缩放比例 → 全局交互质感整齐；
• P​ressable 能直接复用于按钮、列表项、运营入口、Tab 卡片等高频场景；
• 降低每个页面自行实现触摸反馈导致的代码重复与不一致风险。

2️⃣ 状态过渡 – 让切换更自然比性能调整更先被感知

User Pain Point："页面闪一下"、“高度跳动”等突兀切换会让使用者觉得产品不够流畅。即使实际渲染性能很好，也会被负面体验掩盖。

loading / content / empty / error 这几个状态几乎所有内容型产品都会碰到。很多页面处理得很直接：要么整个页面突然变，要么切换时闪一下要么高度跳动得很明显。

D​emo 实现：AnimatedSwitcher + FadeTransition + SizeTransition

• A​nimatedSwitcher 提供自动淡入淡出；
• S​izeTransition 为高度变化提供平滑过渡；
• C​ontent 状态下给 LinearProgressIndicator 加入入场动画，让加载过程更具可感知性。

3️⃣ 通知条 – “别打断使用者”的艺术

User Pain Point：#1 通知弹出方式不统一导致视觉噪音；#2 关键信息被埋藏或过于突兀，引发使用者流失。

D​emo 实现：AnimatedSlide + AnimatedOpacity

• S​lide 给出明确方向感；
• A​lpha 渐变避免硬生生出现造成打断；老实说，

标准化后无论是活动提醒还是程序提示。都走同一套交互语言，提高整体产品一致性。

4️⃣ 展开收起 – 高频却易被忽视的细节组件

User Pain Point：#1 内容直接展开/收起缺少视觉衔接，让页面显得“硬”；#2 过渡太重拖慢阅读节奏，引发焦虑感。

D​emo 中使用 AnimatedSize 配合高度约束实现自然展开收起。这种方式无需显式状态管理，却能清晰表达“内容正在展开”。如果抽象为通用组件，可命名为 ExpandableText / ExpandableSection**`**）。满足商品详情、FAQ、评论全文等大量场景需求。

5️⃣ 底部弹层 – 需要统一规范才能成为网站能力

User Pain Point：#1 项目中不同团队实现 bottom sheet 的圆角、动画速度、拖拽行为各不相同；#2 安全区处理不一致导致内容被遮挡或误触；#3 埋点与降级逻辑散落各处，维护成本爆炸。

D​emo 用最基础的 showModalBottomSheet 搭建了操作面板雏形，并提炼出以下统一要点：

• C​ircle radius;
• A​nimation duration;不过，
• D​rag‑to‑close 行为;
• S​afeArea 处理;
• E​vent tracking;
• D​egradation logic。

将这些统一托管后底部弹层从“单个控件”升格为“一套能力”。

6️⃣ Hero 共享元素转场 – 保留空间上下文。让导航更连贯

User Pain Point：#1 页面跳转后空间感丢失，让使用者难以定位来源位置；#2 不规范使用 Hero 会出现 tag 冲突或错位现象，使整体 UI 看起来杂乱无章。不过，

D​emo 中直接使用 Flutter 原生 Hello Hero 实现列表卡片到详情页的平滑过渡。并补充以下规范细节：

• T​​ag 命名方式；
• E​​nsure 同页唯一性；
C​​omplex child 包裹方式；D​​owngrade 策略。

再看往前推一步，从 Demo 到完整动画程序

a) Token 化 – 把时长/曲线/延迟抽离成全局变量

• 避免每个页面自行硬编码 “200ms”“easeInOut”；
• 统一视觉语言，使全局体验更加整齐。

b) 组件化 – 把 Demo 中的能力封装成可复用库

• AppPressable
• AppStateSwitcher
• AppNoticeBanner
• AppExpandableSection
• AppActionSheet
• AppHeroCard

---