Flutter 绘制深入浅出：自定义绘制三剑客之动画篇

2023-09-07 17:34:33

在 Flutter 中探索自定义绘制的奇妙世界，此次我们将目光投向动画，揭开路径和动画之间天然联系的秘密。

引言

绘画是动画的灵魂，动画是绘画的延伸。Flutter 中的自定义绘制也不例外，通过路径度量和路径正切的巧妙结合，绘制与动画联袂演绎出一场视觉盛宴。

路径度量：丈量绘制轨迹

路径度量就像绘制过程中的导航仪，它精确记录了路径上的每一步，指引着动画沿着预定的轨道前进。Flutter 中提供了 PathMetrics 类，可将路径拆解成一系列的 PathMetric 对象，每一个 PathMetric 都包含了路径上某一段的长度和切线信息。

路径正切：捕捉运动方向

路径正切就像指南针，始终指向路径上某一点的运动方向。在动画中，路径正切扮演着至关重要的角色，它决定了动画在路径上移动的方向和速度。通过获取路径正切，我们可以让动画沿着路径平滑而流畅地运动。

路径动画：动态绘制的艺术

当路径度量和路径正切联手，路径动画便应运而生。Flutter 中的沿路径动画（PathFollower）就是基于此原理，它根据路径度量和路径正切的信息，驱动动画在路径上运动。我们可以通过控制动画沿着路径移动的速度和方向，创造出千变万化的动画效果。

实战：自定义绘制路径动画

为了深入理解路径动画的奥秘，我们以一个实际案例为例，绘制一个沿着路径运动的小球。

代码实现：

import 'dart:math' as math;

import 'package:flutter/material.dart';

class PathAnimation extends StatefulWidget {
  @override
  _PathAnimationState createState() => _PathAnimationState();
}

class _PathAnimationState extends State<PathAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _progress;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
        vsync: this, duration: Duration(milliseconds: 2000));
    _progress = Tween(begin: 0.0, end: 1.0).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: PathPainter(_progress),
    );
  }
}

class PathPainter extends CustomPainter {
  Animation<double> progress;

  PathPainter(this.progress);

  @override
  void paint(Canvas canvas, Size size) {
    Path path = Path()
      ..moveTo(size.width / 2, size.height / 2)
      ..quadraticBezierTo(size.width / 4, size.height / 4,
          size.width / 2, size.height / 2)
      ..quadraticBezierTo(size.width / 4 * 3, size.height / 4 * 3,
          size.width / 2, size.height / 2);

    PathMetric pathMetric = path.computeMetrics().first;

    double distance = pathMetric.length * progress.value;
    Tangent tangent = pathMetric.getTangentForOffset(distance);

    canvas.drawCircle(tangent.position, 10, Paint());
  }

  @override
  bool shouldRepaint(PathPainter oldDelegate) => true;
}