Flutter动画基本结构及状态监听
封面图
•
2025-11-05
•
Flutter
0
0
0
0
在 Flutter 中,动画的实现主要依赖于 `Animation` 和 `AnimationController`。下面是 Flutter 动画的基本结构以及如何监听动画状态。 --- ## 一、Flutter 动画基本结构 ### 1. 使用 `AnimationController` `AnimationController` 是控制动画的核心类,它负责控制动画的播放、暂停、反转等操作。 ```dart final AnimationController _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, // 通常使用 StatefulWidget 的 BuildContext ); ``` > 注意:`vsync` 参数用于同步动画与屏幕刷新率,避免不必要的资源消耗。通常在 `StatefulWidget` 中使用 `this`(即 `State` 对象)作为 `vsync`。 --- ### 2. 创建动画(`Animation`) 你可以使用 `Tween` 来定义动画的起始值和结束值: ```dart final Animation<double> _animation = Tween<double>( begin: 0.0, end: 1.0, ).animate(_controller); ``` 或者使用 `CurvedAnimation` 来添加曲线效果: ```dart final Animation<double> _animation = CurvedAnimation( parent: _controller, curve: Curves.easeIn, ); ``` --- ### 3. 在 Widget 中使用动画 你可以通过 `AnimatedBuilder` 或 `ListenableBuilder` 来监听动画变化并更新 UI: ```dart @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _animation, builder: (context, child) { return Opacity( opacity: _animation.value, child: const Text("Hello, Flutter Animation!"), ); }, ); } ``` --- ## 二、状态监听(监听动画状态) 你可以通过监听 `AnimationController` 的状态来响应动画的开始、结束、暂停等事件。 ### 1. 添加状态监听器 ```dart _controller.addListener(() { print('Animation value: ${_controller.value}'); }); _controller.addStatusListener((status) { switch (status) { case AnimationStatus.forward: print('Animation is running forward'); break; case AnimationStatus.reverse: print('Animation is running reverse'); break; case AnimationStatus.completed: print('Animation completed'); break; case AnimationStatus.dismissed: print('Animation dismissed'); break; } }); ``` --- ## 三、完整示例代码 ```dart import 'package:flutter/material.dart'; class AnimationDemo extends StatefulWidget { @override _AnimationDemoState createState() => _AnimationDemoState(); } class _AnimationDemoState extends State<AnimationDemo> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _animation; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, ); _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller); _controller.addListener(() { print('Current value: ${_controller.value}'); }); _controller.addStatusListener((status) { print('Animation status: $status'); }); _controller.forward(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Flutter Animation Demo')), body: Center( child: AnimatedBuilder( animation: _animation, builder: (context, child) { return Opacity( opacity: _animation.value, child: const Text("Hello, Flutter Animation!"), ); }, ), ), ); } } ``` --- ## 四、常用动画类型 | 类型 | 描述 | |------|------| | `AnimationController` | 控制动画的播放、暂停等 | | `Tween` | 定义动画的起始和结束值 | | `CurvedAnimation` | 为动画添加曲线效果 | | `AnimationBuilder` | 构建动画组件 | | `AnimatedContainer` | 自动处理容器属性的变化 | | `AnimatedOpacity` | 动态改变透明度 | | `AnimatedAlign` | 动态调整对齐方式 | --- ## 五、总结 - Flutter 动画基于 `AnimationController` 和 `Animation`。 - 使用 `addListener()` 和 `addStatusListener()` 可以监听动画的值和状态。 - `AnimatedBuilder` 是构建动画 UI 的推荐方式。 - 动画可以结合 `Tween`、`CurvedAnimation` 等进行复杂效果实现。 如需进一步了解 `AnimatedWidget`、`Hero` 动画或 `PageRoute` 动画,也可以继续问我!
上一篇:
Flutter 事件总线
下一篇:
Flutter自定义路由切换动画
标题录入,一次不能超过6条
留言
评论