Sdílet prostřednictvím

Animace v aplikaci Windows

Časování, usnadnění, směrovost a závažnost společně tvoří základ fluentového pohybu. Každý z nich se musí zvážit v kontextu ostatních a použít je odpovídajícím způsobem v kontextu vaší aplikace.

Tady jsou 3 způsoby použití základů pohybu Fluent ve vaší aplikaci.

  • Implicitní animace
    Automatické prokládání a načasování mezi hodnotami při změně parametrů k dosažení velmi jednoduchého plynulého pohybu pomocí standardizovaných hodnot.
  • Integrovaná animace
    Systémové komponenty, jako jsou běžné ovládací prvky a sdílený pohyb, jsou ve výchozím nastavení fluent. Základy byly použity způsobem, který je konzistentní s jejich implicitním využitím.
  • Vlastní animace podle doporučeného vedení
    Může docházet k situacím, kdy systém zatím neposkytuje přesné řešení pohybu pro váš scénář. V těchto případech použijte základní základní doporučení jako výchozí bod pro vaše zkušenosti.

Příklad přechodu

funkční animace

směr vpřed:
Vyblednutí: 150 m; Usnadnění: Výchozí zrychlení směru vpřed:
Posunutí nahoru o 150 pixelů: 300 ms; Uvolnění: základní zpomalení

Směr dozadu ven:
Posunutí dolů o 150 pixelů: 150 ms; Usnadnění: výchozí zrychlení směr dozadu:
Prolnutí: 300 ms; Easing: Výchozí zpomalení (Default Decelerate)

Příklad objektu

300 ms pohybu

směr rozbalit:
Růst: 300 ms; Zpomalení: Standard

Smlouva o směru :
Růst: 150 ms; Zmírnění: Standardní zrychlení

Implicitní animace

Implicitní animace představují jednoduchý způsob, jak dosáhnout fluent pohybu automatickou interpolací mezi starými a novými hodnotami během změny parametru.

  • Důležitá rozhraní API:Windows.UI.Xaml.Media.Animation Namespace, Windows.UI.Xaml.Controls – obor názvů

Otevřete aplikaci Galerie WinUI 3 a podívejte se na implicitní přechody v akci.

Ikona galerie WinUI 3 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.

Změny můžete implicitně animovat na následující vlastnosti:

  • UIElement

    • neprůhlednost
    • Otočení
    • Scale
    • Překlad

  • Rámeček, Zobrazovač obsahu, nebo Panel

    • Pozadí

Každá vlastnost, která může mít změny animované implicitně, má odpovídající vlastnost přechodu . Chcete-li animovat vlastnost, přiřadíte typ přechodu k odpovídající vlastnosti přechodu . Tato tabulka zobrazuje přechod vlastnosti a typ přechodu, který se má použít pro každý případ.

Animovaná vlastnost Vlastnost přechodu Typ implicitního přechodu
UIElement.Opacity Přechod průhlednosti Skalární přechod
UIElement.Rotation RotacePřechod Skalární přechod
UIElement.Měřítko Přechod měřítka Vector3Transition
Překlad UIElement Překlad Přechod Vector3Transition
Border.Background PřechodPozadí ŠtětecTransition
ContentPresenter.Background PřechodPozadí ŠtětecTransition
Pozadí panelu PřechodPozadí ŠtětecTransition

Tento příklad ukazuje, jak použít vlastnost Průhlednost a přechod k tomu, aby se tlačítko objevilo, když je ovládací prvek zaktivován, a zmizelo, když je deaktivován.

<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;
}
  • Přehled pohybu
  • časování a usnadnění
  • směrovost a závažnost
  • Last updated on