系列文章
- Flutter 旋转动画 — RotationTransition
- Flutter 平移动画 — 4种实现方式
- Flutter 淡入淡出与逐渐出现动画
- Flutter 尺寸缩放、形状、颜色、阴影变换动画
- Flutter 列表Item动画 — AnimatedList实现Item左进左出、淡入淡出
- Flutter Hero 实现共享元素转场动画
- Flutter Hero 实现径向变换动画 — 圆形变成矩形的转场动画
- Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画
文章目录
1 文字变换动画效果图
2 动画基础知识
- Animation 是 Flutter 动画库中的核心类,它插入用于引导动画的值。
- AnimationController 管理动画。例如控制动画开始、停止、前进、后退等。
- CurvedAnimation 将进程定义为非线性曲线。
- Tween 在被动画对象使用的数据范围之间进行插值。 例如,Tween 可以定义从红色到蓝色或从 0 到 255 的插值。
- Listeners 和 StatusListeners 可监控动画状态的变化。
- AnimatedWidget 是展示动画的Widget,Flutter提供一些动画Widget让我们快速实现动画效果。例如:DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition
- AnimatedBuilder 可自定义AnimatedWidget,实现自定义动画效果
3 使用AnimatedBuilder 实现数字递增动画
实现动画的步骤和前文中提到的使用 FadeTransition、SizeTransition、SlideTransition等AnimatedWidget类似。
- 定义AnimationController与Animation,在此处使用Tween补间动画。
- 构建AnimatedBuilder,将 Animation 的值显示出来即可。
完整的代码
class NumAnimationPage extends StatefulWidget {
const NumAnimationPage({
Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() => _NumAnimationPageState();
}
class _NumAnimationPageState extends State<NumAnimationPage>
with SingleTickerProviderStateMixin {
/// 持续时间为5秒的动画控制器
late final AnimationController _controller = AnimationController(
vsync: this,
duration: const Duration(seconds