我已经学习了 flutter.io 上的各种动画教程(补间、交错、过渡等)，它们都很棒。

我想探索的是如何根据 UI 对象的组成实际制作自定义动画。

让我们举一个简单的例子，暂停 -> 播放动画。

起初我们有一个暂停图标，两个垂直条。

假设我想

1. 通过在最右边的垂直边的中心添加一个额外的角并将其向右移动，将右边的条变成三角形。
2. 之后将该三角形从步骤 1 稍微向左移动，因此它现在粘在最左边的垂直条上，变成一个更大的“三角形”(实际上是一个五边形)。

这看起来像一个播放按钮，而不是暂停按钮。

我将如何实现那种自定义动画？我假设我不能使用图标类。而且我很确定我不应该对小部件这样做，而只是移动它们。

我应该从哪里开始探索动画的这种精确性？

最佳答案

@Alaric 的回答为您指出了几个包，但并没有真正说明您为什么要使用它们。

手头的问题是，就其实际工作方式而言，您所谈论的动画相当复杂。有多个项目会随着时间的推移而变化，甚至可能变成一个更大的项目。

您可以采用两种方法来解决此问题。第一种是使用外部动画工具来创建此动画，使用动画工具必须执行项目更改和合并的任何功能。然后，一旦您的动画效果令您满意，您就必须以某种方式将其导入到您的项目中。这就是 fluttie 和 flare_flutter 插件的用武之地——如果您使用 Aftereffects，您可以使用 Lottie 导出文件，然后使用 fluttie 插件来显示它。 Flare 稍微简单一些，因为它是用于 flutter 的，但您仍然在外部创建动画，然后将文件添加到您的 Assets 中以进行渲染。

另一种方法是自己制作动画。这需要三件事:

1. 创建一个小部件以包含动画。
2. 创建一个 CustomPainter 来实际绘制结果。
3. 可选地，另一个类充当 Controller 来启动/停止/等等动画。

如果您使用 GlobalKey 访问它并公开启动/停止方法，则包含动画的小部件也可能是 Controller ，但这有点困惑。最好有一个外部对象作为 Controller - 您甚至可以按原样使用 AnimationController，尽管它会不那么“干净”。

如果您不传入它，您的小部件中可能会有一个 AnimationController，您可以从 Controller 或类开始和停止它。它基本上只是从 0 到 1 并返回，并将负责重建 CustomPainter(可能使用 AnimatedBuilder)。

这是一个非常基本的示例，不需要外部 Controller ，因为手势检测发生在小部件内。请注意，我并不是在每次设置“started”成员时都调用 setState，因为我实际上不希望它在更改时重建。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: StartStop(),
        ),
      ),
    );
  }
}

class StartStop extends StatefulWidget {
  @override
  StartStopState createState() {
    return new StartStopState();
  }
}

class StartStopState extends State<StartStop> with TickerProviderStateMixin<StartStop> {
  bool started = false;

  AnimationController animationController;

  @override
  void initState() {
    animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        started ? animationController.forward() : animationController.reverse();
        started = !started;
      },
      child: SizedBox(
        width: 100,
        height: 100,
        child: AnimatedBuilder(
          animation: animationController,
          builder: (context, child) {
            return CustomPaint(
              painter: StartStopPainter(animationController.value),
              size: Size.infinite,
              child: child,
            );
          },
        ),
      ),
    );
  }
}

class StartStopPainter extends CustomPainter {
  final double percentAnimated;

  StartStopPainter(this.percentAnimated) : assert(percentAnimated >= 0 && percentAnimated <= 1);

  @override
  void paint(Canvas canvas, Size size) {
    var pausePaint = Paint()..color = Colors.black.withOpacity(1 - percentAnimated);

    canvas.drawRect(Rect.fromLTRB(20, 10, 40, 90), pausePaint);
    canvas.drawRect(Rect.fromLTRB(60, 10, 80, 90), pausePaint);

    var playPaint = Paint()..color = Colors.black.withOpacity(percentAnimated);

    canvas.drawPath(Path()..addPolygon([Offset(20, 10), Offset(20, 90), Offset(80, 50)], true), playPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

我将把动画的实际自定义部分(您将矩形更改为三角形等)留给您。您无需使用不透明度和一些不同的绘画调用，只需使用输入 percentAnimated 来决定要绘制的路径或多边形。

关于animation - 在 flutter 中创建非常自定义的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53854589/