Motion blur in Flutter?

Question

I have been using Google Flutter for a recent project. And was wondering if we can apply motion blur in the widget animation. It just makes animations more realistic and soothing. I couldn't find any resources available regarding this.

Has anyone given it a try?

Answer 1

I just gave it a try myself. After finding nothing on the internet about this I came up with my own approach.

I have a spinning Image widget that has sharp edges and thus looks a bit ugly while rotating. I use a RotationTransition widget to animate its rotation.

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

As A child I put a Stack widget containing two FadeTransition widgets that each contain two Versions of the image. One is the default Image and one has the motion blur already applied to (in 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",
            ),
          ),
        ],
      ),

Then I just created a custom Curve that changes the opacity in relation to the speed of the rotation.

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

This of course only applies for images... and only static ones. But it might be exactly what you need.