flutter文字特效（小技巧之有趣的动画技巧）

flutter文字特效（小技巧之有趣的动画技巧）完整代码可见： https://github.com/CarGuo/gsy_flutter_demo/blob/master/lib/widget/anim_switch_layout_demo_page.dart效果class PositionItem extends StatelessWidget {br final PositionedItemData data;br final Widget child;brbr const PositionItem(this.data {required this.child});brbr @overridebr Widget build(BuildContext context) {br return new AnimatedPositioned(br duration: Duration(seconds: 1) b

本篇分享一个简单轻松的内容： 剖析 Flutter 里的动画技巧 ，首先我们看下图效果，如果要实现下面的动画切换效果，你会想到如何实现？

动画效果

事实上 Flutter 里实现类似的动画效果很简单，甚至不需要自定义布局，只需要通过官方的内置控件就可以轻松实现。

首先我们需要使用 AnimatedPositioned 和 AnimatedContainer ：

• AnimatedPositioned 用于在 Stack 里实现位移动画效果
• AnimatedContainer 用于实现大小变化的动画效果

接着我们定义一个 PositionItem ，将 AnimatedPositioned 和 AnimatedContainer 嵌套在一起，并且通过 PositionedItemData 用于改变它们的位置和大小。

class PositionItem extends StatelessWidget {br final PositionedItemData data;br final Widget child;brbr const PositionItem(this.data {required this.child});brbr @overridebr Widget build(BuildContext context) {br return new AnimatedPositioned(br duration: Duration(seconds: 1) br curve: Curves.fastOutSlowIn br child: new AnimatedContainer(br duration: Duration(seconds: 1) br curve: Curves.fastOutSlowIn br width: data.width br height: data.height br child: child br ) br left: data.left br top: data.top br );br }br}brclass PositionedItemData {br final double left;br final double top;br final double width;br final double height;brbr PositionedItemData({br required this.left br required this.top br required this.width br required this.height br });br}

之后我们只需要把 PositionItem 放到通过 Stack 下，然后通过 LayoutBuilder 获得 parent 的大小，根据 PositionedItemData 调整 PositionItem 的位置和大小，就可以轻松实现开始的动画效果。

brchild: LayoutBuilder(br builder: (_ con) {br var f = getIndexPosition(currentIndex % 3 con.biggest);br var s = getIndexPosition((currentIndex 1) % 3 con.biggest);br var t = getIndexPosition((currentIndex 2) % 3 con.biggest);br return Stack(br fit: StackFit.expand br children: [br PositionItem(f br child: InkWell(br onTap: () {br print("red");br } br child: Container(color: Colors.redAccent) br )) br PositionItem(s br child: InkWell(br onTap: () {br print("green");br } br child: Container(color: Colors.greenAccent) br )) br PositionItem(t br child: InkWell(br onTap: () {br print("yello");br } br child: Container(color: Colors.yellowAccent) br )) br ] br );br } br)

如下图所示，只需要每次切换对应的 index ，便可以调整对应 Item 的大小和位置发生变化，从而触发 AnimatedPositioned 和 AnimatedContainer 产生动画效果，达到类似开始时动图的动画效果。

计算大小	效果

完整代码可见： https://github.com/CarGuo/gsy_flutter_demo/blob/master/lib/widget/anim_switch_layout_demo_page.dart

如果你对于实现原理没兴趣，那到这里就可以结束了，通过上面你已经知道了一个小技巧：

改变 AnimatedPositioned 和 AnimatedContainer 的任意参数，就可以让它们产生动画效果，而它们的参数和 Positioned 与 Container 一模一样，所以使用起来可以无缝替换 Positioned 与 Container ，只需要简单配置额外的 duration 等参数。

进阶学习

那 AnimatedPositioned 和 AnimatedContainer 是如何实现动画效果 ？这里就要介绍一个抽象父类 ImplicitlyAnimatedWidget 。

几乎所有 Animated 开头的控件都是继承于它，既然是用于动画 ，那么 ImplicitlyAnimatedWidget 就肯定是一个 StatefulWidget ，那么不出意外，它的实现逻辑主要在于 ImplicitlyAnimatedWidgetState ，而我们后续也会通过它来展开。

首先我们回顾一下，一般在 Flutter 使用动画需要什么：

• AnimationController ： 用于控制动画启动、暂停
• TickerProvider ： 用于创建 AnimationController 所需的 vsync 参数，一般最常使用 SingleTickerProviderStateMixin
• Animation ： 用于处理动画的 value ，例如常见的 CurvedAnimation
• 接收动画的对象：例如 FadeTransition

简单来说，Flutter 里的动画是从 Ticker 开始，当我们在 State 里 with TickerProviderStateMixin 之后，就代表了具备执行动画的能力：

每次 Flutter 在绘制帧的时候，Ticker 就会同步到执行 AnimationController 里的 _tick 方法，然后执行 notifyListeners ，改变 Animation 的 value，从而触发 State 的 setState 或者 RenderObject 的 markNeedsPaint 更新界面。

举个例子，如下代码所示，可以看到实现一个简单动画效果所需的代码并不少，而且这部分代码重复度很高，所以针对这部分逻辑，官方提供了 ImplicitlyAnimatedWidget 模版。

