[Spec] Transitions

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

[Laftek]

This should have much higher priority in my opinion.

[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.