Csatlakoztatott animáció Windows-alkalmazásokhoz

A csatlakoztatott animációk segítségével dinamikus és lenyűgöző navigációs élményt hozhat létre egy elem két különböző nézet közötti átmenetének animálásával. Ez segít a felhasználónak fenntartani a környezetét, és folytonosságot biztosít a nézetek között.

A csatlakoztatott animációkban úgy tűnik, hogy egy elem két nézet között "folytatja" a felhasználói felület tartalmának módosítása során, és a forrásnézetben lévő helyétől az új nézetben a célig repül a képernyőn. Ez kiemeli a nézetek közötti közös tartalmat, és egy áttűnés részeként gyönyörű és dinamikus effektust hoz létre.

• Fontos API-k: ConnectedAnimation osztály, ConnectedAnimationService osztály

Nyissa meg a WinUI 3 Galéria alkalmazást, és tekintse meg az implicit áttűnéseket akció közben

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Ebben a rövid videóban egy alkalmazás összekapcsolt animációval animál egy elemképet, miközben az "folytatódik" a következő oldal fejlécének részévé válik. Az effektus segít fenntartani a felhasználói környezetet az átmenet során.

Csatlakoztatott animáció és a Fluent tervezőrendszer

A Fluent Design System segítségével modern, merész felhasználói felületet hozhat létre, amely magában foglalja a fényt, a mélységet, a mozgást, az anyaghasználatot és a méretarányt. A csatlakoztatott animáció egy fluent tervezőrendszer-összetevő, amely mozgást ad hozzá az alkalmazáshoz. További információ: Tervezés Windows-alkalmazásokhoz.

Miért érdemes összekapcsolni az animációt?

Az oldalak közötti navigáláskor fontos, hogy a felhasználó megértse, milyen új tartalom jelenik meg a navigáció után, és hogyan kapcsolódik a navigálás során a szándékukhoz. A csatlakoztatott animációk hatékony vizuális metaforát biztosítanak, amely kiemeli a két nézet közötti kapcsolatot azáltal, hogy a felhasználó fókuszát a közöttük megosztott tartalomra helyezi. Emellett a csatlakoztatott animációk vizuális érdeklődést és polírozást is adnak az oldalnavigációhoz, amely segít megkülönböztetni az alkalmazás mozgástervét.

Mikor érdemes csatlakoztatott animációt használni?

A csatlakoztatott animációk általában a lapok módosításakor használatosak, de bármilyen olyan felületre alkalmazhatók, ahol módosítja a tartalmat a felhasználói felületen, és azt szeretné, hogy a felhasználó fenntartsa a környezetet. Érdemes összekapcsolt animációt használni a navigációs áttűnés részletezése helyett, ha a forrás- és célnézetek között megosztott kép vagy más felhasználói felület van megosztva.

Csatlakoztatott animáció konfigurálása

A csatlakoztatott animációk tovább testesítik a Fluent-kialakítást azáltal, hogy kifejezetten az előre- és hátrafelé irányuló oldalnavigációhoz szabott animációs konfigurációkat biztosítanak.

Az animációs konfigurációt a ConnectedAnimation Konfiguráció tulajdonságának beállításával adhatja meg. (Erre a következő szakaszban mutatunk be példákat.)

Ez a táblázat az elérhető konfigurációkat ismerteti. Az animációkban alkalmazott mozgási alapelvekről további információt az Irány és a gravitáció című témakörben talál.

GravityConnectedAnimationConfiguration

Ez az alapértelmezett konfiguráció, és ajánlott a továbbítási navigációhoz. Ahogy a felhasználó előrehalad az alkalmazásban (A–B), úgy tűnik, hogy a csatlakoztatott elem fizikailag "lekéri az oldalt". Ennek során úgy tűnik, hogy az elem előrehalad a z-térben, és kissé leesik, ahogy a gravitáció hatása érvényesül. A gravitáció hatásainak leküzdése érdekében az elem sebességet nyer, és a végső helyzetébe gyorsul. Az eredmény egy "skálázás és lemerítés" animáció.

