Animation personnalisée

La classe .NET Multiplateform App UI (.NET MAUI) Animation est le bloc de construction de toutes les animations .NET MAUI, avec les méthodes d’extension de la ViewExtensions classe créant un ou plusieurs Animation objets.

Un certain nombre de paramètres doivent être spécifiés lors de la création d’un Animation objet, y compris les valeurs de début et de fin de la propriété animée, et un rappel qui modifie la valeur de la propriété. Un Animation objet peut également gérer une collection d’animations enfants qui peuvent être exécutées et synchronisées. Pour plus d’informations, consultez animations enfants.

L’exécution d’une animation créée avec la Animation classe, qui peut ou non inclure des animations enfants, est obtenue en appelant la Commit méthode. Cette méthode spécifie la durée de l’animation, et entre autres éléments, un rappel qui contrôle s’il faut répéter l’animation.

Remarque

La Animation classe a une IsEnabled propriété qui peut être examinée pour déterminer si les animations ont été désactivées par le système d’exploitation, par exemple lorsque le mode d’économie d’alimentation est activé.

Sur Android, les animations respectent les paramètres d’animation système :

• Si les animations du système sont désactivées (par des fonctionnalités d’accessibilité ou des fonctionnalités de développement), les nouvelles animations passent immédiatement à leur état terminé.
• Si le mode d’économie d’alimentation de l’appareil est activé pendant que les animations sont en cours, les animations passent immédiatement à leur état terminé.
• Si les durées d’animation de l’appareil sont définies sur zéro (désactivée) alors que les animations sont en cours et que la version de l’API est 33 ou ultérieure, les animations passent immédiatement à leur état terminé.

Créer une animation

Lors de la création d’un Animation objet, généralement, un minimum de trois paramètres sont requis, comme illustré dans l’exemple de code suivant :

var animation = new Animation(v => image.Scale = v, 1, 2);

Dans cet exemple, une animation de la Scale propriété d’une Image instance est définie d’une valeur de 1 à une valeur de 2. La valeur animée est passée au rappel spécifié comme premier argument, où il est utilisé pour modifier la valeur de la Scale propriété.

L’animation est démarrée avec un appel à la Commit méthode :

animation.Commit(this, "SimpleAnimation", 16, 2000, Easing.Linear, (v, c) => image.Scale = 1, () => true);

Remarque

La Commit méthode ne retourne pas d’objet Task . Au lieu de cela, les notifications sont fournies par le biais de méthodes de rappel.

Les arguments suivants sont spécifiés dans la Commit méthode :

• Le premier argument (owner) identifie le propriétaire de l’animation. Il peut s’agir de l’élément visuel sur lequel l’animation est appliquée ou un autre élément visuel, tel que la page.
• Le deuxième argument (name) identifie l’animation avec un nom. Le nom est combiné avec le propriétaire pour identifier de manière unique l’animation. Cette identification unique peut ensuite être utilisée pour déterminer si l’animation est en cours d’exécution (AnimationIsRunning) ou pour l’annuler (AbortAnimation).
• Le troisième argument (rate) indique le nombre de millisecondes entre chaque appel à la méthode de rappel définie dans le Animation constructeur.
• Le quatrième argument (length) indique la durée de l’animation, en millisecondes.
• Le cinquième argument (Easing) définit la fonction d’accélération à utiliser dans l’animation. Vous pouvez également spécifier la fonction d’accélération en tant qu’argument du Animation constructeur. Pour plus d’informations sur les fonctions d’accélération, consultez Fonctions d’accélération.
• Le sixième argument (finished) est un rappel qui sera exécuté une fois l’animation terminée. Ce rappel prend deux arguments, avec le premier argument indiquant une valeur finale, et le deuxième argument étant un bool argument défini true si l’animation a été annulée. Vous pouvez également spécifier le finished rappel en tant qu’argument du Animation constructeur. Toutefois, avec une seule animation, si finished les rappels sont spécifiés dans le Animation constructeur et dans la Commit méthode, seul le rappel spécifié dans la Commit méthode sera exécuté.
• Le septième argument (repeat) est un rappel qui permet à l’animation d’être répétée. Elle est appelée à la fin de l’animation et indique true que l’animation doit être répétée.

Dans l’exemple ci-dessus, l’effet global consiste à créer une animation qui augmente la Scale propriété d’une Image instance de 1 à 2, sur 2 secondes (2 000 millisecondes), à l’aide de la Linear fonction d’accélération. Chaque fois que l’animation est terminée, sa Scale propriété est réinitialisée à 1 et l’animation se répète.

Remarque

Les animations simultanées qui s’exécutent indépendamment les unes des autres peuvent être construites en créant un Animation objet pour chaque animation, puis en appelant la Commit méthode sur chaque animation.

Animations enfants

