Delen via

Verbonden animatie voor Windows-apps

Met verbonden animaties kunt u een dynamische en aantrekkelijke navigatie-ervaring maken door de overgang van een element tussen twee verschillende weergaven te activeren. Dit helpt de gebruiker om de context te behouden en zorgt voor continuïteit tussen de weergaven.

In een verbonden animatie wordt een element weergegeven om tussen twee weergaven door te gaan tijdens een wijziging in de gebruikersinterface-inhoud, die vanaf de locatie van het scherm in de bronweergave naar de bestemming ervan in de nieuwe weergave vliegt. Dit benadrukt de algemene inhoud tussen de weergaven en creëert een mooi en dynamisch effect als onderdeel van een overgang.

Open de App WinUI 3 Gallery en zie Impliciete overgangen in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

In deze korte video maakt een app gebruik van een verbonden animatie om een itemafbeelding te animeren omdat deze 'blijft' deel uitmaken van de koptekst van de volgende pagina. Het effect helpt bij het onderhouden van gebruikerscontext tijdens de overgang.

Verbonden animatie

Verbonden animatie en het Fluent Design-systeem

Het Fluent Design System helpt u moderne, vetgedrukte gebruikersinterface te maken die licht, diepte, beweging, materiaal en schaal bevat. Verbonden animatie is een Fluent Design System-onderdeel dat beweging toevoegt aan uw app. Zie Ontwerp voor Windows-apps voor meer informatie.

Waarom verbonden animatie?

Wanneer u tussen pagina's navigeert, is het belangrijk dat de gebruiker begrijpt welke nieuwe inhoud wordt weergegeven na de navigatie en hoe deze zich verhoudt tot hun intentie bij het navigeren. Verbonden animaties bieden een krachtige visuele metafoor die de relatie tussen twee weergaven benadrukt door de focus van de gebruiker te vestigen op de inhoud die ertussen wordt gedeeld. Bovendien voegen verbonden animaties visuele interesse en professioneel toe aan paginanavigatie waarmee u het bewegingsontwerp van uw app kunt onderscheiden.

Wanneer gebruikt u verbonden animaties?

Verbonden animaties worden over het algemeen gebruikt bij het wijzigen van pagina's, hoewel ze kunnen worden toegepast op elke ervaring waarbij u inhoud in een gebruikersinterface wijzigt en de gebruiker context wilt behouden. Overweeg het gebruik van een verbonden animatie in plaats van een navigatieovergang wanneer er een afbeelding of een ander deel van de gebruikersinterface wordt gedeeld tussen de bron- en doelweergaven.

Verbonden animatie configureren

Verbonden animaties zijn verder voorzien van Fluent Design door animatieconfiguraties te bieden die speciaal zijn afgestemd op navigatie op voor- en achterwaartse pagina's.

U geeft een animatieconfiguratie op door de eigenschap Configuratie in te stellen op connectedanimation. (In de volgende sectie ziet u voorbeelden hiervan.)

In deze tabel worden de beschikbare configuraties beschreven. Zie Directionality and gravity (Directionality and gravity) voor meer informatie over de bewegingsprincipes die in deze animaties worden toegepast.

GravityConnectedAnimationConfiguration
Dit is de standaardconfiguratie en wordt aanbevolen voor doorstuurnavigatie.
Wanneer de gebruiker vooruit navigeert in de app (A naar B), lijkt het verbonden element fysiek 'van de pagina te halen'. Als u dit doet, lijkt het element vooruit te gaan in z-ruimte en daalt een beetje als een effect van de zwaartekracht die in bewaring neemt. Om de effecten van de zwaartekracht te overwinnen, wint het element snelheid en versnelt het in zijn uiteindelijke positie. Het resultaat is een animatie voor schalen en dipen.
DirectConnectedAnimationConfiguration
Naarmate de gebruiker achteruit navigeert in de app (B naar A), is de animatie directer. Het verbonden element vertaalt lineair van B naar A met behulp van een afremmende kubieke Bezier-versoepelingsfunctie. De visuele achterwaartse betaalbaarheid retourneert de gebruiker zo snel mogelijk naar de vorige status, terwijl de context van de navigatiestroom behouden blijft.
BasicConnectedAnimationConfiguration
Dit is de standaardanimatie (en alleen) die wordt gebruikt in versies vóór Windows 10, versie 1809 (SDK 17763).

