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

Question

我试图在从网络加载图像时显示图像占位符，并将占位符替换为带有淡入动画的实际图像。当我使用资产中的简单 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",)

谢谢

Answer 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;
            },
          ),
        )]

Answer 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),
            ]);
          },
        ),

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

How to Use Flare Animation as Image Placeholder with Fade-In Animation

flutter

dart

flutter-animation

rive