UWP アプリ用の接続型アニメーションConnected animation for UWP apps

接続型アニメーションを使用すると、2 つの異なるビューの間で要素が切り替わる様子をアニメーション化することによって、動的で魅力的なナビゲーション エクスペリエンスを作成できます。Connected animations let you create a dynamic and compelling navigation experience by animating the transition of an element between two different views. これにより、ユーザーはコンテキストを維持して、ビューの間の継続性を実現することができます。This helps the user maintain their context and provides continuity between the views.

アニメーションの結び要素は、新しいビューにその先に、ソース ビュー内の場所から、画面上で飛行の UI コンテンツの変更中に 2 つのビューの間には、[続行] が表示されます。In a connected animation, an element appears to "continue" between two views during a change in UI content, flying across the screen from its location in the source view to its destination in the new view. これにより、ビューの間の一般的なコンテンツを強調し、遷移の一部として美しいおよび動的な効果を作成します。This emphasizes the common content between the views and creates a beautiful and dynamic effect as part of a transition.

重要な API:ConnectedAnimation クラスConnectedAnimationService クラスImportant APIs: ConnectedAnimation class, ConnectedAnimationService class

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

ある場合、 XAML コントロール ギャラリーアプリをインストールするには、ここをクリックしてアプリを開き、接続されているアニメーション動作を確認します。If you have the XAML Controls Gallery app installed, click here to open the app and see Connected Animation in action.

この短いビデオでは、アプリは、「継続」次のページのヘッダーの一部となる項目のイメージをアニメーション化するのにアニメーションの結び付けを使用します。In this short video, an app uses a connected animation to animate an item image as it "continues" to become part of the header of the next page. この効果を利用すると、画面の切り替えでユーザー コンテキストを維持することができます。The effect helps maintain user context across the transition.

接続型アニメーション

ビデオの概要Video summary

接続型アニメーションと Fluent Design SystemConnected animation and the Fluent Design System

Fluent Design System では、ライト、深度、モーション、マテリアル、スケールを取り入れた、モダンで目を引く UI を作成できます。The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. 接続型アニメーションは、アプリに動きを加える Fluent Design System コンポーネントです。Connected animation is a Fluent Design System component that adds motion to your app. 詳しくは、UWP 用の Fluent Design の概要に関するページをご覧ください。To learn more, see the Fluent Design for UWP overview.

接続型アニメーションを使用する理由Why connected animation?

ページ間を移動するときには、移動後にどのような新しいコンテンツが表示されるか、その新しいコンテンツがページを移動するユーザーの目的とどのように関連しているかを、ユーザーが理解できるようにすることが重要です。When navigating between pages, it’s important for the user to understand what new content is being presented after the navigation and how it relates to their intent when navigating. 接続型アニメーションを利用すると、2 つのビューで共有されているコンテンツにユーザーを注目させることによって、2 つのビューの間の関係を強調する強力な視覚的メタファが実現されます。Connected animations provide a powerful visual metaphor that emphasizes the relationship between two views by drawing the user’s focus to the content shared between them. また、接続型アニメーションによって、ページを移動するときに、視覚的に注目を引く効果や洗練された視覚効果を発生させることができます。このことは、アプリのモーション デザインを特徴付ける際に役立ちます。Additionally, connected animations add visual interest and polish to page navigation that can help differentiate the motion design of your app.

接続型アニメーションを使用するタイミングWhen to use connected animation

一般に、接続型アニメーションはページを変更するとき使用されます。ただし、UI のコンテンツを変更するときに、そのコンテンツが維持されるようにユーザーに対して表示する必要がある場合は、接続型アニメーションをどのようなエクスペリエンスにでも適用できます。Connected animations are generally used when changing pages, though they can be applied to any experience where you are changing content in a UI and want the user to maintain context. ソース ビューと切り替え先のビューの間で UI の画像や他の UI の要素が共有されている場合は、必ず、ドリル インによるナビゲーション切り替えではなく、接続型アニメーションの使用を検討してください。You should consider using a connected animation instead of a drill in navigation transition whenever there is an image or other piece of UI shared between the source and destination views.

アニメーションの結び付けを構成します。Configure connected animation

重要

この機能では、アプリのターゲット バージョンの Windows 10、バージョンは 1809 である必要があります (SDK 17763) またはそれ以降。This feature requires that your app's Target version be Windows 10, version 1809 (SDK 17763) or later. 構成プロパティは、以前の Sdk でご利用いただけません。The Configuration property is not available in earlier SDKs. SDK 17763 より前の最小バージョンを対象にするアダプティブ コードまたは条件付き XAML を使用します。You can target a Minimum version lower than SDK 17763 using adaptive code or conditional XAML. 詳細については、次を参照してください。バージョン アダプティブ アプリします。For more info, see Version adaptive apps.