Configuratie connectedAnimationService

De klasse ConnectedAnimationService heeft twee eigenschappen die van toepassing zijn op de afzonderlijke animaties in plaats van de algehele service.

Om de verschillende effecten te bereiken, negeren sommige configuraties deze eigenschappen op ConnectedAnimationService en gebruiken ze in plaats daarvan hun eigen waarden, zoals beschreven in deze tabel.

Configuratie Respecteert DefaultDuration? Respecteert DefaultEasingFunction?
Zwaartekracht Yes Ja*
* De basisomzetting van A naar B maakt gebruik van deze versoepelingsfunctie, maar de 'zwaartekrachtdip' heeft een eigen versoepelingsfunctie.
Onmiddellijk Nee
Animaties van meer dan 150 ms.		 Nee
Maakt gebruik van de functie Voor vertragen van easing.
Eenvoudig Yes Yes

Verbonden animatie implementeren

Het instellen van een verbonden animatie omvat twee stappen:

  1. Bereid een animatieobject voor op de bronpagina, wat aangeeft aan het systeem dat het bronelement deelneemt aan de verbonden animatie.
  2. Start de animatie op de doelpagina en geef een verwijzing door naar het doelelement.

Wanneer u vanaf de bronpagina navigeert, roept u ConnectedAnimationService.GetForCurrentView aan om een exemplaar van ConnectedAnimationService op te halen. Als u een animatie wilt voorbereiden, roept u PrepareToAnimate aan op dit exemplaar en geeft u een unieke sleutel en het UI-element door dat u in de overgang wilt gebruiken. Met de unieke sleutel kunt u de animatie later ophalen op de doelpagina.

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

Wanneer de navigatie plaatsvindt, start u de animatie op de doelpagina. Als u de animatie wilt starten, roept u ConnectedAnimation.TryStart aan. U kunt het juiste animatie-exemplaar ophalen door ConnectedAnimationService.GetAnimation aan te roepen met de unieke sleutel die u hebt opgegeven bij het maken van de animatie.

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

Navigatie doorsturen

In dit voorbeeld ziet u hoe u ConnectedAnimationService gebruikt om een overgang te maken voor voorwaartse navigatie tussen twee pagina's (Page_A naar Page_B).

De aanbevolen animatieconfiguratie voor voorwaartse navigatie is GravityConnectedAnimationConfiguration. Dit is de standaardinstelling, dus u hoeft de eigenschap Configuratie niet in te stellen, tenzij u een andere configuratie wilt opgeven.

Stel de animatie in op de bronpagina.

<!-- 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 de animatie op de doelpagina.

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

Navigatie terug

Voor backnavigatie (Page_B om te Page_A), volgt u dezelfde stappen, maar de bron- en doelpagina's worden omgekeerd.

Wanneer de gebruiker terug navigeert, verwacht de gebruiker dat de app zo snel mogelijk wordt teruggezet naar de vorige status. Daarom is de aanbevolen configuratie DirectConnectedAnimationConfiguration. Deze animatie is sneller, directer en maakt gebruik van de afremmende versoepeling.

Stel de animatie in op de bronpagina.

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

Start de animatie op de doelpagina.

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

