Připojená animace pro aplikace pro Windows

Propojené animace umožňují vytvořit dynamické a poutavé navigační prostředí animací přechodu prvku mezi dvěma různými zobrazeními. To pomáhá uživateli udržovat svůj kontext a zajistit kontinuitu mezi zobrazeními.

V připojené animaci se během změny obsahu uživatelského rozhraní zdá, že prvek bude "pokračovat" mezi dvěma zobrazeními, které přelétá přes obrazovku z jeho umístění ve zdrojovém zobrazení do cíle v novém zobrazení. Tím se zvýrazní společný obsah mezi zobrazeními a v rámci přechodu se vytvoří krásný a dynamický efekt.

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

V tomto krátkém videu aplikace používá připojenou animaci k animaci obrázku položky, protože "pokračuje", aby se stala součástí záhlaví další stránky. Efekt pomáhá udržovat kontext uživatele v rámci přechodu.

Propojená animace a systém Fluent Design

Fluent Design System pomáhá vytvářet moderní, tučné uživatelské rozhraní, které zahrnuje světlo, hloubku, pohyb, materiál a měřítko. Připojená animace je komponenta fluent Design System, která do aplikace přidává pohyb. Další informace najdete v tématu Návrh aplikací pro Windows.

Proč připojená animace?

Při navigaci mezi stránkami je důležité, aby uživatel pochopil, jaký nový obsah se prezentuje po navigaci a jak souvisí se záměrem při navigaci. Propojené animace poskytují výkonnou vizuální metaforu, která zvýrazňuje vztah mezi dvěma zobrazeními tím, že nakreslí fokus uživatele na obsah sdílený mezi nimi. Propojené animace navíc přidávají vizuální zajímavosti a lesk na navigaci na stránkách, které můžou pomoct odlišit návrh pohybu vaší aplikace.

Kdy použít připojenou animaci

Připojené animace se obvykle používají při změně stránek, ale dají se použít na libovolné prostředí, ve kterém měníte obsah v uživatelském rozhraní a chcete, aby uživatel zachoval kontext. Měli byste zvážit použití navázané animace místo navigačního přechodu k detailům, kdykoli je mezi zdrojovým a cílovým zobrazením sdílený obrázek nebo jiná část uživatelského rozhraní.

Konfigurace připojené animace

Propojené animace dále ztělesňují fluent design tím, že poskytují konfigurace animací přizpůsobené speciálně pro navigaci vpřed a dozadu.

Konfiguraci animace určíte nastavením vlastnosti Configuration v ConnectedAnimation. (Příklady toho si ukážeme v další části.)

Tato tabulka popisuje dostupné konfigurace. Další informace o principech pohybu použitých v těchto animacích naleznete v tématu Směrová a závažnost.

Konfigurace ConnectedAnimationService

ConnectedAnimationService třída má dvě vlastnosti, které platí pro jednotlivé animace místo celkové služby.

• Výchozí doba trvání
• DefaultEasingFunction

Pokud chcete dosáhnout různých efektů, některé konfigurace tyto vlastnosti u ConnectedAnimationService ignorují a místo toho používají vlastní hodnoty, jak je popsáno v této tabulce.

Jak implementovat připojenou animaci

Nastavení připojené animace zahrnuje dva kroky:

1. Připravte animační objekt na zdrojové stránce, který označuje systém, že se zdrojový prvek bude účastnit připojené animace.
2. Spusťte animaci na cílové stránce s odkazem na cílový prvek.

Při navigaci ze zdrojové stránky zavolejte ConnectedAnimationService.GetForCurrentView a získejte instanci ConnectedAnimationService. Chcete-li připravit animaci, zavolejte PrepareToAnimate na této instanci a předejte jedinečný klíč a prvek uživatelského rozhraní, který chcete použít v přechodu. Jedinečný klíč umožňuje načíst animaci později na cílové stránce.

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

Když dojde k navigaci, spusťte animaci na cílové stránce. Pokud chcete spustit animaci, zavolejte ConnectedAnimation.TryStart. Správnou instanci animace můžete načíst voláním ConnectedAnimationService.GetAnimation s jedinečným klíčem, který jste zadali při vytváření animace.

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

Navigace vpřed

Tento příklad ukazuje, jak pomocí ConnectedAnimationService vytvořit přechod pro přeposlání navigace mezi dvěma stránkami (Page_A na Page_B).

