Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Spec] Transitions Api #6033

Open
jsuarezruiz opened this issue Apr 27, 2019 · 2 comments

Comments

3 participants
@jsuarezruiz
Copy link
Collaborator

commented Apr 27, 2019

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 NavigationPage and 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.

Difficulty : [medium]

@PureWeen

This comment has been minimized.

Copy link
Contributor

commented Apr 27, 2019

Could this complement the segue work as well?
#4594

@jsuarezruiz

This comment has been minimized.

Copy link
Collaborator Author

commented Apr 28, 2019

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} />

@kingces95 kingces95 removed this from New in Triage Apr 29, 2019

@samhouts samhouts added this to Needs Design Review in Enhancements May 10, 2019

@samhouts samhouts added this to the 4.3.0 milestone Jun 4, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.