DirectConnectedAnimationConfiguration
Ahogy a felhasználó visszafelé navigál az alkalmazásban (B–A), az animáció közvetlenebb. A csatlakoztatott elem lineárisan átalakul B és A között, egy lassító kocka alakzatú Bezier simító függvény használatával. A vizuális funkció visszaviszi a felhasználót a korábbi állapotába a lehető leggyorsabban, miközben továbbra is fenntartja a navigáció kontextusát.

BasicConnectedAnimationConfiguration
Ez az alapértelmezett (és csak) animáció az Windows 10 1809-es verzió előtti verziókban (SDK 17763).

ConnectedAnimationService konfigurálása

A ConnectedAnimationService osztály két tulajdonsággal rendelkezik, amelyek az egyes animációkra vonatkoznak a teljes szolgáltatás helyett.

• DefaultDuration
• DefaultEasingFunction

A különböző hatások elérése érdekében egyes konfigurációk figyelmen kívül hagyják ezeket a tulajdonságokat a ConnectedAnimationService szolgáltatásban, és ehelyett a saját értékeiket használják a táblázatban leírtak szerint.

Konfiguráció	Tiszteletben tartja a DefaultDuration-t?	Tiszteletben tartja a DefaultEasingFunctiont?
Gravitáció	Igen	Igen* * Az A-tól B-ig történő alapátmenet ezt a kisimító függvényt használja, de a "gravitációs behorpadás" saját kisimító függvénnyel rendelkezik.
Közvetlen	Nem Több mint 150 ms animálást ad.	Nem A Decelerate lassító függvényt használja.
Alapszintű	Igen	Igen

Csatlakoztatott animáció implementálása

A csatlakoztatott animáció beállítása két lépésből áll:

1. Készítsen elő egy animációs objektumot a forráslapon, amely jelzi a rendszernek, hogy a forráselem részt vesz a csatlakoztatott animációban.
2. Indítsa el az animációt a céloldalon, és adjon át egy hivatkozást a célelemnek.

A forráslapról való navigáláskor hívja meg a ConnectedAnimationService.GetForCurrentView parancsot a ConnectedAnimationService egy példányának lekéréséhez. Animáció előkészítéséhez hívja meg a PrepareToAnimate parancsot ezen a példányon, és adjon meg egy egyedi kulcsot és az áttűnésben használni kívánt felhasználói felületi elemet. Az egyedi kulccsal később lekérheti az animációt a céloldalon.

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

A navigáció során indítsa el az animációt a céllapon. Az animáció elindításához hívja meg a ConnectedAnimation.TryStart parancsot. A megfelelő animációs példány lekéréséhez hívja meg a ConnectedAnimationService.GetAnimation szolgáltatást az animáció létrehozásakor megadott egyedi kulccsal.

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

Előre navigálás

Ez a példa bemutatja, hogyan hozhat létre áttűnéseket a ConnectedAnimationService használatával a két oldal közötti (Page_A és Page_B közötti navigáláshoz).

Az előrehaladt navigációhoz ajánlott animációs konfiguráció a GravityConnectedAnimationConfiguration. Ez az alapértelmezett beállítás, ezért csak akkor kell beállítania a Konfiguráció tulajdonságot, ha más konfigurációt szeretne megadni.

Állítsa be az animációt a forráslapon.

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

Indítsa el az animációt a céllapon.

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

Háttérnavigáció

A visszanavigációhoz (Page_B Page_A) ugyanazokat a lépéseket kell követnie, de a forrás- és céloldalak fordítottak.

Amikor a felhasználó visszalép, elvárják, hogy az alkalmazás a lehető leghamarabb visszakerüljön az előző állapotba. Ezért az ajánlott konfiguráció a DirectConnectedAnimationConfiguration. Ez az animáció gyorsabb, közvetlenebb, és lassító könnyítést használ.

Állítsa be az animációt a forráslapon.

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

Indítsa el az animációt a céllapon.

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

