トランジション

マウイにはすでに完全なアニメーションAPIがあり、ページ上にライブで流動的なコンテンツを作成できます。 ただし、ページ間を移動するとどうなりますか？

この仕様は、マウイトランジションAPIを定義してい

• 従来のトランジション：従来、異なるページ間のトランジションには、ビュー階層全体を互いに独立してアニメーション化する開始トランジションと終了トランジションが含まれていました。
• 共有要素の遷移：多くの場合、両方のアクティビティに共通の要素があり、これらの共有要素を個別に遷移する機能を提供することで、遷移間の連続性が強調され、ユーザーがアプリをナビゲートするときにアクティビティの境界が破られます。

API

従来の移行

従来のトランジションの場合、サポートされているトランジションを含む新しい列挙が必要です。

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

また、NavigationPageとShellを使用してページを遷移できるように、ページに新しいプロパティを含めます。

• TransitionType ：使用される遷移効果。
• TransitionDuration ：ミリ秒単位の遷移期間。

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); }
}

共有要素の遷移

一方、共有要素の遷移を許可する方法が必要です。 重要なのは、2つの異なるページで利用可能な同じアイテムを「リンク」する方法です。

Viewから継承されたサポートされている要素にTransitionTag添付プロパティがあります。

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

用途は次のとおりです。

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

ソースページで遷移するコントロールにタグを付けます。

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

そして、宛先ページで遷移するコントロールにタグを付けます。

シナリオ

いくつかの例を見てみましょう。

XAMLの例

ページ間の遷移を使用したサンプル：

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

共有遷移要素を使用したサンプル：

ページ1：

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

2ページ：

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

ノート

• トランジションを表示するには、ソースページと宛先ページのTransitionTagが一致している必要があります。
• 一度に複数のビューをアニメーション化できますが、ページ内のすべてのTransitionTagは一意である必要があります。

難易度：中