Animaties in de Windows-app

Timing, easing, directionaliteit en zwaartekracht werken samen om de basis te vormen van Fluent Motion. Elk moet in de context van de andere worden overwogen en op de juiste wijze worden toegepast in de context van uw app.

Hier volgen drie manieren om de basisprincipes van Fluent Motion toe te passen in uw app.

• Impliciete animatie
  Automatische tussentijdse interpolatie en timing tussen waarden in een parameterwijziging om zeer eenvoudige vloeiende beweging te bereiken met behulp van de gestandaardiseerde waarden.
• Ingebouwde animatie
  Systeemonderdelen, zoals standaardbesturingselementen en bewegingsdeling, zijn 'Fluent als standaard'. Grondbeginselen zijn op een manier toegepast die consistent is met hun impliciete gebruik.
• Aangepaste animatie volgens aanbevelingen voor richtlijnen
  Soms biedt het systeem nog geen exacte bewegingsoplossing voor uw scenario. Gebruik in die gevallen de basisaanbevelingen als uitgangspunt voor uw toepassingen.

Voorbeeld van overgang

Voorbeeld van object

Impliciete animaties

Impliciete animaties zijn een eenvoudige manier om Fluent-beweging te bereiken door automatisch tussen de oude en nieuwe waarden te interpoleren tijdens een parameterwijziging.

De WinUI 3 Gallery-app bevat interactieve voorbeelden van WinUI-besturingselementen en -functies. Haal de app op uit de Microsoft Store of blader door de broncode op GitHub.

U kunt impliciet animatie toepassen op wijzigingen in de volgende eigenschappen:

• UIElement

  • ondoorzichtigheid
  • Rotatie
  • Schaal wijzigen
  • Vertaling

• Rand, ContentPresenter of Paneel

  • Achtergrond

Elke eigenschap die impliciet geanimeerde wijzigingen kan ondergaan, heeft een bijbehorende overgangseigenschap. Als u de eigenschap wilt animeren, wijst u een overgangstype toe aan de bijbehorende overgangseigenschap. In deze tabel ziet u de overgangseigenschappen en het overgangstype dat voor elke tabel moet worden gebruikt.

In dit voorbeeld ziet u hoe u de eigenschap Transparantie en overgangseffect gebruikt om een knop in te faden wanneer ingeschakeld en uit te faden wanneer uitgeschakeld.

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

Verwante artikelen

• Overzicht van de beweging
• Timing en versoepeling
• Directionaliteit en zwaartekracht