如何让AnimatedSwitcher实现平滑过渡？

Question

淡入淡出导致图像闪烁。我希望一张图像在另一张图像淡出之前完全淡入，这样至少有一张图像始终具有完全不透明度。目前看起来似乎switchInCurve和switchOutCurve没有同步。 我已经按照以下方式设置了动画切换器：

AnimatedSwitcher(
      switchInCurve: Interval(0.0, 0.5, curve:Curves.linear ) ,
      switchOutCurve: Interval(0.5, 1.0, curve:Curves.linear ) ,
      duration: const Duration(milliseconds: 2000),
      child: sleepingBearImage,
),

- fideldonson

---

如果您分享一些视频或更详细地阐述问题，那会非常有帮助。 - Sanket Vekariya

为什么不使用AnimatedCrossFade呢？ - Jim

AnimatedCrossFade 显示相同的行为，即第一张图像在第二张图像完全不透明之前闪烁消失。 - fideldonson

Answer 1

当涉及到图片和AnimatedSwitcher时，解决方案是预加载您第一次使用的所有图像，请记得在小部件加载时执行此操作：didChangeDependencies()。

例如：

  @override
  void didChangeDependencies() {
    precacheImage(AssetImage("assets/images/on-00.png"), context);
    precacheImage(AssetImage("assets/images/on-01.png"), context);
    super.didChangeDependencies();
  }

- Vitaliy A