以降では、Windows 10、バージョンは 1809、アニメーションの結び付けさらに具体化 Fluent デザインのアニメーションを提供することで構成調整と旧バージョンと順方向専用のページ ナビゲーション。Starting in Windows 10, version 1809, connected animations further embody Fluent design by providing animation configurations tailored specifically for forward and backwards page navigation.

アニメーションは、の構成を指定するには、構成プロパティ、ConnectedAnimation を設定します。You specify an animation configuration by setting the Configuration property on the ConnectedAnimation. (紹介の例として、次のセクションでします。)(We’ll show examples of this in the next section.)

このテーブルには、使用可能な構成について説明します。This table describes the available configurations. これらのアニメーションに適用されるモーション原則の詳細については、次を参照してください。の方向や重力します。For more information about the motion principles applied in these animations, see Directionality and gravity.

GravityConnectedAnimationConfigurationGravityConnectedAnimationConfiguration
既定の構成では、これは"進む"ナビゲーション推奨します。This is the default configuration, and is recommended for forward navigation.
アプリ (A B から) での前方移動している間、ユーザー、物理的に"pull がページ外"に接続されている要素が表示されます。As the user navigates forward in the app (A to B), the connected element appears to physically “pull off the page”. そうでは、要素は、z 座標で前方に移動するが表示され、重力を保留中の影響を少しで、削除します。In doing so, the element appears to move forward in z-space and drops a bit as an effect of gravity taking hold. 重力の影響をなくすためには、要素は速度の向上し、を迅速に、最後の位置。To overcome the effects of gravity, the element gains velocity and accelerates into its final position. 「スケールと dip」アニメーションになります。The result is a “scale and dip” animation.
DirectConnectedAnimationConfigurationDirectConnectedAnimationConfiguration
ユーザーはアプリ (B) では後方移動したときにアニメーションがより直接的にします。As the user navigates backwards in the app (B to A), the animation is more direct. 接続されている要素は、直線的には減速 3 次ベジエ イージング関数を使用して、B から変換します。The connected element linearly translates from B to A using a decelerate cubic Bezier easing function. 旧バージョンと visual アフォー ダンスは、できるだけ高速、ナビゲーションのフローのコンテキストを維持しながら、ユーザーを以前の状態に返します。The backwards visual affordance returns the user to their previous state as fast as possible while still maintaining the context of the navigation flow.
BasicConnectedAnimationConfigurationBasicConnectedAnimationConfiguration
これは、既定値 (および専用) Windows 10、バージョンは 1809 より前のバージョンで使用されるアニメーション (SDK 17763)。This is the default (and only) animation used in versions prior to Windows 10, version 1809 (SDK 17763).

ConnectedAnimationService 構成ConnectedAnimationService configuration

ConnectedAnimationServiceクラス全体のサービスではなく、個々 のアニメーションに適用される 2 つのプロパティがあります。The ConnectedAnimationService class has two properties that apply to the individual animations rather than the overall service.

さまざまな効果を実現するためにいくつかの構成は ConnectedAnimationService でこれらのプロパティを無視して、独自の値を使用して、代わりに、この表で説明します。To achieve the various effects, some configurations ignore these properties on ConnectedAnimationService and use their own values instead, as described in this table.

構成Configuration 保護に努めています DefaultDuration でしょうか。Respects DefaultDuration? 保護に努めています DefaultEasingFunction でしょうか。Respects DefaultEasingFunction?
重力Gravity Yes ○*Yes*
*A から B への基本的な変換がこのイージング関数を使用しますが、"重力 dip"が、独自のイージング関数。*The basic translation from A to B uses this easing function, but the "gravity dip" has its own easing function.
[直接]Direct XNo
超える 150ms をアニメーション化します。Animates over 150ms.
XNo
イージング関数は、減速を使用します。Uses the Decelerate easing function.
基本Basic Yes Yes

アニメーションの結び付けを実装する方法How to implement connected animation

接続型アニメーションのセットアップでは、次の 2 つの手順を実行します。Setting up a connected animation involves two steps:

  1. 準備ソース ページで、システムに、ソース要素がアニメーションの結び付けに参加することを示すアニメーション オブジェクト。Prepare an animation object on the source page, which indicates to the system that the source element will participate in the connected animation.
  2. 開始ターゲット要素への参照を渡して、移動先ページのアニメーション。Start the animation on the destination page, passing a reference to the destination element.