Tussen de tijd dat de animatie is ingesteld en wanneer deze wordt gestart, wordt het bronelement boven andere gebruikersinterface in de app geblokkeerd. Hiermee kunt u eventuele andere overgangsanimaties tegelijk uitvoeren. Daarom moet u niet meer dan ~250 milliseconden tussen de twee stappen wachten, omdat de aanwezigheid van het bronelement afleidend kan worden. Als u een animatie voorbereidt en deze niet binnen drie seconden start, zal het systeem de animatie verwijderen en eventuele volgende aanroepen naar TryStart mislukken.

Verbonden animatie in lijst- en rasterervaringen

Vaak wilt u een verbonden animatie maken van of naar een lijst- of rasterbesturing. U kunt de twee methoden in ListView en GridView, PrepareConnectedAnimation en TryStartConnectedAnimationAsync gebruiken om dit proces te vereenvoudigen.

Stel dat u een ListView hebt die een element bevat met de naam 'PortraitEllipse' in de gegevenssjabloon.

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

Als u een verbonden animatie wilt voorbereiden met het beletselteken dat overeenkomt met een bepaald lijstitem, roept u de methode PrepareConnectedAnimation aan met een unieke sleutel, het item en de naam 'PortraitEllipse'.

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

Gebruik TryStartConnectedAnimationAsync om een animatie te starten met dit element als doel, bijvoorbeeld wanneer u terug navigeert vanuit een detailweergave. Als u zojuist de gegevensbron voor ListView hebt geladen, wacht TryStartConnectedAnimationAsync totdat de bijbehorende itemcontainer is gemaakt.

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

Gecoördineerde animatie

Gecoördineerde animatie

Een gecoördineerde animatie is een speciaal type beginanimatie waarbij een element samen met het verbonden animatiedoel wordt weergegeven, waarbij animaties worden weergegeven in combinatie met het verbonden animatie-element terwijl het over het scherm wordt verplaatst. Gecoördineerde animaties kunnen meer visuele interesse toevoegen aan een overgang en de aandacht van de gebruiker verder vestigen op de context die wordt gedeeld tussen de bron- en doelweergaven. In deze afbeeldingen krijgt de bijschriftgebruikersinterface voor het item een animatie met een gecoördineerde animatie.

Wanneer een gecoördineerde animatie gebruikmaakt van de zwaartekrachtconfiguratie, wordt de zwaartekracht toegepast op zowel het verbonden animatie-element als de gecoördineerde elementen. De gecoördineerde elementen worden naast het verbonden element "gezwollen" zodat de elementen echt gecoördineerd blijven.

Gebruik de overbelasting van twee parameters van TryStart om gecoördineerde elementen toe te voegen aan een verbonden animatie. In dit voorbeeld ziet u een gecoördineerde animatie van een rasterindeling met de naam DescriptionRoot, die samen met een verbonden animatie-element met de naam 'CoverImage' wordt ingevoerd.

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

Aanbevelingen

  • Gebruik een verbonden animatie in paginaovergangen waarbij een element wordt gedeeld tussen de bron- en doelpagina's.
  • Gebruik GravityConnectedAnimationConfiguration voor voorwaartse navigatie.
  • Gebruik DirectConnectedAnimationConfiguration voor back-navigatie.
  • Wacht niet op netwerkaanvragen of andere langlopende asynchrone bewerkingen tussen het voorbereiden en starten van een verbonden animatie. Mogelijk moet u de benodigde informatie vooraf laden om de overgang van tevoren uit te voeren, of een tijdelijke aanduiding voor een tijdelijke aanduiding voor lage resolutie gebruiken terwijl een afbeelding met een hoge resolutie in de doelweergave wordt geladen.
  • Gebruik SuppressNavigationTransitionInfo om een overgangsanimatie in een frame te voorkomen als u ConnectedAnimationService gebruikt, omdat verbonden animaties niet tegelijkertijd met de standaardnavigatieovergangen moeten worden gebruikt. Zie NavigationThemeTransition voor meer informatie over het gebruik van navigatieovergangen.

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

ConnectedAnimation

ConnectedAnimationService

NavigationThemeTransition

  • Last updated on