La Animation classe prend également en charge les animations enfants, qui sont Animation des objets auxquels d’autres Animation objets sont ajoutés en tant qu’enfants. Cela permet d’exécuter et de synchroniser une série d’animations. L’exemple de code suivant illustre la création et l’exécution d’animations enfants :

var parentAnimation = new Animation();
var scaleUpAnimation = new Animation(v => image.Scale = v, 1, 2, Easing.SpringIn);
var rotateAnimation = new Animation(v => image.Rotation = v, 0, 360);
var scaleDownAnimation = new Animation(v => image.Scale = v, 2, 1, Easing.SpringOut);

parentAnimation.Add(0, 0.5, scaleUpAnimation);
parentAnimation.Add(0, 1, rotateAnimation);
parentAnimation.Add(0.5, 1, scaleDownAnimation);

parentAnimation.Commit(this, "ChildAnimations", 16, 4000, null, (v, c) => SetIsEnabledButtonState(true, false));

Vous pouvez également écrire l’exemple de code de manière plus concise :

new Animation
{
    { 0, 0.5, new Animation (v => image.Scale = v, 1, 2) },
    { 0, 1, new Animation (v => image.Rotation = v, 0, 360) },
    { 0.5, 1, new Animation (v => image.Scale = v, 2, 1) }
}.Commit (this, "ChildAnimations", 16, 4000, null, (v, c) => SetIsEnabledButtonState (true, false));

Dans les deux exemples, un objet parent Animation est créé, auquel des objets supplémentaires Animation sont ensuite ajoutés. Les deux premiers arguments de la Add méthode spécifient quand commencer et terminer l’animation enfant. Les valeurs d’argument doivent être comprises entre 0 et 1 et représenter la période relative dans l’animation parente que l’animation enfant spécifiée sera active. Par conséquent, dans cet exemple, le scaleUpAnimation sera actif pour la première moitié de l’animation, le scaleDownAnimation sera actif pour la deuxième moitié de l’animation, et le rotateAnimation sera actif pendant toute la durée.

L’effet global de cet exemple est que l’animation se produit sur plus de 4 secondes (4 000 millisecondes). La scaleUpAnimation propriété anime Scale de 1 à 2, plus de 2 secondes. La scaleDownAnimation propriété anime Scale ensuite de 2 à 1, plus de 2 secondes. Bien que les deux animations de mise à l’échelle se produisent, la rotateAnimationRotation propriété anime de 0 à 360, sur 4 secondes. Les deux animations de mise à l’échelle utilisent également des fonctions d’accélération. La SpringIn fonction d’accélération entraîne la réduction initiale de l’instance Image avant d’être plus grande, et la SpringOut fonction d’accélération devient Image plus petite que sa taille réelle vers la fin de l’animation complète.

Il existe un certain nombre de différences entre un Animation objet qui utilise des animations enfants et une autre qui ne le fait pas :

• Lorsque vous utilisez des animations enfants, le finished rappel sur une animation enfant indique quand l’enfant est terminé, et le finished rappel passé à la Commit méthode indique quand l’animation entière est terminée.
• Lorsque vous utilisez des animations enfants, le retour true du repeat rappel sur la Commit méthode n’entraîne pas la répétition de l’animation, mais l’animation continue à s’exécuter sans nouvelles valeurs.
• Lorsque vous incluez une fonction d’accélération dans la Commit méthode et que la fonction d’accélération retourne une valeur supérieure à 1, l’animation est arrêtée. Si la fonction d’accélération retourne une valeur inférieure à 0, la valeur est limitée à 0. Pour utiliser une fonction d’accélération qui retourne une valeur inférieure à 0 ou supérieure à 1, elle doit être spécifiée dans l’une des animations enfants, plutôt que dans la Commit méthode.

La Animation classe inclut également des WithConcurrent méthodes qui peuvent être utilisées pour ajouter des animations enfants à un objet parent Animation . Toutefois, leurs begin valeurs d’argument finish ne sont pas limitées à 0 à 1, mais seulement cette partie de l’animation enfant qui correspond à une plage de 0 à 1 sera active. Par exemple, si un WithConcurrent appel de méthode définit une animation enfant qui cible une Scale propriété comprise entre 1 et 6, mais avec begin et finish les valeurs -2 et 3, la begin valeur de -2 correspond à une Scale valeur de 1 et la finish valeur 3 correspond à une Scale valeur de 6. Étant donné que les valeurs situées en dehors de la plage de 0 et 1 ne font pas partie d’une animation, la Scale propriété ne sera animée que de 3 à 6.

Annuler une animation

Une application peut annuler une animation personnalisée avec un appel à la méthode d’extension AbortAnimation :

this.AbortAnimation ("SimpleAnimation");

Étant donné que les animations sont identifiées de manière unique par une combinaison du propriétaire de l’animation et du nom de l’animation, le propriétaire et le nom spécifiés lors de l’exécution de l’animation doivent être spécifiés pour l’annuler. Par conséquent, cet exemple annule immédiatement l’animation nommée SimpleAnimation appartenant à la page.

