search

bdlukaa / fluent_ui

Implements Microsoft's WinUI3 in Flutter.
https://bdlukaa.github.io/fluent_ui/
BSD 3-Clause "New" or "Revised" License
2.91k stars 453 forks source link

🐛 Weird animation in NavigationView #540

Open bernaferrari opened 2 years ago

bernaferrari commented 2 years ago

One of the animations is not disappearing.

https://user-images.githubusercontent.com/351125/191164804-9f1e4c49-3fe5-416a-b6f0-a662b3bde66f.mov

WinXaito commented 2 years ago

I'm not sure to understand the problem ? Is the sticky animation the problem ? Seems ok to me.

bernaferrari commented 2 years ago

The animation should disappear animating (like, reducing height to zero), not "jump" when disappearing. On windows it doesn't jump.

bdlukaa commented 2 years ago

Can you try on the official WinUI 3 Gallery app? To my eyes, the animation is similar

bernaferrari commented 2 years ago

Here it goes in slow motion:

https://user-images.githubusercontent.com/351125/192128401-51073f5e-56b1-4adf-bf5a-00ac8a8ba7a0.mp4

Pololot64 commented 1 year ago

I believe that the WinUI 3 Gallery app has a bug :/ because the animation looks different everywhere else

NafissaBHJ commented 1 year ago

The animation appear for me too, in a test app I'm building. The line transition between items is slow

TheMR-777 commented 1 year ago

Can you try on the official WinUI 3 Gallery app? To my eyes, the animation is similar

I believe it's fixed in the newer version of WinUI 3 Gallery (one with updated icon).

https://user-images.githubusercontent.com/98909696/230472692-198cbe4b-a1ba-48c2-b655-0ca004f240c5.mp4

If fixed in fluent_ui package, it'd really seem very sleek, and elegant looking.

robkri commented 1 year ago

TWinUI 3 Gallery (2.0.0.0) shows two different animations when switching between items in a NavigationView. One for items that have the same "logical" level: WinUI_ListView_Animation_Same_Level

And another one for items that have different levels: WinUI_ListView_Animation_Different_Levels To be more precise: Date & Time is on the parent level, whereas DataGrid is on the child level.

To make it even more confusing, ListView uses an entirely different animation: WinUI_ListView_Animation

Personally, I think either one is just fine and I don't see a benefit in having different animations for these slightly different scenarios. Actually I'm wondering if this was even done on purpose...

Pololot64 commented 1 year ago

I think the two different animations make sense. The ListView does not lead to or suggest any up/down movement in the ui and emphasizes selection more.

robkri commented 1 year ago

What do you mean by "up/down movement in the ui"?

Pololot64 commented 1 year ago

The navigation view changing the main body page content. Like the current windows settings page. The pages slide in upwards.

robkri commented 1 year ago

I see.

Just for argument's sake: To me this explanation feels a little far fetched, as I think I remember seeing the page also "zoom in" on changing. But I might misremember this.

Also, the page always slides in upwards, whereas the animation's direction depends on whether you move your selection upwards or downwards. But maybe you're right and that was the intention behind the different designs.

Still: More of a hassle when recreating these widgets. ; )

Pololot64 commented 1 year ago

It is true.. All these design guidelines change so much as well

bernaferrari commented 1 year ago

Probably the listView one is when you don't know if the last one is up/down, since the list might be infinite. The other one is very limited, so it is easy to cache it came from up/down.