9

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?

Sahaj Rana
  • 1,993
  • 4
  • 25
  • 42
  • 1
    This is actually a very great question, since motion blur could make any animation smoother, and give it more 'ios look'. I'll follow your question. – emvaized Apr 27 '20 at 20:41

1 Answers1

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.

MindStudio
  • 706
  • 1
  • 4
  • 13
  • Hi @MindStudio, I appreciate you giving it a try. From what I see this would not be the right approach to solve this problem. If you could put a `BackdropFilter` over the image/widget without using a pre-static blur image to replace it that should solve the problem. Tip: if you increase `BackdropFilter`'s sigma value of X more than Y or something similar, it would come way close to actual motion blur. – Sahaj Rana Mar 25 '22 at 15:03