Animációk a Windows-alkalmazásban

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

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.

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

WinUI 3 Katalógus ikon 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.

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 Vector3Transition
UIElem.Translate TranslationTransition Vector3Transition
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;
}
  • Last updated on