Flutter中的运动模糊？

Question

Flutter中的运动模糊？

flutteranimationflutter-layoutflutter-animationmotion-blur

9

我最近在使用Google Flutter进行一个项目，想知道是否可以在小部件动画中应用运动模糊。这可以使动画更加逼真和舒缓。我没有找到任何相关的资源。

有人尝试过吗？

- Sahaj Rana

2

这实际上是一个非常好的问题，因为动态模糊可以使任何动画更加流畅，并赋予其更多的“iOS外观”。我会关注你的问题。 - emvaized

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MindStudio · Accepted Answer

我刚刚尝试了一下。在互联网上找不到相关信息后，我想出了自己的方法。

我有一个旋转图像小部件，由于其锐利的边缘而在旋转时看起来有点丑陋。我使用“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();
  }
}

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