Créer une animation personnalisée

Les exemples présentés ici ont jusqu’à présent démontré des animations qui pourraient également être obtenues avec les méthodes de la ViewExtensions classe. Toutefois, l’avantage de la Animation classe est qu’elle a accès à la méthode de rappel, qui est exécutée lorsque la valeur animée change. Cela permet au rappel d’implémenter n’importe quelle animation souhaitée. Par exemple, l’exemple de code suivant anime la BackgroundColor propriété d’une page en la définissant sur Color les valeurs créées par la Color.FromHsla méthode, avec des valeurs de teinte comprises entre 0 et 1 :

new Animation (callback: v => BackgroundColor = Color.FromHsla (v, 1, 0.5),
  start: 0,
  end: 1).Commit (this, "Animation", 16, 4000, Easing.Linear, (v, c) => BackgroundColor = Colors.Black);

L’animation résultante fournit l’apparence de l’avancement de l’arrière-plan de la page à travers les couleurs de l’arc-en-ciel.

Créer une méthode d’extension d’animation personnalisée

Les méthodes d’extension de la ViewExtensions classe animent une propriété de sa valeur actuelle vers une valeur spécifiée. Cela rend difficile la création, par exemple, d’une méthode d’animation ColorTo qui peut être utilisée pour animer une couleur d’une valeur à une autre. Cela est dû au fait que différents contrôles ont des propriétés de type Colordifférentes. Bien que la VisualElement classe définit une BackgroundColor propriété, il ne s’agit pas toujours de la propriété souhaitée Color à animer.

La solution à ce problème consiste à ne pas avoir la ColorTo méthode cible une propriété particulière Color . Au lieu de cela, il peut être écrit avec une méthode de rappel qui transmet la valeur interpolée Color à l’appelant. En outre, la méthode prend des arguments de début et de fin Color .

La ColorTo méthode peut être implémentée en tant que méthode d’extension qui utilise la Animate méthode dans la AnimationExtensions classe pour fournir ses fonctionnalités. Cela est dû au fait que la Animate méthode peut être utilisée pour cibler les propriétés qui ne sont pas de type double, comme illustré dans l’exemple de code suivant :

public static class ViewExtensions
{
    public static Task<bool> ColorTo(this VisualElement self, Color fromColor, Color toColor, Action<Color> callback, uint length = 250, Easing easing = null)
    {
        Func<double, Color> transform = (t) =>
            Color.FromRgba(fromColor.Red + t * (toColor.Red - fromColor.Red),
                           fromColor.Green + t * (toColor.Green - fromColor.Green),
                           fromColor.Blue + t * (toColor.Blue - fromColor.Blue),
                           fromColor.Alpha + t * (toColor.Alpha - fromColor.Alpha));
        return ColorAnimation(self, "ColorTo", transform, callback, length, easing);
    }

    public static void CancelAnimation(this VisualElement self)
    {
        self.AbortAnimation("ColorTo");
    }

    static Task<bool> ColorAnimation(VisualElement element, string name, Func<double, Color> transform, Action<Color> callback, uint length, Easing easing)
    {
        easing = easing ?? Easing.Linear;
        var taskCompletionSource = new TaskCompletionSource<bool>();

        element.Animate<Color>(name, transform, callback, 16, length, easing, (v, c) => taskCompletionSource.SetResult(c));
        return taskCompletionSource.Task;
    }
}

La Animate méthode nécessite un transform argument, qui est une méthode de rappel. L’entrée de ce rappel est toujours double comprise entre 0 et 1. Par conséquent, dans cet exemple, la ColorTo méthode définit sa propre transformation Func qui accepte une double valeur comprise entre 0 et 1 et qui retourne une Color valeur correspondant à cette valeur. La Color valeur est calculée en interpolant les RedBlueGreenarguments fournis, et Alpha en interpolant les valeurs des deux arguments fournis.Color La Color valeur est ensuite passée à la méthode de rappel à appliquer à une propriété. Cette approche permet à la ColorTo méthode d’animer n’importe quelle propriété spécifiée Color :

await Task.WhenAll(
  label.ColorTo(Colors.Red, Colors.Blue, c => label.TextColor = c, 5000),
  label.ColorTo(Colors.Blue, Colors.Red, c => label.BackgroundColor = c, 5000));
await this.ColorTo(Color.FromRgb(0, 0, 0), Color.FromRgb(255, 255, 255), c => BackgroundColor = c, 5000);
await boxView.ColorTo(Colors.Blue, Colors.Red, c => boxView.Color = c, 4000);

Dans cet exemple de code, la ColorTo méthode anime les TextColor propriétés d’un LabelBackgroundColor , la BackgroundColor propriété d’une page et la Color propriété d’un BoxView.