Partager via

Rassembler

  • Article

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 :
Fondu : 150m ; Accélération : direction d’accélération par défaut vers l’avant :
Faites glisser jusqu’à 150 px : 300 ms ; Accélération : décélération par défaut

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

Exemple d’objet

Mouvement de 300 ms

Développement de direction :
Croissance : 300 ms ; Accélération : Standard

Contrat 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 WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou 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 affectez un type de transition à la propriété de transition correspondante. Ce tableau présente les propriétés de transition et le type de transition à utiliser pour chacun d’eux.

Propriété animée Propriété Transition Type de transition implicite
UIElement.Opacity OpacityTransition ScalarTransition
UIElement.Rotation RotationTransition ScalarTransition
UIElement.Scale ScaleTransition Vector3Transition
UIElement.Translation TranslationTransition Vector3Transition
Border.Background 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 qui s’appliquent généralement 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.