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
165.7k stars 27.36k forks source link

Raster Thread Animation #124096

Closed JsouLiang closed 1 year ago

JsouLiang commented 1 year ago

If we can design way for some animations to be executed on the Raster thread. In Chromium, we can make Opacity animation, transform animation they can run animation on the Raster thread that mean they don't block the UI thread when the animation calculate the interpolation value. In iOS, we also can define CAAnimation , by CAAnimation we can define some animation properties that will send to the raster thread and don't block the UI thread. In Android, the animation can run in RenderThread also mean don't block the UI thread. In Flutter, we should provide a mechanism for animations to run without blocking the UI thread @chinmaygarde @jonahwilliams

jonahwilliams commented 1 year ago

What work that's being performed on the UI thread do you want to offload to the UI thread? Interpolating an opacity value is trivially cheap.

jonahwilliams commented 1 year ago

Ultimately the UI and raster threads work cooperatively. If some work is too expensive to do on the UI thread, moving it to the raster thread will just move where the blocking occurs. If this was causing jank before, it will cause jank after.

darshankawar commented 1 year ago

@JsouLiang Looks like similar to https://github.com/flutter/flutter/issues/110063 you filed for which the common feedback was to provide a code sample that'll be helpful for the team to address it properly, so please provide one.

ajihyf commented 1 year ago

Yes, we have many ways to optimize the UI thread and reduce its load. However, on the one hand, optimization requires a certain amount of effort and time, and in some scenarios, UI design might be used to cover up the issue; on the other hand, some UI thread-blocking tasks can be difficult to predict and avoid (e.g., GC pauses, page transitions).

Front-end developers often use CSS animations during long CPU tasks (such as rendering complex React components) without worrying about the animation itself being choppy. Of course, JavaScript cannot respond to events during these few frames, but the impact of a few frames of unresponsiveness on user experience is significantly less than that of a few frames of animation stutter.

Although Android does not directly expose Render Thread animations (RenderNodeAnimator) to developers, they are extensively used in System UI. For example, Material Design's Ripple animation, animated drawable redrawing, and transitions between activities (to be precise, these are compositor animations, but at least they are not driven by the UI thread).

As a high-performance framework targeting the system UI, I think Flutter should provide a similar, more stable animation driving method.

github-actions[bot] commented 1 year ago

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones. Thanks for your contribution.

github-actions[bot] commented 1 year 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.