search

flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
164.21k stars 27.09k forks source link

Motion Blur Animation When Scrolling, Rotating, Scaling Widgets #55842

Closed SahajRana closed 2 weeks ago

SahajRana commented 4 years ago

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. Like animations done in Framer.

Do you guys have suggestions on how to achieve this?

TahaTesser commented 4 years ago

Hi @SahajRana Do you think you need this motion blur in a listview r when you're scrolling? Maybe it could be using ScrollPhysics api Thank you

SahajRana commented 4 years ago

Hi @TahaTesser, thanks for the reply. I'm hoping to use it for simple animations as well like rotation, move, scale, etc. Is there any resource for it. CodePen has some example for it Codepen1, Codepen2

p4-k4 commented 2 years ago

I'm surprised to have really only found @SahajRana's post of this subject, with pretty much no attention.

Motion blurred animations can give us creative freedom whilst also being able to provide a drastically enhanced user experience, in particular with fast moving animations.

My guess is that implementation needs to happen on the Engine itself (whether or not it's even possible currently) but then they might as well start building out a 2.5D camera while they're at it. That way it'd be possible for physics based lighting (thus shadows) and camera control. If we can manipulate exposure, we can manipulate shutter angle for motion blur or aperture for depth of field etc but now we're heading into Unreal Engine and Unity territory.

Might be a bit optimistic at this stage.

ercantomac commented 2 years ago

This subject needs more attention. We definitely need it. I think it could be done via shaders.

jonahwilliams commented 2 weeks ago

2D motion blur effects can be added via the existing gaussian blur filter, just blur in a single direction and rotate/transform the blur to match the vector of movement.

github-actions[bot] commented 2 days ago

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.