1. 动画体系全景为什么需要AnimationController前几天有朋友问我在Flutter里实现一个“点击卡片放大再缩小”的效果用AnimatedScale还是AnimationController这个问题看似简单却把我拉回了好几天前调一个复杂交互动效的夜晚。老实说Flutter的动画生态很容易让新手陷入“选择困难症”——隐式动画写起来舒服但做到后面总有一种“使不上劲”的感觉。先说我的结论如果你只需要“属性A变到属性B系统帮我补中间帧”那就用AnimatedContainer、AnimatedOpacity这类隐式动画几行代码搞定省心省力。但如果你需要精确控制动画的启动时机、持续时间、重复次数、反向播放、停在场中间某个位置甚至多个动画串行、并行、交错执行那就必须把AnimationController玩明白。它是Flutter显式动画体系的“心脏”也是面试官最爱问、实战中最容易出bug的部分。这篇文章我打算把AnimationController和Tween这对黄金搭档拆开揉碎从底层机制讲到实用技巧最后带一个完整的上手案例。不论你是刚接触Flutter的新手还是写过几个页面想深入动画的进阶者只要按着文章的思路走一遍再去写复杂动效就不会再心虚了。1.1 隐式动画的“够用”与“不够用”隐式动画在Flutter里的壮观场面可以用一句话概括你只管声明目标状态剩下的交给框架。AnimatedContainer的duration、curve一设颜色、尺寸、边距、阴影的变化全部自动补间。这种设计非常适合那种“一次性、无交互干预”的过渡效果。但真实业务里动画往往不是这样“单向奔赴”的。举个例子你在做一个手势拖拽的反馈手指滑动30%时卡片跟随位移松手后判断“超过一半就自动飞出去否则弹回来”。这个场景里动画进度需要和手势位移绑定动画过程中还要不断读取当前值来刷新UI甚至中途要被手势“打断接管”。隐式动画的根本矛盾就在这里——它内部自己管理Controller你碰不到那个进度值自然也就没法做“半路杀出”的逻辑。还有个更隐蔽的问题隐式动画的“动画起点”是当前状态但你的业务可能需要“无论当前状态如何都以某个绝对位置作为起点”。这时候隐式动画的隐式起点就成了障碍。所以当你发现自己需要控制动画进度、监听动画状态、组合多个动画时就是时候切换到显式动画了。1.2 显式动画的三层结构Ticker、Controller与Tween显式动画体系可以拆成三个层次理解这三层的关系就等于拿到了Flutter动画的藏宝图。第一层是Ticker帧回调生成器。Flutter的UI刷新依赖vsync信号Ticker的作用就是向引擎申请“下一帧”的回调。每一帧到来时Ticker会告诉我们“现在距离开始过去了多少微秒”。这个机制是动画的物理基础——没有帧回调就没有动画。第二层是AnimationController动画驱动器。它内部持有Ticker根据起始值、结束值和持续时间把“时间流逝”换算成一个0.0到1.0的进度值。这个进度值就是动画的“灵魂”。控制器对外提供forward()、reverse()、repeat()等方法本质上都是在控制这段“时间→进度”的映射过程。第三层是Tween插值器。进度值本身只是0到1的抽象数值真正落到UI上的可能是颜色、位移、尺寸、旋转角度。Tween负责把这个0到1的进度“翻译”成具体类型的中间值进度0.5结合Tweendouble(begin: 0, end: 200)翻译出100结合ColorTween(begin: Colors.red, end: Colors.blue)翻译出红蓝之间的过渡色。这三层的关系用一句话概括Ticker提供心跳Controller提供进度Tween提供映射。其中Controller是整个体系的枢纽它既是Ticker的“老板”又是Tween的“客户”同时也是我们在业务代码里打交道最多的对象。2. AnimationController核心机制深度拆解2.1 vsync的用途与TickerProvider的正确选择看过AnimationController构造函数的同学都会发现一个绕不开的参数vsync。很多人刚接触时不知道为什么需要它直接照抄with SingleTickerProviderStateMixin。这个参数背后的逻辑其实很重要。vsync的本质是“告诉控制器你的Ticker由谁来提供”。TickerProvider是一个抽象接口能够创建并管理Ticker对象。最常见的两个实现是SingleTickerProviderStateMixin和TickerProviderStateMixin。前者适用于“只需要一个AnimationController”的场景后者用于“同时维护多个Controller”的场景。那vsync到底解决了什么问题最关键的一点是防止动画在页面不可见时继续消耗资源。当页面进入了后台比如被路由遮挡、App退到后台Ticker会自动停止向系统申请帧回调动画进度自然暂停。等页面重新可见时Ticker再恢复工作。这个机制避免了一堆“看不见的动画”在后台空转浪费CPU和GPU。选择建议很简单页面上只有一个AnimationController时用SingleTickerProviderStateMixin有两个及以上就用TickerProviderStateMixin。有点要注意的是如果你在State里既用了SingleTickerProviderStateMixin又想创建第二个Controller会直接抛异常因为该Mixin只保证一次多路复用不支持额外创建。实操笔记声明vsync时通常直接传this因为State类通过Mixin混入了TickerProvider。但如果你在非State类里创建Controller比如一个封装动画逻辑的Helper类就要自己实现TickerProvider接口或者把外部的TickerProvider传进去。我踩过这个坑在独立模型层直接AnimationController(vsync: pageState)结果泄漏了整个Widget树排查半天才定位。2.2 控制方法矩阵forward/reverse/repeat/stopAnimationController的核心方法不算多但每个方法的行为和配合关系都值得吃透。我整理了一个我平时写代码必看的对照表方法作用关键参数注意事项forward()从当前值向upperBound通常为1.0方向播放无若当前值已经是1.0则会走completed状态reverse()从当前值向lowerBound通常为0.0方向倒放无与forward对称同样受duration控制repeat()无限循环播放min、max、period、reversereverse: true可实现来回循环stop()停止在当前位置无不会重置状态之后再forward从原处继续reset()将当前值重置为lowerBound无常与forward连用实现“重新播放”animateTo()将进度驱动到指定值value、duration、curve适合做进度条、播放器拖动等场景animateBack()将进度驱动到指定值方向相反同animateTo不如animateTo常用这里面我最想强调repeat(reverse: true)的用法。很多手写的“呼吸灯”“浮标上下浮动”效果其实一个repeat(reverse: true)就够了不用自己监听状态再去手动调forward、reverse。我曾经傻乎乎地在addStatusListener里写if (status completed) controller.reverse()后来发现参数里早就内置了这个能力白白多写了一段容易出错的回调。还有个细节animateTo和animateBack默认使用Curves.linear如果你需要带缓动效果必须显式传curve参数。我有一次做进度条平滑滑动忘了传曲线结果进度条一顿一顿地线性跳用户反馈“很生硬”。2.3 监听机制与动画状态机AnimationController有两条监听线addListener和addStatusListener。前者在数值变化时回调后者在状态变化时回调。两者定位完全不同混用会出大问题。数值监听是动画驱动UI更新的核心方式。每次动画进度刷新addListener里的回调都会触发。问题在于这个回调频率与帧率一致——60FPS下每秒触发约60次。如果你在回调里做重活比如setState里有大尺寸图片解码、复杂布局计算很容易掉帧。后面讲性能优化时我会专门说这个问题。状态监听则更像“事件通知”。AnimationStatus枚举一共四个状态状态含义典型出现时机dismissed动画停在lowerBound0.0reset()后、reverse播放到终点后forward正在正向播放forward()被调用后completed正向播放到upperBound1.0正向播完repeat模式下不会出现reverse正在反向播放reverse()被调用后我在实战中最常用的状态监听场景是做“阶段切换”正向播完后把某个按钮从“展开”变为“收起”反向播完后把某个遮罩层Visibility设为隐藏。如果这些逻辑不加区分地写在数值监听里会导致UI在每一帧都被无效更新。2.4 生命周期管理忘了dispose会怎样写Flutter动画最容易被忽视的环节就是Controller的销毁。AnimationController内部注册了一个Ticker而Ticker的核心是一个附着在SchedulerBinding上的帧回调。如果你在State销毁时不手动dispose这个Ticker会继续存在帧回调仍然触发。最直接的后果是内存泄漏——Controller对象无法被回收它所持有的其他对象比如监听器引用的Widget状态也跟着泄漏。更隐蔽的问题是如果这个Controller引用的State已经销毁帧回调里再访问State的状态轻则无意义地计算重则抛异常。正确的写法永远是成对出现class _MyHomePageState extends StateMyHomePage with SingleTickerProviderStateMixin { late AnimationController _controller; override void initState() { super.initState(); _controller AnimationController( vsync: this, duration: const Duration(milliseconds: 300), ); } override void dispose() { _controller.dispose(); super.dispose(); } }我个人的经验每写一个Controller第一件事就是把dispose先写出来再回头补业务逻辑。别等到写完了再想大概率会忘。尤其是用IDE的自动补全生成initState时系统不会帮你生成dispose完全靠自觉。3. Tween插值器把数字进度翻译成视觉语言3.1 Tween的本质与工作原理很多教程喜欢把Tween称作“补间动画”的一部分但我更愿意给它一个更精确的定义Tween是一个纯函数输入是0.0到1.0的抽象进度输出是目标类型的插值结果。TweenT是一个泛型类核心方法就一个T lerp(double t)。默认实现是T lerp(double t) { return begin (end - begin) * t; }这里的和*是针对num类型定义的所以最基本的Tweendouble、Tweenint可以直接用这个实现。但如果你对颜色、尺寸、边距这类非数值类型做插值Flutter提供了一系列内置子类来完成“类型转换”。有意思的是Controller并不会直接调用Tween的lerp方法而是通过Animation对象向外暴露value。当我们写下_controller.drive(tween)时实际上创建了一个_AnimatedEvaluation它会在Controller数值变化时读取Controller的value作为t调用tween.lerp(t)得到最终值。因此你监听Controller拿到的animation.value其实已经是经过Tween映射后的UI值了。理解这个机制你就明白为什么可以在addListener里直接读取_controller.value经过Tween映射后来setState而不需要手动计算。3.2 内置Tween家族与选型建议Flutter的Tween家族远比初学者想象得丰富。除了最常用的Tweendouble下面这几个我在实际项目中用得最多Tween类型插值对象典型场景ColorTweenColor背景色渐变、文字颜色过渡SizeTweenSize控件尺寸平滑变化RectTweenRect控件位置与尺寸同时变化如展开面板IntTweenint计数器动画配合Curve后注意取整AlignmentTweenAlignmentGeometry子控件在父容器内位置过渡BorderRadiusTweenBorderRadius卡片圆角动画选型建议就一条能用现成就用现成。比如要做圆角变化直接用BorderRadiusTween别自己写TweenBorderRadius的子类。内置类型已经处理好了各种边界情况自己写反而容易漏掉BorderRadius.zero等特殊值。有个坑IntTween在使用CurvedAnimation时可能出现“非整数中间值”的尴尬。因为Curve的变换函数可能把0.5映射到0.6插值时lerp的结果是4.2但IntTween的lerp实现是(begin (end - begin) * t).round()所以最终会取整。不过如果你在动画过程中读取tween.transform(t)的那一刻可能拿到非整数所以我建议对数值严格敏感的动画直接用Tweendouble手动取整。3.3 自定义Tween的套路虽然有丰富的内置Tween但业务需求永远走在框架前面。偶尔会遇到“插值逻辑很特殊”的场景比如让一个控件沿圆弧路径移动、让透明度按非线性方式衰减这时候就要自己写Tween了。自定义Tween的标准做法是继承TweenT重写lerp方法。给你看一个我为“滑入菜单”写的弧度Tween示例class RadianTween extends Tweendouble { RadianTween({required double begin, required double end}) : super(begin: begin, end: end); override double lerp(double t) { // 在默认线性插值基础上叠加一个回弹效果 final bounce 1 - math.cos(t * math.pi * 2) * 0.2 * (1 - t); return begin! (end! - begin!) * t * bounce; } }写自定义Tween时有个重要细节begin和end在父类里是T?类型使用前要解包。同时要注意lerp的t是0.0到1.0的双精度浮点你在里面做的任何数学变换都必须保证“输入0.0时返回begin输入1.0时返回end”否则动画端点值会和预期不符。我个人有个习惯自定义Tween里一定要加注释说明“输入0.5时大概输出什么”这样后来维护代码的人包括三个月后的我能一眼看出这个Tween的“性格”。3.4 Curve与Interval控制动画的节奏进度是线性的——时间过去一半进度恰好0.5。但真实世界的物理运动几乎不存在匀速弹簧有回弹、小球有重力加速度、卡片滑入有先快后慢。CurvedAnimation就是专门让“时间-进度”关系变成“时间-经过曲线”的工具。最简单的用法是final curvedAnimation CurvedAnimation( parent: _controller, curve: Curves.easeOutCubic, );Curves类提供了几十种内置曲线从基础的easeIn、easeOut、easeInOut到有物理感的elasticOut、bounceOut。选曲线的心得是入场用easeOut离场用easeIn强调效果用elastic或bounce。这个规律几乎涵盖90%的交互场景。Interval则更进一步允许你把动画限制在时间的一个子区间里执行。比如总时长600ms让前半段透明度从0到1后半段位移从-50到0就可以这样final opacityTween Tweendouble(begin: 0, end: 1).chain( CurveTween(curve: const Interval(0, 0.5, curve: Curves.easeOut)), ); final offsetTween Tweendouble(begin: -50, end: 0).chain( CurveTween(curve: const Interval(0.5, 1, curve: Curves.easeOut)), );chain方法很关键它把一个CurveTween和原来的Tween组合成一个新的AnimationInterval负责对时间分段。我第一次写多段动画时用的是多个Controller加Future.delayed后来发现一个Controller加Interval就解决了代码量直接减半。4. 实战从零构建一个高品质的卡片点击反馈动画4.1 动画方案设计光讲理论容易飘我拿一个最近上线的项目里的真实需求来演示。需求是这样的首页有一张信息卡片点击后卡片会“放大并上浮”同时阴影逐渐扩散背景浮现一层半透明遮罩点击遮罩或完成后自动收起时卡片恢复到原样。这个动画如果全用隐式写法要么在AnimatedContainer里连续改属性要么用模态路由过渡——但都无法满足“点击卡片瞬间遮罩和卡片同时联动”的体验要求。我决定用AnimationController手动编排。动画设计拆解动画元素起始值结束值时间区间曲线卡片缩放1.01.050~0.4easeOutCubic卡片纵向位移0-180.2~0.6easeOutCubic卡片阴影模糊半径8240.3~0.7easeOutCubic遮罩透明度00.450~0.5easeOutCubic卡片圆角1680~0.4easeOutCubic选easeOutCubic的考量卡片入场应该“轻快落定”而不是“慢悠悠飘过去”easeOutCubic前期快、后期慢配合0.6s总时长刚刚好。阴影和遮罩的区间稍微错开制造出“层次推进”的节奏感不会所有元素一拥而上。4.2 完整代码实现先看状态类的声明class _CardDetailPageState extends StateCardDetailPage with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _scaleAnim; late Animationdouble _offsetAnim; late Animationdouble _shadowAnim; late Animationdouble _maskAnim; late Animationdouble _radiusAnim; bool _expanded false; override void initState() { super.initState(); _controller AnimationController( vsync: this, duration: const Duration(milliseconds: 600), ); _scaleAnim Tweendouble(begin: 1.0, end: 1.05) .chain(CurveTween(curve: const Interval(0, 0.4, curve: Curves.easeOutCubic))) .animate(_controller); _offsetAnim Tweendouble(begin: 0, end: -18) .chain(CurveTween(curve: const Interval(0.2, 0.6, curve: Curves.easeOutCubic))) .animate(_controller); _shadowAnim Tweendouble(begin: 8, end: 24) .chain(CurveTween(curve: const Interval(0.3, 0.7, curve: Curves.easeOutCubic))) .animate(_controller); _maskAnim Tweendouble(begin: 0, end: 0.45) .chain(CurveTween(curve: const Interval(0, 0.5, curve: Curves.easeOutCubic))) .animate(_controller); _radiusAnim Tweendouble(begin: 16, end: 8) .chain(CurveTween(curve: const Interval(0, 0.4, curve: Curves.easeOutCubic))) .animate(_controller); } // ... }注意chain().animate(_controller)的写法。animate方法接收一个Animationdouble返回一个绑定好的Animation对象。这个对象在Controller数值变化时会自动通过chain里的各个阶段取值。这样我就不用在addListener里写任何“if判断”只需在监听里读这些Animation的value。接着是build方法里的AnimatedBuilderoverride Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.transparent, body: Stack( children: [ // 遮罩层 AnimatedBuilder( animation: _maskAnim, builder: (context, child) { return Container( color: Colors.black.withOpacity(_maskAnim.value), ); }, ), // 卡片主体 Center( child: AnimatedBuilder( animation: _controller, builder: (context, child) { return Transform.translate( offset: Offset(0, _offsetAnim.value), child: Transform.scale( scale: _scaleAnim.value, child: Container( width: 280, height: 160, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(_radiusAnim.value), boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.2), blurRadius: _shadowAnim.value, offset: Offset(0, 4), ), ], ), child: child, ), ), ); }, child: const Padding( padding: EdgeInsets.all(16), child: Text(点击卡片展开详情, style: TextStyle(fontSize: 16)), ), ), ), ], ), ); }这里有三个关键点一是用AnimatedBuilder而不是手动addListener setState。AnimatedBuilder内部会在动画数值更新时只重建builder里的子树比整页setState高效得多。我把不会变化的子节点如文本内容通过child参数传入进一步缩小重建范围。二是位移和缩放的组合顺序。先Transform.translate再Transform.scale这样缩放不会影响位移量。如果反过来写缩放1.05倍会把位移-18也放大成-18.9虽然差值细微但敏感的设计师一眼就能看出来。三是遮罩层使用了独立的AnimatedBuilder。虽然它和卡片在同一个Controller下但用两个AnimatedBuilder可以让遮罩的重建不触发卡片的重建提升了性能也让代码职责更清晰。这是我在一个性能优化专项里学到的小细节。4.3 动画触发与状态切换动画本身写好了还差“点击触发”和“收尾”的逻辑。点击卡片时判断当前是否已展开决定forward还是reversevoid _toggleCard() { setState(() { _expanded !_expanded; }); if (_expanded) { _controller.forward(); } else { _controller.reverse(); } }这里有个优化细节forward和reverse并不会改变Controller的duration两者播放时间一样。但需求里“收起”应该比“展开”稍快让人觉得系统响应敏捷。我在实际项目中给收起动画单独设置了一个更短的时长void _collapse() { _controller.duration const Duration(milliseconds: 400); _controller.reverse(); }AnimationController.duration是允许你动态修改的这在“展开收起不对称”的场景里非常实用。还有一个值得注意的点在_toggleCard里直接调_controller.forward()如果用户快速连点Controller会重复调用forward()。这不会崩溃但动画会出现“刚播一点又从头开始”的抖动。稳妥的做法是先判断当前statusif (_controller.status AnimationStatus.forward || _controller.status AnimationStatus.reverse) { return; }或者用_controller.isAnimating属性来判断。实测下来加一行判断能让体验顺滑很多。4.4 性能优化RepaintBoundary与RenderLayer做完功能测试后我用Flutter的性能工具扫了一遍发现卡片在动画过程中偶尔有一两帧掉到50多毫秒。原因是整个Scaffold的Stack包含多层透明叠加卡片动画时背景的文本内容也跟着重新合成成本偏高。解决办法是给卡片和遮罩分别加RepaintBoundary层。RepaintBoundary的核心作用是“隔离重绘区域”它会让子树生成独立的Layer动画只影响这个Layer的属性变化如变换矩阵、透明度而不是触发整个页面重新合成。RepaintBoundary( child: AnimatedBuilder(...) )加完之后再看性能数据动画帧稳定在60FPS没有掉帧。这个优化对手写动画、尤其是包含阴影和多个变换的动画特别有效强烈建议养成习惯。我的经验不要等性能出问题再加RepaintBoundary。在写动画Widget的那一瞬间就给卡片根节点包一层成本几乎为零但能避免后面排查合成开销的烦恼。不过注意不要滥用——在列表项里给每个item加RepaintBoundary反而会因层数量过多增加管理开销。5. 踩坑记录与调试技巧5.1 动画为什么不执行经典排查路线即使写得很规范动画“不执行”依然是最高频的问题。我总结了一套排查路线按顺序检查能省不少时间。第一检查vsync是否正确传入。一旦vsync传错或用了this但State没有混入TickerProvider创建Controller的瞬间就会抛异常。第二检查Controller是否已经dispose。如果在动画过程中比如点击事件里对一个已dispose的Controller调用forward()会直接报“was used after being disposed”。第三检查addListener里是否真的调用了setState或者依赖了AnimatedBuilder。有些人写好了动画对象但忘了绑定到任何Widget上Controller数值跑得飞起界面却纹丝不动。第五也是我遇到过最隐蔽的动画值范围太小导致肉眼看不见。比如Tweendouble(begin: 0.99, end: 1.01)数值从0.99变到1.01理论上有效果但视觉上可能只有几十分之一的像素差异看起来就像没动。遇到这种情况先手动设置一个极端的begin/end值确认动画链路没问题再回调小范围。5.2 状态管理导致的动画异常Flutter的动画和状态管理深度纠缠最容易出问题的场景是“动画进行中路由被切换”。比如在GestureDetector的onTap里异步请求完成后触发动画但不巧的是用户已经点了返回键页面从导航栈中弹出。如果Controller没有在dispose里正确销毁异步回调触发动画轻则控制台报错重则闪退。我现在的习惯是所有可能异步触发的动画都先判断mountedif (!mounted) return; if (_controller.isAnimating) return; _controller.forward();另一个常见的状态坑是在addListener的回调里读取外部状态来决定动画走向。比如_controller.addListener(() { if (someExternalFlag) { _controller.stop(); } });这种写法极度危险。addListener是每帧执行你在里面调stop()会影响同一帧后续的渲染逻辑甚至触发“帧回调→stop→再回调”的递归循环。真需要根据外部状态中断动画用addStatusListener或TickerFuture的回调来做而不是在数值监听里干预。5.3 调试利器Flutter Inspector与debugPrint写动画时最容易遇到的问题是“进度跑到了但UI没变化”。这时候光靠肉眼很难定位是进度问题、映射问题还是渲染问题。我会在addListener里临时加一句debugPrint_controller.addListener(() { debugPrint( t${_controller.value.toStringAsFixed(3)}, scale${_scaleAnim.value.toStringAsFixed(3)}, offset${_offsetAnim.value.toStringAsFixed(3)}, ); });观察输出判断是哪一层出了问题。如果t在正常推进但scale不变问题在Tween的Interval配置如果t根本不推进问题在Controller或vsync如果t正常、值正常但界面不动问题在UI绑定。另一个利器是Flutter自带的debugAnimatedBuilders在Flutter Inspector的“Highlight Animated Builders”选项。开启后所有由动画驱动的AnimatedBuilder会以高亮色显示方便确认动画是否生效以及影响范围有多大。Performance Overlay也很有用。当动画掉帧时把它打开能看到实际帧率分布。如果你发现掉帧不是发生在动画组件内部而是发生在其他区域的重建就要回过去检查是不是有不该变的父Widget在动画期间被重建了。5.4 避坑速查表坑位现象解决方案忘记dispose内存泄漏、Ticker还在跑在State.dispose里控制器.dispose()vsync传错运行时异常State混入TickerProvider传thisaddListener里做重活掉帧改用AnimatedBuilder或回调里只更新轻量状态Interval配置不当动画在某个阶段“卡住”检查每个区间的起止时间是否连续、是否会重叠重复调用forward动画闪烁重播先判断isAnimating或status动画与状态管理混用页面销毁后回调崩溃mounted安全检查 规范dispose阴影动画体感卡顿掉帧明显RepaintBoundary隔离必要时降低阴影动画频率这些坑我基本都踩过一遍有些甚至是在同事的代码里帮忙排查出来的。动画的问题往往不会立刻暴露而是在特定操作路径下才触发所以规范地写初始化、监听和销毁比“事后补救”省心得多。写在最后的一个小经验做动画这么多年我最深的体会是Flutter的动画API不是背出来的而是“用”出来的。AnimationController和Tween的组合看似简单但真正的功力体现在细节——什么时候用Interval分段什么时候用CurvedAnimation制造节奏什么时候用chain串联变换这些都要靠多写多调才能形成肌肉记忆。这篇文章里的代码和踩坑记录都是我从真实项目中提炼出来的希望能给正在进阶Flutter动画的同学一点参考。如果你在写动画时也遇到了什么有意思的坑欢迎在评论区交流咱们一起把Flutter的动画玩得更顺手。