如何使用 Flare 动画作为带有淡入动画的图像占位符

Posted 2023-02-23

【中文标题】如何使用 Flare 动画作为带有淡入动画的图像占位符

【英文标题】：How to Use Flare Animation as Image Placeholder with Fade-In Animation

【发布时间】：2020-10-19 18:27:45

【问题描述】：

我试图在从网络加载图像时显示图像占位符，并将占位符替换为带有淡入动画的实际图像。当我使用资产中的简单 png 图像时，这可以正常工作。 以下是现有代码：

FadeInImage(placeholder: AssetImage('assets/one.png'),
          image: NetworkImage(product.imageUrl),
          fit: BoxFit.cover,)

现在我想加载一个耀斑动画作为图像占位符。我使用 FlareActor 来显示耀斑动画，但 FlareActor 是 FadeInImage 中的小部件和占位符，需要 ImageProvider。 有什么方法可以将耀斑动画加载为图像占位符并将其替换为带有淡入动画的实际图像。

以下是加载简单耀斑动画的代码：

FlareActor("assets/images/image_placeholder.flr", 
               animation: "Untitled",)

谢谢

【参考方案1】：

你可以通过这样做来实现你想要的

Stack(
      children: <Widget>[
        AnimatedOpacity(
          opacity: showImage ? 0.0: 1.0,
          child: FlareActor("assets/images/image_placeholder.flr",
            animation: "Untitled"),
        ),
        AnimatedOpacity(
          opacity : showImage ? 1.0: 0.0,
          child: Image(
            image: NetworkImage(product.imageUrl),
            fit: BoxFit.cover,
            frameBuilder: (BuildContext context, Widget child, int frame,
                bool wasSynchronouslyLoaded) 
              if (wasSynchronouslyLoaded) return child;
              if (frame != null) 
                showImage = true;
              
              return child;
            ,
          ),
        )]

【讨论】：

那个解决方案对我来说不太奏效。当您在 frameBuilder 中更改“showImage”时，Stack 的两个小部件的不透明度将不会更改，因为该小部件不会重建。顺便说一句，感谢您为我指出使用 frameBuilder 的正确方向。我在 frameBuilder 中使用了两个小部件的堆栈来获得所需的结果。

但是我们不能在构建函数中使用 setState。我已经尝试过，但它抛出了“setState() 或 markNeedsBuild() 在构建期间调用”的异常。它正在创建一个无限循环。

【参考方案2】：

花了一些时间后，我用 Stack 和 Image frameBuilder 解决了这个问题。

以下是代码：

Image.network(
          product.imageUrl,
          fit: BoxFit.cover,
          frameBuilder: (ctx, child, frame, wasSynchronouslyLoaded) 
            if (wasSynchronouslyLoaded) return child;

            return Stack(children: <Widget>[
              AnimatedOpacity(
                opacity: frame == null ? 1 : 0,
                duration: Duration(seconds: 1),
                child: frame == null
                    ? FlareActor(
                        "assets/animations/image_placeholder.flr",
                        animation: "Untitled",
                      )
                    : null,
              ),
              AnimatedOpacity(
                  opacity: frame == null ? 0 : 1,
                  duration: Duration(seconds: 1),
                  child: frame != null ? child : null),
            ]);
          ,
        ),