Megosztás a következőn keresztül:

Összekapcsolás

Az időzítés, a lazítás, az irány és a gravitáció együtt alkotja a Fluent mozgás alapjait. Mindegyiknek a többi kontextusban kell figyelembe vennie, és megfelelően kell alkalmaznia az alkalmazás kontextusában.

Az alábbiakban háromféleképpen alkalmazhatja a Fluent-mozgás alapjait az alkalmazásban.

  • Implicit animáció
    Automatikus átmenetek és időzítés az értékek között egy paramétermódosítás során, hogy könnyen elérje a sima mozgást a szabványosított értékekkel.
  • Beépített animáció
    A rendszerösszetevők, például a közös vezérlők és a megosztott mozgások alapértelmezés szerint "Fluent" típusúak. Az alapokat a vélelmezett használatukkal összhangban alkalmazták.
  • Egyéni animáció útmutatási javaslatok alapján
    Előfordulhat, hogy a rendszer még nem biztosít pontos mozgásmegoldást az Ön forgatókönyvéhez. Ezekben az esetekben használja az alapszintű javaslatokat a tapasztalatok kiindulópontjaként.

Áttűnés példája

funkcionális animáció

Irány előrefelé:
Elhalványul: 150m; Alapértelmezett gyorsítás: irány Előre Be:
Csúszás fel 150px: 300 ms; Simítás: Alapértelmezett Lassítás

Irány hátrafelé:
Lefelé csúszás 150px: 150 ms; Enyhítés: Alapértelmezett gyorsítás irány visszafelé:
Befakulás: 300ms; Enyhítés: Alapértelmezett lassítás

Objektum példa

300 ms mozgás

Iránybővítés:
Növekedés: 300ms; Enyhítés: Standard

Irányszerződés:
Növekedés: 150ms; Enyhítés: Alapértelmezett gyorsítás

Példák

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

A WinUI 3 Gallery alkalmazás interaktív példákat tartalmaz a legtöbb WinUI 3 vezérlőelemre, funkcióra és szolgáltatásra. Szerezd meg az alkalmazást a Microsoft Store-ból , vagy a forráskódot a GitHubról .

Implicit animációk

Az implicit animációk egyszerű módot jelentenek a Fluent-mozgás elérésére azáltal, hogy automatikusan interpolálják a régi és az új értékeket egy paraméterváltozás során.

A következő tulajdonságok módosításait implicit módon animálhatja:

Minden olyan tulajdonság, amelynek módosításai implicit módon animálhatók, rendelkezik egy megfelelő áttűnési tulajdonsággal. A tulajdonság animálásához az áttűnés típusát hozzárendelhetjük a megfelelő áttűnés tulajdonsághoz. Ez a táblázat az átmenet tulajdonságait és az erre alkalmazandó átmenet típusát mutatja be.

Animált tulajdonság Áttűnési tulajdonság Implicit átmenet típusa
UIElement.Átlátszatlanság OpacityTransition (áttetsző átmenet) Skaláristranszíció
UIElem.Rotáció Rotációs átmenet Skaláristranszíció
UIElement.Scale Léptéki átmenet Vektor3 átmenet
UIElem.Translate Fordítási átmenet Vektor3 átmenet
Border.Háttér Háttér átmenet BrushTransition
ContentPresenter.Háttér Háttér átmenet BrushTransition
Panel.Háttér Háttér átmenet BrushTransition

Ez a példa bemutatja, hogyan használhatja az Opacity tulajdonságot és az átmenetet arra, hogy egy gomb halványan megjelenjen, amikor a vezérlő engedélyezve van, és elhalványuljon, amikor le van tiltva.

<Button x:Name="SubmitButton"
        Content="Submit"
        Opacity="{x:Bind OpaqueIfEnabled(SubmitButton.IsEnabled), Mode=OneWay}">
    <Button.OpacityTransition>
        <ScalarTransition />
    </Button.OpacityTransition>
</Button>

public double OpaqueIfEnabled(bool IsEnabled)
{
    return IsEnabled ? 1.0 : 0.2;
}

UWP és WinUI 2

Fontos

A cikkben szereplő információk és példák a Windows App SDK és a WinUI 3használó alkalmazásokra vannak optimalizálva, de általánosan alkalmazhatók a WinUI 2használó UWP-alkalmazásokra. A platformspecifikus információkért és példákért tekintse meg az UWP API-referenciát.

Ez a szakasz az UWP- vagy WinUI 2-alkalmazások vezérlőjének használatához szükséges információkat tartalmazza.

Az implicit animációkhoz a Windows 10 1809-es (SDK 17763-as) vagy újabb verziója szükséges.