Flutter 动画过渡组件
封面图
•
2025-11-09
•
Flutter
0
0
0
0
在 Flutter 中,**动画过渡组件(Animation Transitions)** 是用于实现页面或组件之间平滑切换效果的重要工具。Flutter 提供了多种方式来实现动画过渡,包括使用 `AnimatedWidget`、`Hero`、`PageRouteBuilder`、`Transition` 等。 下面是一些常用的 Flutter 动画过渡组件和它们的使用方式: --- ## 一、基本动画组件 ### 1. **AnimatedWidget** 这是 Flutter 中最基础的动画组件之一,它可以根据状态变化自动重新构建。 ```dart class MyAnimatedWidget extends AnimatedWidget { MyAnimatedWidget({Key? key, required Animation<double> animation}) : super(key: key, listenable: animation); @override Widget build(BuildContext context) { return Container( width: 100 + animation.value * 100, height: 100, color: Colors.blue, ); } } ``` 使用示例: ```dart final AnimationController controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, ); final Animation<double> animation = CurvedAnimation(parent: controller, curve: Curves.easeIn); @override void initState() { super.initState(); controller.forward(); } @override Widget build(BuildContext context) { return MyAnimatedWidget(animation: animation); } ``` --- ## 二、页面过渡动画(Page Transition) ### 1. **PageRouteBuilder** 通过自定义 `PageRouteBuilder` 实现页面之间的动画过渡。 ```dart Navigator.push( context, PageRouteBuilder( pageBuilder: (context, animation, secondaryAnimation) => SecondPage(), transitionsBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition( opacity: animation, child: child, ); }, ), ); ``` ### 2. **SlideTransition / FadeTransition / RotationTransition** 这些是内置的动画组件,可以结合 `PageRouteBuilder` 使用。 ```dart transitionsBuilder: (context, animation, secondaryAnimation, child) { return SlideTransition( position: Tween<Offset>( begin: const Offset(1, 0), end: Offset.zero, ).animate(animation), child: child, ); } ``` --- ## 三、Hero 动画(跨页面共享动画) `Hero` 组件用于在两个页面之间实现“共享”动画,比如图片、按钮等元素的过渡。 ### 示例: **Page 1:** ```dart Hero( tag: 'hero-tag', child: Image.network('https://example.com/image.jpg'), ) ``` **Page 2:** ```dart Hero( tag: 'hero-tag', child: Image.network('https://example.com/image.jpg'), ) ``` 当从 Page 1 跳转到 Page 2 时,图片会以动画形式过渡。 --- ## 四、Transition 组件(第三方库) 如果你想要更高级的过渡效果,可以使用一些第三方库,例如: ### 1. **flutter_transition** ```yaml dependencies: flutter_transition: ^1.0.0 ``` 使用示例: ```dart Transition( child: YourWidget(), transitionType: TransitionType.fade, duration: const Duration(milliseconds: 300), ) ``` ### 2. **animated_switcher** Flutter 内置的 `AnimatedSwitcher` 可以在多个子组件之间进行动画切换。 ```dart AnimatedSwitcher( duration: const Duration(milliseconds: 300), child: _currentScreen, ) ``` --- ## 五、常用动画曲线(Curve) - `Curves.linear` - `Curves.ease` - `Curves.easeIn` - `Curves.easeOut` - `Curves.easeInOut` - `Curves.bounceIn` - `Curves.elasticIn` --- ## 六、总结:常用动画组件列表 | 组件/类 | 用途 | |--------|------| | `AnimatedWidget` | 基础动画组件 | | `AnimationController` | 控制动画播放 | | `CurvedAnimation` | 动画曲线控制 | | `PageRouteBuilder` | 自定义页面过渡动画 | | `FadeTransition` | 淡入淡出动画 | | `SlideTransition` | 水平/垂直滑动动画 | | `RotationTransition` | 旋转动画 | | `Hero` | 页面间共享动画 | | `AnimatedSwitcher` | 多个组件间的动画切换 | | `flutter_transition` | 第三方动画库 | --- 如果你想了解某个具体组件的详细用法,比如 `Hero` 或 `PageRouteBuilder` 的进阶用法,我可以继续为你详细讲解!
上一篇:
Flutter 动画切换组件(AnimatedSwitcher)
标题录入,一次不能超过6条
留言
评论