[Spec] Transitions

[jsuarezruiz]

Transitions

Maui already has a complete animations API allowing you to create a live and fluid content on a page. However, what happens when navigating between pages?.

This spec defines a Maui transitions API. We have two types of well-differentiated transitions:

• Traditional transitions: Traditionally transitions between different pages involved enter and exit transitions that animated entire view hierarchies independent to each other.
• Shared element transitions: Many times, there are elements common to both activities and providing the ability to transition these shared elements separately emphasizes continuity between transitions and breaks activity boundaries as the user navigates the app.

API

Traditional transitions

For the traditional transitions, we need a new enumeration with the supported transitions:

public enum NavigationTransitionType
{
    None,
    Fade,
    Flip,
    Scale,
    SlideFromLeft,
    SlideFromRight,
    SlideFromTop,
    SlideFromBottom,
    Turnstile
}

And, include new properties in the Page to allow page transitions using NavigationPage and Shell:

• TransitionType: The transition effect used.
• TransitionDuration: The transition duration in milliseconds.

public static readonly BindableProperty TransitionTypeProperty =
     BindableProperty.Create(nameof(TransitionType), typeof(NavigationTransitionType),   typeof(NavigationPage), PageTransitionType.None,
     BindingMode.TwoWay, null);

public NavigationTransitionType TransitionType
{
    get { return (NavigationTransitionType)GetValue(TransitionTypeProperty); }
    set { SetValue(TransitionTypeProperty, value); }
}

public static readonly BindableProperty TransitionDurationProperty =
     BindableProperty.Create(nameof(TransitionDuration), typeof(double), typeof(NavigationPage), 500d,
     BindingMode.TwoWay, null);

public double TransitionDuration
{
    get { return (double)GetValue(TransitionDurationProperty); }
    set { SetValue(TransitionDurationProperty, value); }
}

Shared element transitions

On the other hand, we need a way to allow the shared element transitions. The key is a way to "link" the same item available in two different pages.

We will have the TransitionTag attached property to the supported elements inherited from View:

public static readonly BindableProperty TransitionTagProperty =    
     BindableProperty.CreateAttached("TransitionTag", typeof(int), typeof(Transition), 0,
propertyChanged: OnPropertyChanged);

The use would be:

<Image Source="xamarin.jpg" TransitionTag="logo" WidthRequest="100" />

Tag the control to transition in the source page.

<Image Source="xamarin.jpg" TransitionTag="logo" WidthRequest="300" />

And tag the control to transition in the destination page.

Scenarios

Let's see some examples.

XAML Example

A sample using transitions between pages:

<ContentPage
     TransitionType=“SlideFromBottom”
     TransitionDuration="750" />

A sample using shared transitions elements:

Page 1:

<Image  
     Source="xamagon_preview.png"
     TransitionTag="xamagon"/>

Page 2:

<Image  
     Source="xamagon.png"
     TransitionTag="xamagon"/>

Notes

• The TransitionTag in source and destination page needs to match in order to display the transition.
• You can animate multiple views at once, but every TransitionTag in a page needs to be unique.

Difficulty : Medium

[felipebaltazar]

Suggestion

Perhaps a property that receives an animation instead of an enum?
To be able to extend and receive customized animations that need to implement some ITransitionAnimation interface.
And some predefined animations to use like NamedSize on fonts

Example:

<ContentPage
     Transition=“{local:MyCustomTransition}"
     TransitionDuration="750" />

Or predefined "Named Transitions"

<ContentPage
     Transition=“Fade"
     TransitionDuration="750" />

[GiampaoloGabba]

Regarding shared transitions, please note that if you want to make a transition from a list of items (for example a Collectionview) the "TransitionTag" property could not be enough to identify the view you want to animate.

Imagine a DataTemplate with a list of items containing an image and a text, every image is different but the TransitionTag is always the same (for example: "ImageToTransition").

When you tap an element, the Navigation Renderer need to know exaclty what element need to be translated, and if you have a single tag for all your images in the CollectionView this could be a problem.

In my plugin i resolved using a TransitionGroup property wich i use to identify the element to translate.

I would like to contribute to this feature but my code for Android is not stable enough (there are problems with ChildFragments when using TabbedPages/MasterPage, but in shell i think is fine), also in iOS i sue some hacks to make good transitions shape.

I reworked a lot of code from the first version and now looks better but i dont think is good enough to go in core, but i'm ready to help and contribute if needed
https://github.com/GiampaoloGabba/Xamarin.Plugin.SharedTransitions

[GiampaoloGabba]

Btw a lot of my code could be greatly simplified if some properties can be integrated in the main core

[jsuarezruiz]

@felipebaltazar It could be something similar to the proposal to create custom transitions in TabView xamarin/Xamarin.Forms#10773 I will do some tests and after that we will review the Spec.

