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();
}
}

这当然只适用于图像。。。而只有静态的。但这可能正是你所需要的。