Dela via

Föra ihop allt

Timing, avkoppling, riktning och gravitation arbetar tillsammans för att bilda grunden för Fluent-rörelse. Var och en måste beaktas i kontexten för de andra och tillämpas på lämpligt sätt i kontexten för din app.

Här är tre sätt att tillämpa grunderna för Fluent-rörelse i din app.

  • Implicit animering
    Automatisk interpolering och tidsinställning mellan värden i en parameterändring för att uppnå mycket enkel Fluent-rörelse med hjälp av de standardiserade värdena.
  • Inbyggd animering
    Systemkomponenter, till exempel vanliga kontroller och delade rörelser, är "Fluent som standard". Grunderna har tillämpats på ett sätt som överensstämmer med deras underförstådda användning.
  • Anpassad animering efter vägledningsrekommendationer
    Det kan finnas tillfällen då systemet ännu inte tillhandahåller en exakt rörelselösning för ditt scenario. I dessa fall använder du grundläggande rekommendationer som utgångspunkt för dina erfarenheter.

Övergångsexempel

funktionell animering

Riktning framåt:
Tona ut: 150 m; Acceleration: Standard Riktning Framåt In:
Dra upp 150px: 300ms; Lättnader: Standarddeval

Riktning bakåt ut:
Skjut ned 150px: 150ms; Tidsfördröjning: Standardaccelerering Inledning med riktning bakåt:
Tona in: 300 ms; Lättnad: Standard avtrappning

Objektexempel

Rörelse på 300 ms

Expandera riktning:
Växa: 300 ms; Lindring: Standard

Riktningskontrakt:
Växa: 150 ms; Lättnader: Standard accelerera

Exempel

Öppna WinUI 3-galleriappen och se Implicita övergångar i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

Implicita animeringar

Implicita animeringar är ett enkelt sätt att uppnå Fluent-rörelse genom att automatiskt interpolera mellan de gamla och nya värdena under en parameterändring.

Du kan implicit animera ändringar i följande egenskaper:

Varje egenskap som kan ha implicit animerade ändringar har en motsvarande övergångsegenskap. Om du vill animera egenskapen tilldelar du en övergångstyp till motsvarande övergångsegenskap . Den här tabellen visar övergångsegenskaperna och övergångstypen som ska användas för var och en.

Animerad egenskap Övergångsegenskap Implicit övergångstyp
UIElement.Opacitet OpacitetÖvergång SkalärÖvergång
UIElement.Rotation RotationÖvergång SkalärÖvergång
UIElement.Scale (på engelska) ScaleTransition (ScaleTransition) Vector3Transition (på engelska)
UIElement.Översättning ÖversättningÖvergång Vector3Transition (på engelska)
Gräns.Bakgrund BakgrundÖvergång PenselÖvergång
ContentPresenter.Bakgrund BakgrundÖvergång PenselÖvergång
Panel.Bakgrund BakgrundÖvergång PenselÖvergång

Det här exemplet visar hur du använder egenskapen Opacity och övergången för att få en knapp att tona in när kontrollen är aktiverad och tonas ut när den är inaktiverad.

<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 och WinUI 2

Viktigt!

Informationen och exemplen i den här artikeln är optimerade för appar som använder Windows App SDK och WinUI 3, men som är allmänt tillämpliga för UWP-appar som använder WinUI 2. Se UWP API-referensen för plattformsspecifik information och exempel.

Det här avsnittet innehåller information som du behöver för att använda kontrollen i en UWP- eller WinUI 2-app.

Implicita animeringar kräver Windows 10, version 1809 (SDK 17763) eller senare.