极简实现酷炫动效：Flutter隐式动画指南第三篇自定义Flutter隐式动画

目录

前言

一、TweenAnimationBuilder

二、使用TweenAnimationBuilder实现的一些动画效果

1.调整透明度的动画

2.稍微复杂点的组合动画

3.数字跳动的动画效果

---

前言

        上两节博客分别介绍了Flutter中的隐式动画的基础知识以及使用隐式动画实现的一些动画效果。当系统提供的隐式动画不能满足我们的需求的时候，我们还可以通过TweenAnimationBuilder 自定义我们的隐式动画。

        下面进入正题，我们了解下TweenAnimationBuilder的一些知识。

一、TweenAnimationBuilder

        TweenAnimationBuilder 是 Flutter 中用于创建动画的便捷小部件，它提供了一种简单的方法来使用 Tween 定义的值在一段时间内生成平滑的过渡效果。适用于需要根据数值变化进行动画的场景，例如颜色、大小、透明度或位置等过渡效果。

        TweenAnimationBuilder 的主要属性包括：

1. tween：用于描述动画的开始和结束值。例如，可以是 Tween<double>(begin: 0, end: 100)

2. duration：动画的持续时间。

3. builder：每一帧调用一次，构建动画效果的 UI，传入当前的动画值。

4. onEnd：动画结束时的回调，可用于触发其他动。

二、使用TweenAnimationBuilder实现的一些动画效果

1.调整透明度的动画

        以下代码演示了如何使用 TweenAnimationBuilder 在两种透明度之间创建渐变动画效果：

        图1.透明度渐变的动画效果

代码如下：

import 'package:flutter/material.dart';class TweenAnimationExample extends StatelessWidget {const TweenAnimationExample({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Colors.purple,title: const Text("TweenAnimationBuilder ",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 16),),),body: Center(child: TweenAnimationBuilder(tween: Tween<double>(begin: 0.0, end: 1.0),duration: const Duration(seconds: 2),builder: (context, double opacity, child) {return Opacity(opacity: opacity,child: child,);},child: Container(width: 100,height: 100,color: Colors.blue,),),),);}
}

在这个示例中，我们定义了一下属性：

1. tween 定义了从 0.0 到 1.0 的透明度过渡。
2. duration 设置动画持续时间为 2 秒。
3. builder 函数在每一帧构建一个带有当前透明度的 Opacity 小部件，从而形成透明度渐变的动画效果。

2.稍微复杂点的组合动画

        我们还可以结合隐式动画的渐变、缩放、圆角、旋转等属性实现稍微复杂的动画效果。

        例如我们要实现图2所示的动画效果：

图2.复杂的动画效果

代码如下：

import 'package:flutter/material.dart';
import 'dart:math';class ComplexAnimationExample extends StatefulWidget {const ComplexAnimationExample({super.key});@overrideState<ComplexAnimationExample> createState() => _ComplexAnimationExampleState();
}class _ComplexAnimationExampleState extends State<ComplexAnimationExample> {bool _isAnimated = false;void _toggleAnimation() {setState(() {_isAnimated = !_isAnimated;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Colors.purple,title: const Text('TweenAnimationBuilder',style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 16),),      ),body: Center(child: GestureDetector(onTap: _toggleAnimation,child: TweenAnimationBuilder(duration: const Duration(seconds: 2),tween: Tween<double>(begin: 0, end: _isAnimated ? 2 * pi : 0),builder: (context, double rotation, child) {return Transform.rotate(angle: rotation,child: TweenAnimationBuilder(duration: const Duration(seconds: 2),tween: ColorTween(begin: Colors.purple, end: _isAnimated ? Colors.orange : Colors.purple),builder: (context, Color? color, child) {return TweenAnimationBuilder(duration: const Duration(seconds: 2),tween: BorderRadiusTween(begin: BorderRadius.circular(10),end: BorderRadius.circular(_isAnimated ? 75 : 10)),builder: (context, BorderRadius? borderRadius, child) {return TweenAnimationBuilder(duration: const Duration(seconds: 2),tween: Tween<double>(begin: 100, end: _isAnimated ? 200 : 100),builder: (context, double size, child) {return Container(width: size,height: size,decoration: BoxDecoration(color: color,borderRadius: borderRadius,),child: child,);},child: const Center(child: Text('点击看动画!',style: TextStyle(fontSize: 14, color: Colors.white),),),);},);},),);},),),),);}
}

    在我们的例子中：

1. 旋转：最外层的 TweenAnimationBuilder 使用 Tween<double> 定义旋转角度的动画，从 0 到 2π，即旋转一整圈。

2. 颜色渐变：在旋转的基础上，嵌套了一个 TweenAnimationBuilder，使用 ColorTween 从紫色渐变到橙色。

3. 边框圆角：进一步嵌套了一个 BorderRadiusTween，实现容器边框从圆角半径 10 变化到 75。

4. 尺寸变化：最内层的 TweenAnimationBuilder 使用 Tween<double> 控制容器大小在 100 到 200 之间平滑过渡。

5. 点击切换动画：通过 GestureDetector 包裹，点击容器触发 _toggleAnimation() 方法，使 _isAnimated 状态切换并重建 Widget，从而实现动画的来回切换。

3.数字跳动的动画效果

        我们在使用一些支付app的时候，经常会看到图3所示的动画效果。

        我们看看如何使用TweenAnimationBuilder实现数字的渐变动画。

        大致的思路如下：使用 TweenAnimationBuilder 实现一个数字从 1000 到 2000 的渐变动画。TweenAnimationBuilder 能够逐步生成中间值，从而呈现数字的平滑渐变效果。下面是一个完整的示例代码，通过 Tween<int> 来定义数字范围并逐步更新显示的数值。

        图3.数字渐变动画

代码如下：

import 'package:flutter/material.dart';class NumberTransitionExample extends StatefulWidget {const NumberTransitionExample({super.key});@overrideState<NumberTransitionExample> createState() => _NumberTransitionExampleState();
}
class _NumberTransitionExampleState extends State<NumberTransitionExample> {bool _isAnimating = false;void _toggleAnimation() {setState(() {_isAnimating = !_isAnimating;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Colors.purple,title: const Text('TweenAnimationBuilder',style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 16),),),body: Center(child: TweenAnimationBuilder(tween: IntTween(begin: 1000, end: _isAnimating ? 2000 : 1000),duration: const Duration(seconds: 3),onEnd: () => debugPrint("Animation Complete"),builder: (context, int value, child) {return Text('$value',style: const TextStyle(fontSize: 48, fontWeight: FontWeight.bold),);},),),floatingActionButton: FloatingActionButton(onPressed: _toggleAnimation,child: const Icon(Icons.play_arrow),),);}
}

        在上面的例子中：Tween<int>：使用 IntTween 将动画的整数起点设为 1000，终点为 2000。点击按钮后，起点和终点之间的值会逐步更新。

        点击“播放”按钮后，屏幕上数字会从 1000 平滑过渡到 2000，直到动画完成。