Flutter动画基本结构及状态监听

封面图 • 2025-11-05 • Flutter

在 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` 动画，也可以继续问我！