brclass _AnimatedOpacityState extends State<AnimatedOpacity>br with TickerProviderStateMixin {br late final AnimationController _controller = AnimationController(br duration: const Duration(seconds: 2) br vsync: this br )..repeat(reverse: true);br late final Animation<double> _animation = CurvedAnimation(br parent: _controller br curve: Curves.easeIn br );brbr @overridebr void dispose() {br _controller.dispose();br super.dispose();br }brbr @overridebr Widget build(BuildContext context) {br return Container(br color: Colors.white br child: FadeTransition(br opacity: _animation br child: const padding(padding: EdgeInsets.all(8) child: FlutterLogo()) br ) br );br }br}

例如上面的 Fade 动画，换成 ImplicitlyAnimatedWidgetState 只需要实现 forEachTween 方法和 didUpdateTweens 方法即可，而不再需要关心 AnimationController 和 CurvedAnimation 等相关内容。

brclass _AnimatedOpacityState extends ImplicitlyAnimatedWidgetState<AnimatedOpacity> {br Tween<double>? _opacity;br late Animation<double> _opacityAnimation;brbr @overridebr void forEachTween(TweenVisitor<dynamic> visitor) {br _opacity = visitor(_opacity widget.opacity (dynamic value) => Tween<double>(begin: value as double)) as Tween<double>?;br }brbr @overridebr void didUpdateTweens() {br _opacityAnimation = animation.drive(_opacity!);br }brbr @overridebr Widget build(BuildContext context) {br return FadeTransition(br opacity: _opacityAnimation br alwaysIncludeSemantics: widget.alwaysIncludeSemantics br child: widget.child br );br }br}

那 ImplicitlyAnimatedWidgetState 是如何做到改变 opacity 就触发动画？

关键还是在于实现的 forEachTween ：当 opacity 被更新时，forEachTween 会被调用，这时候内部会通过 _shouldAnimateTween 判断值是否更改，如果目标值已更改，就执行基类里的 AnimationController.forward 开始动画。

这里补充一个内容：FadeTransition 内部会对 _opacityAnimation 添加兼容，当 AnimationController 开始执行动画的时候，就会触发 _opacityAnimation 的监听，从而执行 markNeedsPaint ，而如下图所示， markNeedsPaint 最终会触发 RenderObject 的重绘。

所以到这里，我们知道了：通过继承 ImplicitlyAnimatedWidget 和 ImplicitlyAnimatedWidgetState 我们可以更方便实现一些动画效果，Flutter 里的很多默认动画效果都是通过它实现。

另外 ImplicitlyAnimatedWidget 模版里，除了 ImplicitlyAnimatedWidgetState ，官方还提供了另外一个子类 AnimatedWidgetBaseState。

事实上 Flutter 里我们常用的 Animated 都是通过 ImplicitlyAnimatedWidget 模版实现，如下图所示是 Flutter 里常见的 Animated 分别继承的 State ：

ImplicitlyAnimatedWidgetState	AnimatedWidgetBaseState

关于这两个 State 的区别，简单来说可以理解为：

• ImplicitlyAnimatedWidgetState 里主要是配合各类 *Transition 控件使用，比如： AnimatedOpacity里使用了 FadeTransition 、AnimatedScale 里使用了 ScaleTransition ，因为 ImplicitlyAnimatedWidgetState 里没有使用 setState，而是通过触发 RenderObject 的 markNeedsPaint 更新界面。
• AnimatedWidgetBaseState 在原本 ImplicitlyAnimatedWidgetState 的基础上增加了自动 setState 的监听，所以可以做一些更灵活的动画，比如前面我们用过的 AnimatedPositioned 和 AnimatedContainer 。
• 
  

其实 AnimatedContainer 本身就是一个很具备代表性的实现，如果你去看它的源码，就可以看到它的实现很简单，只需要在 forEachTween 里实现参数对应的 Tween 实现即可。

例如前面我们改变的 width 和 height ，其实就是改变了Container 的 BoxConstraints ，所以对应的实现也就是 BoxConstraintsTween ，而 BoxConstraintsTween 继承了 Tween ，主要是实现了 Tween 的 lerp 方法。

在 Flutter 里 lerp 方法是用于实现插值：例如就是在动画过程中，在 beigin 和 end 两个 BoxConstraint 之间进行线性插值，其中 t 是动画时钟值下的变化值，例如：

计算出 100x100 到 200x200 大小的过程中需要的一些中间过程的尺寸。

如下代码所示，通过继承 AnimatedWidgetBaseState ，然后利用 ColorTween 的 lerp ，就可以很快实现如下文字的渐变效果。

代码	效果

总结

最后总结一下，本篇主要介绍了：

• 利用 AnimatedPositioned 和 AnimatedContainer 快速实现切换动画效果
• 介绍 ImplicitlyAnimatedWidget 和如何使用 `ImplicitlyAnimatedWidgetState / AnimatedWidgetBaseState 简化实现动画的需求，并且快速实现自定义动画。

那么，你还有知道什么使用 Flutter 动画的小技巧吗？