Flutter 交织动画

封面图 • 2025-11-05 • Flutter

在 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);
});
```

---

如果你有具体想实现的动画效果（比如按钮点击后多个元素依次出现、文字逐字显示等），欢迎告诉我，我可以帮你定制代码！