Windows アプリ用の接続型アニメーション

接続型アニメーションを使用すると、2 つの異なるビュー間の要素の遷移をアニメーション化することで、動的で説得力のあるナビゲーション エクスペリエンスを作成できます。 これにより、ユーザーはコンテキストを維持し、ビュー間の継続性を提供できます。

接続型アニメーションでは、UI コンテンツが変化するとき (画面間を移動して、ソース ビュー内の要素の場所から新しいビュー内の切り替え先となる場所が表示されるとき)、要素が 2 つのビューの間で "途切れることなく" 表示されます。 これにより、ビューの間で共通するコンテンツが強調され、要素が切り替わるときに魅力的で動的な効果が発生します。

重要な API: ConnectedAnimation class、ConnectedAnimationService class

例

WinUI 2 ギャラリー
	WinUI 2 Gallery アプリがインストールされている場合は、ここをクリックしてアプリを開き、接続済みアニメーションの動作を確認します。 WinUI 2 ギャラリー アプリ (Microsoft Store) を入手する ソース コード (GitHub) を入手する

この短い動画では、アプリは接続型アニメーションを使用して項目の画像をアニメーション化し、その画像が "途切れることなく" 切り替わり、次のページにあるヘッダーの一部となります。 この効果は、移行全体でユーザー コンテキストを維持するのに役立ちます。

接続されたアニメーションと Fluent Design System

Fluent Design System では、ライト、深度、モーション、マテリアル、スケールを取り入れた、モダンで目を引く UI を作成できます。 接続されたアニメーションは、アプリにモーションを追加する Fluent Design System コンポーネントです。 詳しくは、Fluent Design の概要に関するページをご覧ください。

接続されたアニメーションはなぜですか?

ページ間を移動するときは、ナビゲーションの後に表示される新しいコンテンツと、ナビゲーション時の意図との関係をユーザーが理解することが重要です。 接続されたアニメーションは、2 つのビュー間で共有されているコンテンツにユーザーのフォーカスを描画することで、2 つのビュー間の関係を強調する強力な視覚的なメタファーを提供します。 さらに、接続されたアニメーションは、アプリのモーション デザインを区別するのに役立つ視覚的な関心と洗練されたページ ナビゲーションを追加します。

接続されたアニメーションを使用するタイミング

接続されたアニメーションは通常、ページを変更するときに使用されますが、UI でコンテンツを変更し、ユーザーがコンテキストを維持するエクスペリエンスに適用できます。 ソース ビューとコピー先ビューの間で画像またはその他の UI が共有されている場合はナビゲーション画面でドリルの代わりに接続されたアニメーションを使用することを検討してください。

接続型アニメーションの構成

重要

この機能を使用するには、アプリのターゲット バージョンが Windows 10 Version 1809 (SDK 17763) 以降である必要があります。 Configuration プロパティは、以前の SDK では使用できません。 アダプティブ コードまたは条件付き XAML を使用して、SDK 17763 より低い最小バージョンを対象にすることができます。 詳しくは、バージョン アダプティブ アプリに関する記事をご覧ください。

Windows 10 Version 1809 以降では、接続型アニメーションは、順方向および逆方向のページ ナビゲーション専用に調整されたアニメーション構成を提供することで、Fluent Design をさらに具体化します。

アニメーション構成を指定するには、ConnectedAnimation の Configuration プロパティを設定します。 (この例は、次のセクションで示します。)

この表では、使用可能な構成について説明します。 これらのアニメーションで適用されるモーション原則の詳細については、「方向性と重力」を参照してください。

GravityConnectedAnimationConfiguration
これは既定の構成であり、順方向ナビゲーションに推奨されます。
ユーザーがアプリ内で順方向 (A から B) に進むと、接続型の要素は物理的に "ページをめくる" ように見えます。 このようにすると、要素は z 空間で順方向に移動するように見え、重力がかかった効果として少しだけ下がります。 重力の効果を克服するために、要素はスピードを上げ、最終的な位置まで加速します。 結果は "スケールと沈下" のアニメーションになります。

DirectConnectedAnimationConfiguration
ユーザーがアプリ内で逆方向 (B から A) に移動すると、アニメーションはより直接的になります。 接続型の要素は、減速の 3 次ベジエ イージング関数を使用して B から A に線形に移動します。 逆方向の視覚的アフォーダンスは、ナビゲーション フローのコンテキストを維持したまま、できるだけ高速にユーザーを前の状態に戻します。

BasicConnectedAnimationConfiguration
これは、Windows 10 Version 1809 (SDK 17763) より前のバージョンで使用されている既定の (かつ唯一の) アニメーションです。

ConnectedAnimationService 構成

ConnectedAnimationService クラスには、サービス全体ではなく個々のアニメーションに適用される 2 つのプロパティがあります。

• DefaultDuration
• DefaultEasingFunction

さまざまな効果を実現するために、一部の構成では、この表で説明するように、ConnectedAnimationService でこれらのプロパティを無視し、代わりに独自の値を使用します。

