如何在 flutter 中测试动画？

Question

我没有找到任何信息，但查看 flutter 代码，我认为它与黄金测试中的 AnimationSheetBuilder 一起使用。

这是正确的方法吗？或者还有其他方法来测试动画吗？

谢谢你

就像这里

  testWidgets('Material3 - Indeterminate CircularProgressIndicator uses expected animation', (WidgetTester tester) async {
    final AnimationSheetBuilder animationSheet = AnimationSheetBuilder(frameSize: const Size(40, 40));
    addTearDown(animationSheet.dispose);

    await tester.pumpFrames(animationSheet.record(
      Theme(
        data: ThemeData(useMaterial3: true),
        child: const Directionality(
          textDirection: TextDirection.ltr,
          child: Padding(
            padding: EdgeInsets.all(4),
            child: CircularProgressIndicator(),
          ),
        ),
      ),
    ), const Duration(seconds: 2));

    await expectLater(
      animationSheet.collate(20),
      matchesGoldenFile('m3_material.circular_progress_indicator.indeterminate.png'),
    );
  }, skip: isBrowser); // https://github.com/flutter/flutter/issues/56001

黄金测试的结果就是图像。

生成金色测试图像

谢谢

Answer 1

黄金测试是验证动画各方面是否正常工作的唯一实用方法。动画是视觉的，因此必须被看到才能被验证。

您可以尝试使用

paints

来验证屏幕上绘制的形状，但我想即使使用基本的动画来做到这一点也会很困难或不可能。

根据动画的设置方式以及您在测试中可以访问的对象，您可以验证对象及其参数，而不是实际的动画。例如，如果您使用 Flutter 中的内置小部件（如 AnimatedContainer），您可以使用 WidgetTester 来查找该小部件并检查它是否具有您期望的参数。如果您创建自定义动画并且您的测试可以访问 UI 使用的动画对象，您可以直接测试该动画对象以确保它提供正确的值。

我提到这一点是为了完整性，但不会推荐它。这取决于您的具体实现，以及您对动画工作的确定程度。如果你花精力这样做，你不妨做一个黄金测试，这样更容易，并且实际上验证了动画本身。

关于黄金测试需要了解的一件重要事情是，如果您与其他开发人员一起开发项目，它们可能会导致问题。黄金图像可以根据平台进行不同的渲染，因此为了避免测试不稳定，您需要有一个专用的服务器来构建黄金图像。

如果您想感受一下 AnimationSheetBuilder 的动画效果，这里是您提到的同一个 Flutter 测试的黄金图像。单个像素渲染不正确，这个黄金测试将捕获它。

https://flutter-gold.skia.org/search?corpus=flutter&include_ignored=false&left_filter=name%3Dmaterial.m3_material.circular_progress_indicator.inminated&max_rgba=0&min_rgba=0&阴性=true¬_at_head=false&positive=true&reference_image_required=false&right_filter=&sort=降序&未分类=是的