@GiampaoloGabba It will definitely be great to have your feedback on this API. If you want to contribute, as in Xamarin.Forms we will accept PRs and I will be happy to help you. About the parameter that you indicate for collections, I have reviewed it and you are right. Mnn, we can add an extra property to cover these cases (TransitionGroup), or perhaps internally if the parent of the element is a collection, create the group automatically.

[GiampaoloGabba]

or perhaps internally if the parent of the element is a collection, create the group automatically.

i tried this approach but it was a bit difficult. For example in a collectionview we can start a navigation based on the SelectedItem change.
It was much easier to "slap" a property for grouping and then let the user decide when and how to use it :)

Btw i'm planning to write here a small doc covering the basis architecture i used to develop this (how to track transitions and how to make it happen in iOS, because there is not native support to that and i had to develop everything by hand, while it is much easier in Android, if you exclude child fragments generated by tappedpage and MasterDetail)

Just in case there are maybe some good ideas to port here and exclude the bad ones, wich, i'm sure, will be a lot :)

[jsuarezruiz]

Sounds good @GiampaoloGabba, thanks!

[felipebaltazar]

@felipebaltazar It could be something similar to the proposal to create custom transitions in TabView xamarin/Xamarin.Forms#10773 I will do some tests and after that we will review the Spec.

Sounds good!!!!
I've done some animations on Xamarin.Forms.Skeleton repository, maybe it can help for new ideas... I don't know...

https://github.com/HorusSoftwareUY/Xamarin.Forms.Skeleton

[Inrego]

What's the status on this? It's the oldest open issue in this repo. Added to "Under consideration" about 6 months ago. Is it still under consideration?
Shared transitions like these really do help improve look and feel for an app, as well as perceived speed of the app.

[Laftek]

This should have much higher priority in my opinion.

[KSemenenko]

This can be really cool feature

[czmirek]

Is there any workaround on how to implement a traditional transition from bottom to top until this is developed?

For making a page appear from bottom to top I have to embed the page content into the parent page as a custom control and then run a custom open/close animation on it. I cannot think of anything else.

[shawyunz]

Is there any workaround on how to implement a traditional transition from bottom to top until this is developed?

For making a page appear from bottom to top I have to embed the page content into the parent page as a custom control and then run a custom open/close animation on it. I cannot think of anything else.

Try this net-maui-navigation-animation?

[South2AK]

Is there any update on this?

[bcaceiro]

Is this going to be on roadmap?

[Inrego]

Is this going to be on roadmap?

If I was a betting man, I'd put my money on "no".

[anurag-sukumaran]

Is this going to be on roadmap?

If I was a betting man, I'd put my money on "no".

That was funny, Really this transition so much required. Any workaround?

[Inrego]

I think Flutter has it

[MingK12]

it would be cool to see this going forward

[Phantom-KNA]

Really, really we need this!!!

[orwo1]

I checked and at least on Android all the page transition code is internal, and there is no way to override it
outside of having these 4 xml files in your project (suggested in #16353 (comment))
This should have been inside from day one, I can't hold on until .NET 9.0 to get this implemented.
Is Maui team going to provide us a way to do custom transitions?

[Phantom-KNA]

I checked and at least on Android all the page transition code is internal, and there is no way to override it
outside of having these 4 xml files in your project (suggested in #16353 (comment))
This should have been inside from day one, I can't hold on until .NET 9.0 to get this implemented.
Is Maui team going to provide us a way to do custom transitions

For the moment this package works fine. I tested it in net7.0 and 8.0

[Inrego]

I checked and at least on Android all the page transition code is internal, and there is no way to override it
outside of having these 4 xml files in your project (suggested in #16353 (comment))
This should have been inside from day one, I can't hold on until .NET 9.0 to get this implemented.
Is Maui team going to provide us a way to do custom transitions

For the moment this package works fine. I tested it in net7.0 and 8.0

While that looks like a cool project, it doesn't seem to offer the kind of transitions that are requested here

[orwo1]

I checked and at least on Android all the page transition code is internal, and there is no way to override it
outside of having these 4 xml files in your project (suggested in #16353 (comment))
This should have been inside from day one, I can't hold on until .NET 9.0 to get this implemented.
Is Maui team going to provide us a way to do custom transitions

For the moment this package works fine. I tested it in net7.0 and 8.0

While that looks like a cool project, it doesn't seem to offer the kind of transitions that are requested here

@Phantom-KNA While it looks nice, it seems to require Shell, which I don't use.
Maui team could have provided a solution for this long ago.
In fact, they have this whole implementation that potentially could be used
to create custom transitions, except they finalized it with hard coded xml file names
and internal/private classes, for some reason.
Maui could and should be better than Xamarin.Forms, and I can't migrate to it
if it actually offers less.

[Hackmodford]

Kind of shocked that there isn't a good way to specify page transition animations in MAUI. :(