構成	DefaultDuration を適用?	DefaultEasingFunction を適用?
重力	はい	はい* *A から B への基本的な移動では、このイージング関数を使用しますが、"重力沈下" には独自のイージング関数があります。
直接	なし 150ms を超えてアニメーション化します。	なし 減速のイージング関数を使用します。
基本	はい	はい

接続型アニメーションを実装する方法

接続されたアニメーションを設定するには、次の 2 つの手順を実行します。

1. ソース ページでアニメーション オブジェクトを "準備" します。この手順では、ソース要素が接続型アニメーションに参加することを、システムに伝えます。
2. 切り替え先のページでアニメーションを "開始" します。この手順では、切り替え先の要素に参照を渡します。

ソース ページから移動する場合は、ConnectedAnimationService.GetForCurrentView を呼び出して、ConnectedAnimationService のインスタンスを取得します。 アニメーションを準備するには、このインスタンスの PrepareToAnimate を呼び出し、切り替えで使用する一意のキーと UI 要素を渡します。 一意のキーを使用すると、後ほど切り替え先ページでアニメーションを取得できます。

ConnectedAnimationService.GetForCurrentView()
    .PrepareToAnimate("forwardAnimation", SourceImage);

ナビゲーションが発生したら、切り替え先ページでアニメーションを開始します。 アニメーションを開始するには、 ConnectedAnimation.TryStart を呼び出します。 アニメーションの作成時に指定した一意のキーを使用して ConnectedAnimationService.GetAnimation を呼び出すことで、適切なアニメーション インスタンスを取得できます。

ConnectedAnimation animation =
    ConnectedAnimationService.GetForCurrentView().GetAnimation("forwardAnimation");
if (animation != null)
{
    animation.TryStart(DestinationImage);
}

順方向ナビゲーション

この例では、ConnectedAnimationService を使用して、2 つのページ間の順方向ナビゲーション (Page_A から Page_B) の切り替えを作成する方法を示します。

順方向ナビゲーションの推奨されるアニメーション構成は GravityConnectedAnimationConfiguration です。 これは既定値であるため、別の構成を指定する場合を除き、Configuration プロパティを設定する必要はありません。

ソース ページでアニメーションを設定します。

<!-- Page_A.xaml -->

<Image x:Name="SourceImage"
       HorizontalAlignment="Left" VerticalAlignment="Top"
       Width="200" Height="200"
       Stretch="Fill"
       Source="Assets/StoreLogo.png"
       PointerPressed="SourceImage_PointerPressed"/>

// Page_A.xaml.cs

private void SourceImage_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    // Navigate to detail page.
    // Suppress the default animation to avoid conflict with the connected animation.
    Frame.Navigate(typeof(Page_B), null, new SuppressNavigationTransitionInfo());
}

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    ConnectedAnimationService.GetForCurrentView()
        .PrepareToAnimate("forwardAnimation", SourceImage);
    // You don't need to explicitly set the Configuration property because
    // the recommended Gravity configuration is default.
    // For custom animation, use:
    // animation.Configuration = new BasicConnectedAnimationConfiguration();
}

切り替え先ページでアニメーションを開始します。

<!-- Page_B.xaml -->

<Image x:Name="DestinationImage"
       Width="400" Height="400"
       Stretch="Fill"
       Source="Assets/StoreLogo.png" />

// Page_B.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    ConnectedAnimation animation =
        ConnectedAnimationService.GetForCurrentView().GetAnimation("forwardAnimation");
    if (animation != null)
    {
        animation.TryStart(DestinationImage);
    }
}

戻るナビゲーション

戻るナビゲーション (Page_B から Page_A) の場合は、同じ手順に従いますが、ソースと切り替え先のページは逆になります。

ユーザーは戻る移動をしたときに、できるだけ早く以前の状態に戻ることをアプリに期待します。 そのため、推奨される構成は、DirectConnectedAnimationConfiguration です。 このアニメーションはより迅速で直接的であり、減速のイージングを使用します。

ソース ページでアニメーションを設定します。

// Page_B.xaml.cs

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    if (e.NavigationMode == NavigationMode.Back)
    {
        ConnectedAnimation animation = 
            ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("backAnimation", DestinationImage);

        // Use the recommended configuration for back animation.
        animation.Configuration = new DirectConnectedAnimationConfiguration();
    }
}

切り替え先ページでアニメーションを開始します。

// Page_A.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    ConnectedAnimation animation =
        ConnectedAnimationService.GetForCurrentView().GetAnimation("backAnimation");
    if (animation != null)
    {
        animation.TryStart(SourceImage);
    }
}

アニメーションが設定された時点から開始されるまで、ソース要素はアプリ内の他の UI の上に固定された状態で表示されます。 これにより、他の切り替えアニメーションを同時に実行できます。 このため、2 つの手順の間の待機時間は 250 ミリ秒を超えないようにしてください。これを超えると、ソース要素が存在することで問題が発生する可能性があります。 アニメーションを準備し、3 秒以内に開始しない場合、システムはアニメーションを破棄し、後続の TryStart の呼び出しは失敗します。

