Flutter 中的运动模糊？

Question

我最近在一个项目中使用了 Google Flutter。并且想知道我们是否可以在小部件动画中应用运动模糊。它只是使动画更加逼真和舒缓。我找不到任何可用的资源。

有没有人试过？

Answer 1

我只是自己尝试了一下。在互联网上找不到任何相关内容后，我想出了自己的方法。

我有一个旋转的图像小部件，它具有锐利的边缘，因此在旋转时看起来有点难看。我使用一个RotationTransition小部件来为其旋转设置动画。

RotationTransition(
      turns: Tween(begin: 1.0, end: 0.0).animate(
        CurvedAnimation(
          parent: animationController,
          curve: Curves.easeInOutQuad,
        ),
      ),
      child: ...,
),

作为一个孩子，我放置了一个 Stack 小部件，其中包含两个FadeTransition小部件，每个小部件包含图像的两个版本。一张是默认图像，一张已应用运动模糊（在 Photoshop 中）。

Stack(
        children: [
          FadeTransition(
            opacity: Tween(begin: 1.0, end: 0.0).animate(
              CurvedAnimation(parent: animationController, curve: const FadeCurve(),
              ),
            ),
            child: Image.asset(
              "assets/images/image.png",
            ),
          ),
          FadeTransition(
            opacity: Tween(begin: 0.0, end: 1.0).animate(
              CurvedAnimation(parent: animationController, curve: const FadeCurve(),
              ),
            ),
            child: Image.asset(
              "assets/images/image_withMB.png",
            ),
          ),
        ],
      ),

然后我刚刚创建了一个自定义Curve，可以改变与旋转速度相关的不透明度。

class FadeCurve extends Curve {
  const FadeCurve();
  @override
  double transform(double t) {
    if (t <= 0.5) return pow(2 * t, 2).toDouble();
    return pow(2 - 2 * t, 2).toDouble();
  }
}

当然，这仅适用于图像......并且仅适用于静态图像。但这可能正是您所需要的。