Flutter 交织动画
封面图
•
2025-11-05
•
Flutter
0
0
0
0
在 Flutter 中,**交织动画(Interleaved Animation)** 通常指的是多个动画同时进行,并且它们之间有一定的时序关系,比如一个动画开始后另一个才开始,或者两个动画交替进行。这种类型的动画可以用于创建更复杂、更具视觉吸引力的 UI 效果。 下面是一个使用 `AnimationController` 和 `Tween` 实现 **交织动画** 的简单示例: --- ## ✅ 示例:两个动画交叉播放 我们实现两个动画,一个从左到右移动,另一个从上到下移动,它们交错播放。 ### 1. 添加依赖(如果需要) 确保你已经在 `pubspec.yaml` 中添加了 Flutter 的默认依赖(一般不需要额外添加)。 --- ### 2. 示例代码 ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter 交织动画')), body: InterleavedAnimation(), ), ); } } class InterleavedAnimation extends StatefulWidget { @override _InterleavedAnimationState createState() => _InterleavedAnimationState(); } class _InterleavedAnimationState extends State<InterleavedAnimation> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<Offset> _offsetAnimation1; late Animation<Offset> _offsetAnimation2; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, ); // 动画1:从左到右 _offsetAnimation1 = Tween<Offset>( begin: Offset(-1.0, 0.0), end: Offset(1.0, 0.0), ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut)); // 动画2:从上到下 _offsetAnimation2 = Tween<Offset>( begin: Offset(0.0, -1.0), end: Offset(0.0, 1.0), ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut)); // 启动动画 _controller.forward(); // 设置动画完成后重复 _controller.addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } else if (status == AnimationStatus.dismissed) { _controller.forward(); } }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Center( child: Stack( children: [ // 第一个动画:水平移动 SlideTransition( position: _offsetAnimation1, child: Container( width: 100, height: 100, color: Colors.blue, ), ), // 第二个动画:垂直移动 SlideTransition( position: _offsetAnimation2, child: Container( width: 100, height: 100, color: Colors.red, ), ), ], ), ); } } ``` --- ## 🎯 说明 - 使用了 `SlideTransition` 来实现位移动画。 - `CurvedAnimation` 控制动画曲线(如 `Curves.easeInOut`)。 - `_controller.forward()` 启动动画,`_controller.reverse()` 反向播放。 - 通过 `addStatusListener` 实现动画循环效果。 --- ## 💡 进阶:自定义交织逻辑 如果你想让动画按特定顺序执行(比如先一个,再另一个),可以使用 `AnimationController` 的 `forward()` 和 `reverse()` 方法结合 `Duration` 来控制。 例如: ```dart _controller.forward(from: 0.0); Future.delayed(Duration(milliseconds: 500), () { _controller.forward(from: 0.5); }); ``` --- 如果你有具体想实现的动画效果(比如按钮点击后多个元素依次出现、文字逐字显示等),欢迎告诉我,我可以帮你定制代码!
上一篇:
Flutter自定义路由切换动画
标题录入,一次不能超过6条
留言
评论