[rotation_distortion] Use "delayed swap" solution to reduce rotation distortion

[hellohuanlin]

The "size interpolation" solution didn't go well (more context here). Then a new solution came to my mind, and I call it "delayed swap":

In the originally behavior, we swap the width/height immediately before the rotation, resulting in roughly ~4x distortion in the beginning. With "delayed swap" solution, we swap the width/height right in the middle of the rotation (i.e. delay the swap for half of the transition duration).

This new "delayed swap" solution gives us the same benefit as the "snapshot" solution:

• reducing ~4x distortion to ~2x
• most distorted frames occur in the middle of rotation when it's moving the fastest, making it hard to notice

And it fixes the drawback of "snapshot" solution:

• it works well with dynamic content like animation or video
• it doesn't have a ~0.5 second penalty when taking the snapshot

Looks pretty good on flutter gallery:

delayed.swap.mp4

List which issues are fixed by this PR. You must list at least one issue.

Fixes flutter/flutter#16322

If you had to change anything in the flutter/tests repo, include a link to the migration guide as per the breaking change policy.

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read and followed the Flutter Style Guide and the C++, Objective-C, Java style guides.
• I listed at least one issue that this PR fixes in the description above.
• I added new tests to check the change I am making or feature I am adding, or Hixie said the PR is test-exempt. See testing the engine for instructions on writing and running engine tests.
• I updated/added relevant documentation (doc comments with ///).
• I signed the CLA.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

[dnfield]

This LGTM but would appreciate a look from one of the other reviewers who is more famliar/active with Objective C :)

[dnfield]

I think this is an improvement but there's still a pretty big jump in the middle.

What does this look like on a larger screen like the iPad pro?

[hellohuanlin]

I think this is an improvement but there's still a pretty big jump in the middle.

What does this look like on a larger screen like the iPad pro?

Yeah the ugly part is in the middle. Though when I try it on real device, it's almost unnoticeable, since it's moving. The iPad actually looks better due to closer width : height ratio.

[cyanglaz]

A crazy idea: is it possible to substitute a screenshot at the middle to avoid the "jump"?

[hellohuanlin]

A crazy idea: is it possible to substitute a screenshot at the middle to avoid the "jump"?

Not sure what kind of screenshot can make it better (before or after the rotation?). We could fade in and out a white screen in the middle though, but that makes it even more noticeable.

Note that screenshot takes ~0.5-0.6 seconds, which is longer than the rotation duration (~0.4 seconds). So the only choice for screenshot is before the rotation happens.

[jmagman]

There's examples of this https://github.com/flutter/engine/pull/37719/files#diff-9df3e6878a0f23383e1f2de991386935e435c5b77c863de75bd67a4ced38591dR200

See also our conversation in https://github.com/flutter/engine/pull/37719/files#r1046581397

I think you should try to use -mainScreenIfViewLoaded here instead of leaving the TODO, I don't particularly want to add more deprecated API usage, and it probably should be guarded with an ifLoaded.

[hellohuanlin]

Nice! I did not think about just partial mocking mainScreenIfViewLoaded

[jmagman]

I think you need to rebase onto #40732.

[flutter-dashboard]

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

Changes reported for pull request #40730 at sha f08fc61

[jmagman]

@hellohuanlin I'm not sure why there's a canvaskit_text_styles_text_style_half_leading_overrides_paragraph_style_half_leading golden change on this PR. You can file an issue but don't let it block you. Either push an empty commit or manually merge.

[hellohuanlin]

@jmagman I'm curious to learn how did you navigate this website? I have logged in and didn't find anything.

[jmagman]

@jmagman I'm curious to learn how did you navigate this website? I have logged in and didn't find anything.

I'm in no way the expert, but I checked "Digests: Positive" at the top:

I couldn't find a good description of how to use the Skia Gold client UI, just https://github.com/flutter/flutter/wiki/Writing-a-golden-file-test-for-package%3Aflutter

[auto-submit]

auto label is removed for flutter/engine, pr: 40730, due to - The status or check suite Linux linux_android_aot_engine has failed. Please fix the issues identified (or deflake) before re-applying this label.

[FaisalMohammadi]

i have this issue in my app right now in flutter 3.10.5 can anybody tell how di i delay the swap

[hellohuanlin]

@FaisalMohammadi it should already be enabled in the latest release. It's not perfectly smooth, but significantly better than the previous behavior.

[FaisalMohammadi]

Ok perfect, you mean then in flutter 3.13, because now i have 3.10.5 and i see huge streching in my widgets.

[FaisalMohammadi]

I have updated the flutter sdk to the latest 3.13.2 and i am still facing this issue. like in this video i recorded

i have also tested in real device its the same

rotation-distortion.mp4

[hellohuanlin]

@FaisalMohammadi this seems like frame drop issue. are you doing anything heavy? Can you try it on an older version before this is landed, so we can compare?

[FaisalMohammadi]

you mean in a older simulator?
the widget tree for that specific widget looks like this

i am using offstage to show bottom navigation bar persistantly in every page so when i call my widget directly from main and not having bottom navigation bar and the other stuff as shown in the widget tree, then the result is a bit faster.

[hellohuanlin]

@FaisalMohammadi I meant older Flutter version when this PR is not landed.