元のページからの移動時に呼び出すConnectedAnimationService.GetForCurrentView ConnectedAnimationService のインスタンスを取得します。When navigating from the source page, call ConnectedAnimationService.GetForCurrentView to get an instance of ConnectedAnimationService. アニメーションを準備するには、呼び出すPrepareToAnimateこのインスタンスし、一意のキーと、移行で使用する UI 要素を渡します。To prepare an animation, call PrepareToAnimate on this instance, and pass in a unique key and the UI element you want to use in the transition. 一意のキーを使用して、移動先ページでは後で、アニメーションを取得できます。The unique key lets you retrieve the animation later on the destination page.

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

ナビゲーションが発生したときに、移動先ページで、アニメーションを起動します。When the navigation occurs, start the animation in the destination page. アニメーションを開始するには、ConnectedAnimation.TryStart を呼び出します。To start the animation, call ConnectedAnimation.TryStart. アニメーションの作成時に指定した一意のキーを使用して ConnectedAnimationService.GetAnimation を呼び出すことにより、適切なアニメーションのインスタンスを取得できます。You can retrieve the right animation instance by calling ConnectedAnimationService.GetAnimation with the unique key you provided when creating the animation.

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

"進む"ナビゲーションForward navigation

この例では、ConnectedAnimationService を使用して、2 つのページ (Page_B に Page_A)"進む"ナビゲーションの遷移を作成する方法を示します。This example shows how to use ConnectedAnimationService to create a transition for forward navigation between two pages (Page_A to Page_B).

"進む"ナビゲーション推奨されるアニメーションの構成がGravityConnectedAnimationConfigurationします。The recommended animation configuration for forward navigation is GravityConnectedAnimationConfiguration. 設定する必要はありませんは、既定値は、これは、構成プロパティを別の構成を指定しない場合。This is the default, so you don't need to set the Configuration property unless you want to specify a different configuration.

ソース ページでアニメーションを設定します。Set up the animation in the source page.

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

移動先ページでアニメーションを開始します。Start the animation in the destination page.

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

戻るナビゲーションBack navigation

戻るナビゲーション (Page_A に Page_B) のため、同じ手順に従いますが、元とコピー先のページが取り消されます。For back navigation (Page_B to Page_A), you follow the same steps, but the source and destination pages are reversed.

ユーザーがバックアップに移動したときに、以前の状態に、できるだけ早く返されるアプリが期待されます。When the user navigates back, they expect the app to be returned to the previous state as soon as possible. そのため、推奨される構成はDirectConnectedAnimationConfigurationします。Therefore, the recommended configuration is DirectConnectedAnimationConfiguration. このアニメーションは高速より直接的にあり、減速のイージングを使用します。This animation is quicker, more direct, and uses the decelerate easing.

ソース ページでアニメーションを設定します。Set up the animation in the source page.

// Page_B.xaml.cs

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

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

移動先ページでアニメーションを開始します。Start the animation in the destination page.

// 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 の上に固定表示されます。Between the time that the animation is set up and when it's started, the source element appears frozen above other UI in the app. その他の遷移のアニメーションを同時に実行できます。This lets you perform any other transition animations simultaneously. このため、ソース要素の存在を無駄になる可能性がありますので、2 つの手順の間 ~ 250 以上のミリ秒の待機することはできません。For this reason, you shouldn't wait more than ~250 milliseconds in between the two steps because the presence of the source element may become distracting. アニメーションを準備しても、アニメーションを 3 秒以内に開始しないと、システムによってアニメーションが破棄され、後続の TryStart の呼び出しは失敗します。If you prepare an animation and do not start it within three seconds, the system will dispose of the animation and any subsequent calls to TryStart will fail.

リスト エクスペリエンスとグリッド エクスペリエンスでの接続型アニメーションConnected animation in list and grid experiences

多くの場合、リスト コントロールやグリッド コントロール間の切り替えで接続型アニメーションの作成が必要になります。Often, you will want to create a connected animation from or to a list or grid control. 2 つのメソッドを使用するにはListViewGridViewPrepareConnectedAnimationtrystartconnectedanimationasync です、このプロセスが簡略化します。You can use the two methods on ListView and GridView, PrepareConnectedAnimation and TryStartConnectedAnimationAsync, to simplify this process.

たとえば、データ テンプレート内に "PortraitEllipse" という名前の要素を含んでいる ListView があるとします。For example, say you have a ListView that contains an element with the name "PortraitEllipse" in its data template.

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