リストおよびグリッド エクスペリエンスの接続されたアニメーション

多くの場合、リスト コントロールまたはグリッド コントロールの間で接続されたアニメーションを作成する必要があります。 ListView と GridView の 2 つのメソッドである PrepareConnectedAnimation と TryStartConnectedAnimationAsync を使用して、このプロセスを簡略化できます。

たとえば、データ テンプレートに "PortraitEllipse" という名前の要素を含む ListView があるとします。

<ListView x:Name="ContactsListView" Loaded="ContactsListView_Loaded">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="vm:ContactsItem">
            <Grid>
                …
                <Ellipse x:Name="PortraitEllipse" … />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

指定されたリスト項目に対応する楕円を表示する接続型アニメーションを準備するには、一意のキー、項目、および "PortraitEllipse" という名前を指定して、PrepareConnectedAnimation メソッドを呼び出します。

void PrepareAnimationWithItem(ContactsItem item)
{
     ContactsListView.PrepareConnectedAnimation("portrait", item, "PortraitEllipse");
}

この要素を切り替え先として使用してアニメーションを開始するには (詳細ビューから戻ったときなど)、TryStartConnectedAnimationAsync を使用します。 ListView のデータ ソースを読み込んだばかりの場合、TryStartConnectedAnimationAsync は、対応する項目コンテナーが作成されるまでアニメーションの開始を待機します。

private async void ContactsListView_Loaded(object sender, RoutedEventArgs e)
{
    ContactsItem item = GetPersistedItem(); // Get persisted item
    if (item != null)
    {
        ContactsListView.ScrollIntoView(item);
        ConnectedAnimation animation =
            ConnectedAnimationService.GetForCurrentView().GetAnimation("portrait");
        if (animation != null)
        {
            await ContactsListView.TryStartConnectedAnimationAsync(
                animation, item, "PortraitEllipse");
        }
    }
}

調整されたアニメーション

"連動型アニメーション" は特殊な種類の開始アニメーションで、要素が接続型アニメーションのターゲットと共に表示され、接続型アニメーションの要素と連動してアニメーション化され、画面上を横切って移動します。 調整されたアニメーションを使用すると、画面切り替えに視覚的な関心を高め、ソース ビューと変換先ビューの間で共有されるコンテキストにユーザーの注意を引くことができます。 これらの画像では、項目のキャプション UI は、調整されたアニメーションを使用してアニメーション化されています。

連動型アニメーションで重力構成を使用する場合、接続型アニメーションの要素と連動型の要素の両方に重力が適用されます。 連動型の要素は、接続型の要素と共に "急降下" するので、要素は真に連動した状態になります。

TryStart の 2 パラメーター オーバーロードを使用して、接続されたアニメーションに座標要素を追加します。 次の例では、"DescriptionRoot" という名前のグリッド レイアウトの連動型アニメーションを説明します。このアニメーションは、"CoverImage" という名前の接続型アニメーションの要素と連動して表示されます。

<!-- DestinationPage.xaml -->
<Grid>
    <Image x:Name="CoverImage" />
    <Grid x:Name="DescriptionRoot" />
</Grid>

// DestinationPage.xaml.cs
void OnNavigatedTo(NavigationEventArgs e)
{
    var animationService = ConnectedAnimationService.GetForCurrentView();
    var animation = animationService.GetAnimation("coverImage");

    if (animation != null)
    {
        // Don’t need to capture the return value as we are not scheduling any subsequent
        // animations
        animation.TryStart(CoverImage, new UIElement[] { DescriptionRoot });
     }
}

Do's and don'ts

• ページ切り替えで接続されたアニメーションを使用します。この場合、ソース ページと移行先ページの間で要素が共有されます。
• 順方向ナビゲーションには GravityConnectedAnimationConfiguration を使用します。
• 逆方向ナビゲーションには DirectConnectedAnimationConfiguration を使用します。
• 接続型アニメーションの準備と開始の間で発生する、ネットワーク要求や他の実行時間の長い非同期操作を待機しないでください。 移行を事前に実行するために必要な情報を事前に読み込む必要がある場合や、高解像度のイメージが変換先ビューに読み込まれるときに低解像度のプレースホルダー イメージを使用することが必要な場合があります。
• ConnectedAnimationService を使用する場合、Frame 内で切り替えアニメーションが使われないようにするには、SuppressNavigationTransitionInfo を使用します。これは、接続型アニメーションが既定のナビゲーション切り替えとは同時に使用できないアニメーションであるためです。 ナビゲーション画面切り替えの使用方法の詳細については、「 NavigationThemeTransition 」を参照してください。

関連記事

ConnectedAnimation

ConnectedAnimationService

NavigationThemeTransition