Flutter 初学者实战指南：使用 Animation 构建爱心三连动画

2024-02-17 12:47:22

用 Flutter 的 Animation 和 AnimationController 构建交互式动画

在 Flutter 的世界里，动画是赋予用户界面生机和吸引力的秘诀。通过利用 Flutter 的强大动画系统，开发人员可以创造出流畅、响应迅速且令人愉悦的用户体验。本文将深入探讨 Flutter 中的 Animation 和 AnimationController 类，并逐步指导你构建一个交互式爱心三连动画，从而提升你的 UI 交互技能。

理解 Animation 和 AnimationController

Animation 类是 Flutter 动画的基础，它表示动画的当前状态，包括其值、进度和当前时间。AnimationController 则是控制动画播放的控制器，允许开发人员启动、停止、重置和反转动画。

打造爱心三连动画

1. 创建 CustomPaint 组件

首先，创建一个 CustomPaint 组件，它将负责绘制爱心。

class LoveIcon extends CustomPaint {
  LoveIcon({required this.isFilled});

  final bool isFilled;

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制爱心形状
  }
}

2. 创建 Animation

接下来，创建 Animation 对象，它将控制爱心形状的填充度。

final loveAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(loveController);

3. 创建 AnimationController

AnimationController 负责控制动画的播放。

final loveController = AnimationController(
  duration: const Duration(milliseconds: 300),
  vsync: vsync,
);

4. 处理用户交互

当用户点击爱心时，我们将触发动画的播放。

GestureDetector(
  onTap: () {
    loveController.forward();
  },
  child: LoveIcon(isFilled: loveAnimation.value == 1.0),
);

5. 添加第二个和第三个爱心

为了创建爱心三连效果，我们将重复上述步骤，创建第二个和第三个爱心。

示例代码

// 创建 CustomPaint 组件
class LoveIcon extends CustomPaint {
  LoveIcon({required this.isFilled});

  final bool isFilled;

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制爱心形状
    var path = Path();
    path.moveTo(size.width / 2, size.height / 2);
    path.quadraticBezierTo(size.width / 2 - size.width / 4, size.height / 2 - size.height / 4, 0, size.height);
    path.quadraticBezierTo(size.width / 4, size.height + size.height / 4, size.width / 2, size.height);
    path.quadraticBezierTo(size.width / 2 + size.width / 4, size.height + size.height / 4, size.width, size.height);
    path.quadraticBezierTo(size.width - size.width / 4, size.height / 2 - size.height / 4, size.width / 2, size.height / 2);
    path.close();

    var paint = Paint()..color = Colors.red;
    if (isFilled) {
      paint.style = PaintingStyle.fill;
    } else {
      paint.style = PaintingStyle.stroke;
      paint.strokeWidth = 2.0;
    }
    canvas.drawPath(path, paint);
  }
}

// 创建 Animation
final loveAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(loveController);

// 创建 AnimationController
final loveController = AnimationController(
  duration: const Duration(milliseconds: 300),
  vsync: vsync,
);

// 处理用户交互
GestureDetector(
  onTap: () {
    loveController.forward();
  },
  child: LoveIcon(isFilled: loveAnimation.value == 1.0),
);