Az animáció beállítása és elindítása között a forráselem az alkalmazás többi UI-eleme felett lefagyva jelenik meg. Ez lehetővé teszi bármely más áttűnési animáció egyidejű végrehajtását. Ezért nem szabad ~250 ezredmásodpercnél többet várnia a két lépés között, mert a forráselem jelenléte zavaróvá válhat. Ha előkészít egy animációt, és nem indítja el három másodpercen belül, a rendszer törli az animációt, és a TryStartra irányuló további hívások sikertelenek lesznek.

Csatlakoztatott animáció listákban és rácsokban

Gyakran szeretne összekapcsolt animációt létrehozni egy lista vagy rács vezérlőelem segítségével. A folyamat leegyszerűsítéséhez használhatja a ListView és a GridView, a PrepareConnectedAnimation és a TryStartConnectedAnimationAsync két metódusát.

Tegyük fel például, hogy van egy ListView , amely egy "PortraitEllipse" nevű elemet tartalmaz az adatsablonban.

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

Ha egy csatlakoztatott animációt szeretne előkészíteni egy adott listaelemhez tartozó ellipszis formájával, hívja meg a PrepareConnectedAnimation metódust egy egyedi kulccsal, a listaelemmel és a "PortraitEllipse" névvel.

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

Ha ezt az elemet szeretné célként használni, például ha vissza szeretne navigálni egy részletnézetből, használja a TryStartConnectedAnimationAsync parancsot. Ha most töltötte be a ListView adatforrását, a TryStartConnectedAnimationAsync megvárja az animáció elindítását, amíg a megfelelő elemtároló létre nem jön.

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

Koordinált animáció

A koordinált animáció egy speciális típusú bejárati animáció, ahol egy elem jelenik meg a csatlakoztatott animációs cél mellett, a csatlakoztatott animációs elemmel párhuzamosan animálva, miközben a képernyőn mozog. Az összehangolt animációk nagyobb vizuális érdeklődést adhatnak az áttűnésekhez, és tovább felhívhatják a felhasználó figyelmét a forrás- és célnézetek között megosztott környezetre. Ezekben a képekben az elem feliratozási felhasználói felülete egy koordinált animáció használatával animálódik.

Ha egy koordinált animáció a gravitációs konfigurációt használja, a gravitáció a csatlakoztatott animációs elemre és a koordinált elemekre is vonatkozik. A koordinált elemek a csatlakoztatott elem mellett "suhannak", így az elemek teljesen összehangoltak maradnak.

A TryStart kétparaméteres túlterhelésével összehangolt elemeket adhat hozzá egy csatlakoztatott animációhoz. Ez a példa egy "DescriptionRoot" nevű rács elrendezés koordinált animációját mutatja be, amely a "CoverImage" nevű csatlakoztatott animációs elemmel együtt lép be.

<!-- 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

• Használjon csatlakoztatott animációt az olyan lapáttűnésekben, ahol egy elem meg van osztva a forrás- és céloldalak között.
• Használja a GravityConnectedAnimationConfiguration parancsot a továbbítási navigációhoz.
• Használja a DirectConnectedAnimationConfiguration parancsot a háttérnavigációhoz.
• Ne várjon hálózati kérelmekre vagy más, hosszú ideig futó aszinkron műveletekre a csatlakoztatott animáció előkészítése és indítása között. Előfordulhat, hogy előre be kell töltenie a szükséges információkat az átmenet előre történő futtatásához, vagy alacsony felbontású helyőrző lemezképet kell használnia, miközben egy nagy felbontású kép betöltődik a célnézetben.
• A SuppressNavigationTransitionInfo használatával megakadályozhatja, hogy a keretben lévő áttűnés-animációk a ConnectedAnimationService használata esetén ne legyenek áttűnési animációk, mivel a csatlakoztatott animációk nem használhatók egyidejűleg az alapértelmezett navigációs áttűnésekkel. A navigációs áttűnések használatáról további információt a NavigationThemeTransition című témakörben talál.

Kapcsolódó cikkek

ConnectedAnimation

ConnectedAnimationService

NavigationThemeTransition