特定のリスト項目に対応する楕円をアニメーションの結び付けを準備するには、呼び出し、 PrepareConnectedAnimation一意キー、アイテム、および"PortraitEllipse"という名前を持つメソッド。To prepare a connected animation with the ellipse corresponding to a given list item, call the PrepareConnectedAnimation method with a unique key, the item, and the name "PortraitEllipse".

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

など、詳細ビューから後方に移動すると、変換先として、この要素にアニメーションを開始するには使用trystartconnectedanimationasync ですします。To start an animation with this element as the destination, such as when navigating back from a detail view, use TryStartConnectedAnimationAsync. ListView のデータ ソースが読み込んだ trystartconnectedanimationasync ですは対応する項目コンテナーが作成されるまで、アニメーションの開始を待機します。If you have just loaded the data source for the ListView, TryStartConnectedAnimationAsync will wait to start the animation until the corresponding item container has been created.

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

連動型アニメーションCoordinated animation

連動型アニメーション

Aアニメーションを調整特殊な種類の開始のアニメーションは、要素が画面上で移動するときに、アニメーションの結び付け要素と連携してアニメーション化、アニメーションの結び付けターゲットと共に表示されます。A coordinated animation is a special type of entrance animation where an element appears along with the connected animation target, animating in tandem with the connected animation element as it moves across the screen. 連動型アニメーションによって、ビューの切り替え時に視覚的にさらに注目を引く効果が発生し、ソース ビューと切り替え先のビューの間で共有されているコンテキストにユーザーを注目させることができます。Coordinated animations can add more visual interest to a transition and further draw the user’s attention to the context that is shared between the source and destination views. 上記の画像では、連動型アニメーションを使用して、項目のキャプション UI がアニメーション化されています。In these images, the caption UI for the item is animating using a coordinated animation.

調整されたアニメーションは、重力構成を使用する場合は、重力がアニメーションの結び付け要素と調整の要素の両方に適用されます。When a coordinated animation uses the gravity configuration, gravity is applied to both the connected animation element and the coordinated elements. 連携のとれた要素は"swoop"接続されている要素と共に、真の連携した要素を維持します。The coordinated elements will "swoop" alongside the connected element so the elements stay truly coordinated.

TryStart の 2 つのパラメーター オーバーロードを使用して、連動型の要素を接続型アニメーションに追加します。Use the two-parameter overload of TryStart to add coordinated elements to a connected animation. この例では、"CoverImage"という名前のアニメーションの結び付け要素が連携して入力した"DescriptionRoot"という名前のグリッド レイアウトの調整されたアニメーションを示します。This example demonstrates a coordinated animation of a Grid layout named "DescriptionRoot" that enters in tandem with a connected animation element named "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

  • 接続型アニメーションは、ソース ページと切り替え先のページの間で要素が共有されている場合に、ページの切り替えで使用してください。Use a connected animation in page transitions where an element is shared between the source and destination pages.
  • 使用GravityConnectedAnimationConfiguration "進む"ナビゲーションの。Use GravityConnectedAnimationConfiguration for forward navigation.
  • 使用DirectConnectedAnimationConfigurationのナビゲーションをバックアップします。Use DirectConnectedAnimationConfiguration for back navigation.
  • ネットワーク要求または他の実行時間の長い非同期の操作を準備して、接続されているアニメーションの開始の間に待機はありません。Don't wait on network requests or other long-running asynchronous operations in between preparing and starting a connected animation. 早めに切り替えを実行するには、必要な情報を事前に読み込んでおく必要があります。または、高解像度の画像が切り替え先のビューに読み込まれるときに、低解像度のプレースホルダー画像を使用する必要があります。You may need to pre-load the necessary information to run the transition ahead of time, or use a low-resolution placeholder image while a high-resolution image loads in the destination view.
  • 使用SuppressNavigationTransitionInfoの遷移のアニメーションを防ぐために、フレームを使用する場合ConnectedAnimationService、アニメーションの結び付け以降既定のナビゲーションの切り替えを同時に使用するためのものはありません。Use SuppressNavigationTransitionInfo to prevent a transition animation in a Frame if you are using ConnectedAnimationService, since connected animations aren't meant to be used simultaneously with the default navigation transitions. ナビゲーション切り替えの使用方法について詳しくは、「NavigationThemeTransition」をご覧ください。See NavigationThemeTransition for more info on how to use navigation transitions.

ConnectedAnimationConnectedAnimation

ConnectedAnimationServiceConnectedAnimationService

NavigationThemeTransitionNavigationThemeTransition