Partager via

Animations dans Windows app

La synchronisation, la facilitation, la direction et la gravité travaillent ensemble pour former la base du mouvement Fluent. Chacun doit être pris en compte dans le contexte des autres et appliqué correctement dans le contexte de votre application.

Voici 3 façons d’appliquer les principes fondamentaux du mouvement Fluent dans votre application.

  • Animation implicite
    Automatisation du tween et de la synchronisation entre les valeurs lors d'un changement de paramètre pour obtenir un mouvement très fluide à l'aide des valeurs standardisées.
  • Animation intégrée
    Les composants système, tels que les contrôles communs et le mouvement partagé, sont « Fluent par défaut ». Les principes fondamentaux ont été appliqués de manière cohérente avec leur utilisation implicite.
  • Animation personnalisée suivant les recommandations d’aide
    Il peut arriver que le système ne fournisse pas encore de solution de mouvement exacte pour votre scénario. Dans ce cas, utilisez les recommandations fondamentales de base de référence comme point de départ pour vos expériences.

Exemple de transition

animation fonctionnelle

Direction vers l’avant :
Fermeture en fondu : 150m ; Accélération : Accélération par défaut Direction vers l’avant en entrée :
Faites glisser jusqu’à 150 px : 300 ms ; Accélération : décélération par défaut

Direction vers l’arrière en sortie :
Faire glisser vers le bas 150 px : 150 ms ; Accélération : Accélération par défaut Direction vers l’arrière en entrée :
Fondu en : 300 ms ; Accélération : décélération par défaut

Exemple d’objet

Mouvement de 300 ms

Direction – Développer :
Croissance : 300 ms ; Accélération : Standard

Contrat de direction :
Croissance : 150 ms ; Accélération : Accélération par défaut

Animations implicites

Les animations implicites sont un moyen simple d’atteindre le mouvement Fluent en interpolant automatiquement entre les anciennes et nouvelles valeurs pendant une modification de paramètre.

Ouvrez l’application galerie WinUI 3 et consultez les transitions implicites en action

Icône galerie WinUI 3 L’application Galerie WinUI 3 inclut des exemples interactifs de contrôles et de fonctionnalités WinUI. Obtenez l’application à partir du Microsoft Store ou parcourez le code source sur GitHub.

Vous pouvez animer implicitement les modifications apportées aux propriétés suivantes :

Chaque propriété pouvant avoir des modifications implicitement animées a une propriété de transition correspondante . Pour animer la propriété, vous assignez un type de transition à la transition correspondante de la propriété . Ce tableau présente les propriétés de transition et le type de transition à utiliser pour chacune d'elles.

Propriété animée Propriété de transition Type de transition implicite
UIElement.Opacity TransitionD'opacité ScalarTransition
UIElement.Rotation RotationTransition ScalarTransition
UIElement.Scale ScaleTransition Vector3Transition
UIElement.Translation TranslationTransition Vector3Transition
Bordure.Contexte BackgroundTransition BrushTransition
ContentPresenter.Background BackgroundTransition BrushTransition
Fond du panneau (Panel.Background) BackgroundTransition BrushTransition

Cet exemple montre comment utiliser la propriété Opacity et la transition pour faire apparaître progressivement un bouton lorsque le contrôle est activé et disparaître progressivement lorsqu’il est désactivé.

<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