[Spec] Transitions Api

[jsuarezruiz]

Transitions API

Xamarin.Forms 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 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

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

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

And, include a new property in the Page to allow page transitions using NavigationPage and/or Shell:

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

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

Other related properties can be added like:

• TransitionDuration

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 an attached property to the supported elements inherited from View:

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

The use would be:

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

Tag the control to transition in the source page.

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

And tag the control to transition in the destination page.

Scenarios

A sample using transitions between pages:

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

A sample using shared transitions elements:

Page 1:

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

Page 2:

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

Notes

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

Difficulty : [medium]

[PureWeen]

Could this complement the segue work as well?
#4594

[jsuarezruiz]

Looks nice #4594. I need to review better the changes in https://github.com/xamarin/Xamarin.Forms/pull/2816/files but I think so, it could complement. We could change this Spec to adapt it to Segue one. For example:

<Button
        Command="{Segue 'app:///s/foo/bar?id={0}', AnimationType=SlideFromLeft}"
        CommandParameter={Binding Id} />

[davidortinau]

1. Please give some examples of how I would declare enter/exit transitions in Shell and NavigationPage. Something like this?

<ContentPage
    Transition=“SlideFromBottom”>

Or would it be an attached property like Shell.Transition=“SlideFromBottom”?

As I think about FlyoutItems and Tabs I don’t see a reason to put transitions there, however if in the future we have a hidden item of some kind to be about to route to (like a login page), then I would want to declare a transition type in the AppShell.xaml.

2. What would the order of precedence be when declaring page transitions? For example, if I have a segue like the command you show, but the page also has a transition defined, I expect my segue transition to win.

3. How might this API support custom transitions? What would that look like to add one? For example a Barn Door transition.

4. Shared Element Transitions - can I have more than 1 item that transitions between pages? I can see that being important.

5. Should SharedElement be a transition type as well, or can it work together with the other page transitions? Like would my shared element transition of the logo work equally well when doing a SlideFromBottom as Flip or just the default from the right?

[jsuarezruiz]

Thanks for the feedback @davidortinau!.

1. I have added a sample of what I had in mind.
2. When you navigate to a page, if the page have a transition type assigned, will use that transition.
3. Good question. I had not thought about extending or creating custom transitions. However, I leave a possible option below.

public class BarnDoorTransition : Transition
{
    protected override void OnExecute(View page)
    {
        page.RotateTo (360, 4000);
        page.ScaleTo (2, 2000);
        page.ScaleTo (1, 2000);
        base.OnExecute(page);
    }
}

<ContentPage>
    <ContentPage.Transition>
         <local:BarnDoorTransition />
    </ContentPage.Transition>
</ContentPage>

I will think about this better to have something more solid and thus add it to the Spec.

4. Yes, more than one could be used.
5. You can use a page transition with a shared element transition. However, depending on the type of page transition, we could have weird results. Especially animating layouts (StackLayout, etc.), the page animation should be a basic one (Fade, etc).

[KennyDizi]

that's great!

[smartprogrammer93]

Yes please we need this feature more than anything. I already tried to use this lib : https://github.com/GiampaoloGabba/Xamarin.Plugin.SharedTransitions ..
But it was so buggy on the iPhone and did not work as expected. This is a very desirable feature as it is always required to produce nice UI for modern apps

[KennyDizi]

yes, @davidortinau , @jsuarezruiz we realy need them to make mordern app:

• [Enhancement] Left-aligned ToolbarItems on Android & iOS #1719
• [Spec] Transitions Api #6033
• [F100] Floating Action Buttons #1714
• [F100] Translucent Nav Bar #1698

[JKennedy24]

This looks like a great enhancement, Animations are the type of thing that take an application to the next level.

Looking at the Roadmap I would vote to prioritize this above some of the other features

[Tommigun1980]

Any chance the priority of this could be upped? I had a look at the roadmap and most of the things in there are nice to have, while this is almost essential for making modern apps. I’d really appreciate if this could be worked on ASAP. Thanks!

[lavilaso]

I agree %100 with @Tommigun1980

[JKennedy24]

I'd agree 110% with @Tommigun1980

[saiyamshah143]

I also agree with @Tommigun1980, and if xamarin.forms team would take some poll on which feature should be prioritized based on its users, then it would be very nice as it is an open-source project.

[ahmedalejo]

Thanks for the feedback @davidortinau!.

1. I have added a sample of what I had in mind.
2. When you navigate to a page, if the page have a transition type assigned, will use that transition.
3. Good question. I had not thought about extending or creating custom transitions. However, I leave a possible option below.

public class BarnDoorTransition : Transition
{
    protected override void OnExecute(View page)
    {
        page.RotateTo (360, 4000);
        page.ScaleTo (2, 2000);
        page.ScaleTo (1, 2000);
        base.OnExecute(page);
    }
}

<ContentPage>
    <ContentPage.Transition>
         <local:BarnDoorTransition />
    </ContentPage.Transition>
</ContentPage>

I will think about this better to have something more solid and thus add it to the Spec.

1. Yes, more than one could be used.
2. You can use a page transition with a shared element transition. However, depending on the type of page transition, we could have weird results. Especially animating layouts (StackLayout, etc.), the page animation should be a basic one (Fade, etc).

What about transitioning in and out. How does this differentiate.

may be

 <ContentPage>
     <ContentPage.TransitionIn>
          <local:BarnDoorOpenTransition />
     </ContentPage.TransitionIn>
     <ContentPage.TransitionOut>
          <local:BarnDoorCloseTransition />
     </ContentPage.TransitionOut>
 </ContentPage>

[Mikilll94]

Any update on this?

[domagojmedo]

@jsuarezruiz now that XF 5 is finalizing, how will work like this be done? I was under the impression that n new versions of XF will be published until MAUI is released. Does that mean this won't be done until then?

[maonaoda]

Although XF 5 has been released, it seems that this feature is still missing. Is there any latest news about this?

[brettnguyen]

any update ?