Doporučená konfigurace animace pro navigaci vpřed je GravityConnectedAnimationConfiguration. Toto je výchozí nastavení, takže vlastnost Konfigurace nemusíte nastavovat, pokud nechcete zadat jinou konfiguraci.

Nastavte animaci na zdrojové stránce.

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

Spusťte animaci na cílové stránce.

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

Zpětná navigace

U zpětné navigace (Page_B na Page_A) postupujte stejně, ale zdrojové a cílové stránky jsou obrácené.

Když se uživatel vrátí zpět, očekává, že se aplikace co nejdříve vrátí do předchozího stavu. Proto doporučená konfigurace je DirectConnectedAnimationConfiguration. Tato animace je rychlejší, přímější a používá zpomalení.

Nastavte animaci na zdrojové stránce.

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

Spusťte animaci na cílové stránce.

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

Mezi dobou nastavení animace a jejím spuštěním se zdrojový prvek zobrazí nad jiným uživatelským rozhraním v aplikaci. To vám umožní provádět všechny ostatní přechodové animace současně. Z tohoto důvodu byste neměli čekat více než ~250 milisekund mezi dvěma kroky, protože přítomnost zdrojového prvku může být rušivá. Pokud připravíte animaci a nezahájíte ji během tří sekund, systém odstraní animaci a všechna následná volání TryStart selžou.

Propojená animace v prostředí seznamu a mřížky

Často budete chtít vytvořit připojenou animaci z ovládacího prvku seznamu nebo mřížky. Pro zjednodušení tohoto procesu můžete použít dvě metody v ListView a GridView, PrepareConnectedAnimation a TryStartConnectedAnimationAsync.

Řekněme například, že máte ListView , který obsahuje prvek s názvem "PortraitEllipse" v jeho datové šabloně.

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

Pokud chcete připravit připojenou animaci s elipsou, která odpovídá dané položce seznamu, zavolejte metodu PrepareConnectedAnimation s jedinečným klíčem, položkou a názvem "PortraitEllipse".

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

Pokud chcete spustit animaci s tímto prvkem jako cílem, například při přechodu zpět ze zobrazení podrobností, použijte TryStartConnectedAnimationAsync. Pokud jste právě načetli zdroj dat pro ListView, TryStartConnectedAnimationAsync počká na spuštění animace, dokud se nevytvořil odpovídající kontejner položek.

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

Koordinovaná animace

Koordinovaná animace je speciální typ úvodní animace, kde se prvek zobrazuje spolu s propojeným animačním cílem, a animuje se společně s připojeným animačním prvkem při pohybu po obrazovce. Koordinované animace můžou do přechodu přidat větší vizuální zájem a dále upoutat pozornost uživatele na kontext, který se sdílí mezi zdrojovým a cílovým zobrazením. V těchto obrázcích uživatelské rozhraní titulků položky animuje pomocí koordinované animace.

Při koordinované animaci, která používá konfiguraci gravitace, se gravitace použije jak na spojený animační prvek, tak na koordinované prvky. Koordinované prvky se budou pohybovat vedle propojeného prvku, aby prvky zůstaly plně sjednocené.

K přidání koordinovaných prvků do propojené animace použijte přetížení TryStart s dvěma parametry. Tento příklad ukazuje koordinovanou animaci rozložení mřížky s názvem "DescriptionRoot", které se zadává společně s propojeným animačním prvkem s názvem 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 });
     }
}

Recommendations

• Použijte propojenou animaci v přechodech stránek, kde se prvek sdílí mezi zdrojovými a cílovými stránkami.
• Pro navigaci vpřed použijte GravityConnectedAnimationConfiguration .
• Pro zadní navigaci použijte DirectConnectedAnimationConfiguration .
• Nečekejte na síťové požadavky ani jiné dlouhotrvající asynchronní operace mezi přípravou a spuštěním připojené animace. Možná budete muset předem načíst potřebné informace, aby se přechod spustil předem, nebo použít zástupný obrázek s nízkým rozlišením, zatímco se obrázek s vysokým rozlišením načte v cílovém zobrazení.
• Pokud používáte ConnectedAnimationService, použijte SuppressNavigationTransitionInfo, abyste zabránili přechodové animaci v Frame, protože připojené animace se nemají používat současně s výchozími navigačními přechody. Další informace o tom, jak používat přechody navigace, najdete v části NavigationThemeTransition .

Související články

ConnectedAnimation

ConnectedAnimationService

NavigationThemeTransition