Flutter - AnimatedSwitcher 不流畅答案

【问题标题】：Flutter - AnimatedSwitcher isn't smoothFlutter - AnimatedSwitcher 不流畅
【发布时间】：2021-11-11 08:33:29
【问题描述】：

我已经实现了一个图像动画，我想做的是创建一个自定义的圆形微调器，其中的图像可以切换以产生这种效果，问题是使用 AnimatedSwitcher 在一小部分时间内会有一个黑色空间图像和另一个。

这是动画的代码：

AnimatedSwitcher(
    duration: Duration(milliseconds: 200),
    child: Image.asset(
        values[_index % values.length],
        key: UniqueKey(),
        height: 50,
        width: 50,
    ),
)

有没有办法解决这个问题或 AnimatedSwitcher 的替代方案？

【问题讨论】：

您在构建带有--release 标志的应用程序时是否尝试过这个？或者你只是在模拟器中尝试？
我在真机上试过了，效果一样
是否真的设备并不重要，你是用--release标签构建的吗？
谢谢，现在我试过了，但不幸的是我得到了同样的结果

标签： flutter flutter-animation

【解决方案1】：

第二张图片可能需要一些时间才能加载到内存中。我之前遇到过类似的问题，但通过解决方法解决了它。我在上一张图片的顶部使用了带有透明占位符的FadeInImage：

import 'package:transparent_image/transparent_image.dart';

Stack(
  children: [
    Image(
      image: previousImage,
    ),
    FadeInImage(
      fadeInDuration: Duration(milliseconds: 300),
      placeholder: MemoryImage(kTransparentImage),
      image: currentImage,
    )
  ],
),

transparent_image 是我在 pubspec.yaml 中添加的依赖项。

【讨论】：

这种方法可以使用多张图片吗？因为我有 9 张图片的序列
我会考虑通过previousImage和currentImage的状态更新。不过，您需要自己管理它
我会试试的，谢谢

【解决方案2】：

我认为 precacheImage 会帮助你。 https://api.flutter.dev/flutter/widgets/precacheImage.html

我写了一个和你一样的函数，但我没有得到图像之间的黑色空间。但是如果我不设置图像的关键，那么我会得到一个黑色的空间。

【讨论】：