Animeringar i Windows app

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

Objektexempel

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.

WinUI 3-galleriappen innehåller interaktiva exempel på WinUI-kontroller och funktioner. Hämta appen från Microsoft Store eller bläddra i källkoden på GitHub.

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

• UIElement (på engelska)

  • Ogenomskinlighet
  • Rotation
  • Skala
  • Översättning

• Kantlinje, ContentPresenter eller panel

  • Bakgrund

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.

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

Relaterade artiklar

• Rörelseöversikt
• Tidsinställningar och lättnader
• Riktning och gravitation