Partager via

Rassembler

Le minutage, l’accélération, la direction et la gravité fonctionnent 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
    Tween et minutage automatiques entre les valeurs d’un changement de paramètre pour obtenir un mouvement Fluent très simple à 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

Exemples

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

L’application Galerie WinUI 3 inclut des exemples interactifs de la plupart des contrôles, fonctionnalités et fonctionnalités WinUI 3. Téléchargez l’application depuis le Microsoft Store ou obtenez le code source sur GitHub

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.

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é Transition Type de transition implicite
UIElement.Opacity TransitionD'opacité ScalarTransition
UIElement.Rotation RotationTransition ScalarTransition
UIElement.Scale ScaleTransition Vector3Transition
UIElement.Traduction TraductionTransition Vector3Transition
Bordure.Contexte BackgroundTransition BrushTransition
ContentPresenter.Background BackgroundTransition BrushTransition
Panel.Background BackgroundTransition BrushTransition

Cet exemple montre comment utiliser la propriété Opacity et la transition pour rendre un bouton fondu lorsque le contrôle est activé et s’efface 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;
}

UWP et WinUI 2

Important

Les informations et les exemples de cet article sont optimisés pour les applications qui utilisent le SDK d’application Windows et WinUI 3, mais sont généralement applicables aux applications UWP qui utilisent WinUI 2. Consultez la référence API de la plateforme Windows universelle pour obtenir des informations et des exemples spécifiques à la plateforme.

Cette section contient les informations dont vous avez besoin pour utiliser le contrôle dans une application de la plateforme Windows universelle ou de WinUI 2.

Les animations implicites nécessitent Windows 10, version 1809 (SDK 17763) ou ultérieure.