颤振 - 动画切换器不流畅

Question

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

这是动画的代码：

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

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

Answer 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.中添加的依赖项

Answer 2

我认为precheckImage会对您有所帮助。https://api.flutter.dev/flutter/widgets/precacheImage.html

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