Partager via

Résumé du chapitre 22. Animation

  • Article

Remarque

Ce livre a été publié au printemps 2016 et n’a pas été mis à jour depuis. Il y a beaucoup dans le livre qui reste précieux, mais certains documents sont obsolètes, et certains sujets ne sont plus entièrement corrects ou complets.

Vous avez vu que vous pouvez créer vos propres animations à l’aide du Xamarin.Forms minuteur ou Task.Delay, mais il est généralement plus facile d’utiliser les installations d’animation fournies par Xamarin.Forms. Trois classes implémentent ces animations :

En règle générale, les animations ciblent les propriétés qui sont soutenues par des propriétés pouvant être liées. Ce n’est pas une exigence, mais il s’agit des seules propriétés qui réagissent dynamiquement aux modifications.

Il n’existe aucune interface XAML pour ces animations, mais vous pouvez intégrer des animations en XAML à l’aide de techniques décrites dans le chapitre 23. Déclencheurs et comportements.

Exploration des animations de base

Les fonctions d’animation de base sont des méthodes d’extension trouvées dans la ViewExtensions classe. Ces méthodes s’appliquent à tout objet dérivé de VisualElement. Les animations les plus simples ciblent les propriétés de transformation décrites dans Chapter 21. Transforms.

AnimationTryout montre comment le Clicked gestionnaire d’événements d’un objet Button peut appeler la RotateTo méthode d’extension pour faire tourner le bouton dans un cercle.

La RotateTo méthode modifie la Rotation propriété de la Button valeur 0 à 360 au cours d’un quart de seconde (par défaut). Si la Button valeur est recapée, toutefois, elle ne fait rien, car la Rotation propriété est déjà de 360 degrés.

Définition de la durée de l’animation

Le deuxième argument à RotateTo est une durée en millisecondes. Si la valeur est élevée, le fait d’appuyer sur la Button valeur pendant une animation démarre une nouvelle animation commençant à l’angle actuel.

Animations relatives

La RelRotateTo méthode effectue une rotation relative en ajoutant une valeur spécifiée à la valeur existante. Cette méthode permet d’être Button appuyé plusieurs fois, et chaque fois augmente la Rotation propriété de 360 degrés.

Animations en attente

Toutes les méthodes d’animation dans ViewExtensions les objets de retour Task<bool> . Cela signifie que vous pouvez définir une série d’animations séquentielles à l’aide ContinueWith ou await. La bool valeur de retour de saisie semi-automatique est false si l’animation s’est terminée sans interruption ou true si elle a été annulée par la CancelAnimation méthode, ce qui annule toutes les animations initiées par l’autre méthode qui ViewExtensions sont définies sur le même élément.

Animations composites

Vous pouvez combiner des animations attendues et non attendues pour créer des animations composites. Il s’agit des animations qui ViewExtensions ciblent les TranslationXpropriétés , TranslationYet Scale transforment :

Notez que TranslateTo potentiellement affecte à la fois les propriétés et TranslationY les TranslationX propriétés.

Task.WhenAll et Task.WhenAny

Il est également possible de gérer des animations simultanées à l’aide Task.WhenAllde signaux lorsque plusieurs tâches ont tous terminé, et Task.WhenAny, qui signale lorsque la première de plusieurs tâches a terminé.

Rotation et ancres

Lorsque vous appelez les ScaleTométhodes , et RelRotateTo RotateToles méthodesRelScaleTo, vous pouvez définir les propriétés et AnchorY les AnchorX propriétés pour indiquer le centre de mise à l’échelle et de rotation.

Le CircleButton illustre cette technique en tournant autour Button du centre de la page.

Fonction d'accélération

En règle générale, les animations sont linéaires d’une valeur de début à une valeur de fin. Les fonctions d’accélération peuvent entraîner une accélération ou un ralentissement des animations au cours de leur cours. Le dernier argument facultatif des méthodes d’animation est de type Easing, une classe qui définit 11 champs statiques en lecture seule de type Easing:

Le In suffixe indique que l’effet est au début de l’animation, Out signifie à la fin, et InOut signifie qu’il est au début et à la fin de l’animation.

L’exemple BounceButton illustre l’utilisation de fonctions d’accélération.

Vos propres fonctions d’accélération

Vous pouvez également définir vos propres fonctions d’accélération en passant un Func<double, double> constructeurEasing. Easing définit également une conversion implicite de Func<double, double> vers Easing. L’argument de la fonction d’accélération est toujours dans la plage de 0 à 1, car l’animation se poursuit de façon linéaire de début à fin. La fonction retourne généralement une valeur dans la plage de 0 à 1, mais peut être brièvement négative ou supérieure à 1 (comme c’est le cas avec les SpringIn fonctions et SpringOut les fonctions) ou peut interrompre les règles si vous savez ce que vous faites.

L’exemple UneasyScale illustre une fonction d’accélération personnalisée, et CustomCubicEase illustre une autre.

L’exemple SwingButton illustre également une fonction d’accélération personnalisée, ainsi qu’une technique de modification des AnchorX propriétés dans AnchorY une séquence d’animations de rotation.

La Xamarin.Formsbibliothèque Book.Toolkit a une classe qui utilise une JiggleButton fonction d’accélération personnalisée pour activer un bouton lorsqu’elle est cliquée. L’exemple JiggleButtonDemo le montre.

Animations d’entrée

Un type d’animation populaire se produit lorsqu’une page s’affiche pour la première fois. Une telle animation peut être démarrée dans le OnAppearing remplacement de la page. Pour ces animations, il est préférable de configurer le code XAML pour la façon dont vous souhaitez que la page apparaisse après l’animation, puis initialise et anime la disposition à partir du code.

L’exemple FadingEntrance utilise la FadeTo méthode d’extension pour fondu dans le contenu de la page.

L’exemple SlideEntrance utilise la TranslateTo méthode d’extension pour faire glisser le contenu de la page des côtés.

L’exemple SwingingEntrance utilise la RotateYTo méthode d’extension pour animer la RotationY propriété. Une RotateXTo méthode est également disponible.

Animations pour toujours

À l’autre extrême, les animations « à jamais » s’exécutent jusqu’à ce que le programme soit arrêté. Celles-ci sont généralement destinées à des fins de démonstration.

L’exemple FadingTextAnimation utilise l’animation FadeTo pour faire disparaître deux morceaux de texte entrants et sortants.

PalindromeAnimation affiche un palindrome, puis fait pivoter séquentiellement les lettres individuelles de 180 degrés afin qu’elles soient toutes à l’envers. Ensuite, la chaîne entière est retournée de 180 degrés pour lire la même chose que la chaîne d’origine.

L’échantillon CopterAnimation fait pivoter un hélicoptère simple BoxView tout en le tournant autour du centre de l’écran.

RotatingSpokes BoxView tourne autour du centre de l’écran, puis fait pivoter chaque rayon lui-même pour créer des modèles intéressants :

Capture d’écran triple des rayons pivotants

Toutefois, l’augmentation progressive de la Rotation propriété d’un élément peut ne pas fonctionner à long terme, car l’exemple RotationBreakdown le montre.

L’exemple SpinningImage utilise RotateTo, RotateXToet RotateYTo pour le faire paraître comme si une bitmap pivotait dans l’espace 3D.

Animation de la propriété bounds

La seule méthode d’extension non ViewExtensions encore illustrée est LayoutTo, qui anime efficacement la propriété en lecture seule Bounds en appelant la Layout méthode. Cette méthode est normalement appelée par Layout des dérivés, comme indiqué dans le chapitre 26. CustomLayouts.

La LayoutTo méthode doit être limitée à des fins spéciales. Le programme BouncingBox l’utilise pour compresser et développer un BoxView tel qu’il rebondit sur les côtés d’une page.

L’exemple XamagonXuzzle utilise LayoutTo pour déplacer des vignettes dans une implémentation du puzzle classique 15-16 qui affiche une image brouillée plutôt que des vignettes numérotées :

Capture d’écran triple de Xamarin Xuzzle

Vos propres animations attendues

L’exemple TryAwaitableAnimation crée une animation awaitable. Classe cruciale qui peut retourner un Task objet à partir de la méthode et signaler une fois l’animation terminée est TaskCompletionSource.

Plus en détail dans les animations

Le Xamarin.Forms système d’animation peut être un peu déroutant. En plus de la classe, le système d’animation Easing comprend les classes Animationet AnimationExtension les ViewExtensionsclasses.

ViewExtensions, classe

Vous avez déjà vu ViewExtensions. Il définit neuf méthodes qui retournent Task<bool> et CancelAnimations. Sept des neuf méthodes ciblent les propriétés de transformation. Les deux autres sont FadeTo, qui cible la Opacity propriété et LayoutTo, qui appelle la Layout méthode.

Classe d’animation

La Animation classe a un constructeur avec cinq arguments pour définir les méthodes de rappel et de fin, ainsi que les paramètres de l’animation.

Les animations enfants peuvent être ajoutées avec Add, Insert, WithConcurrentet surcharge de WithConcurrent.

L’objet d’animation est ensuite démarré avec un appel à la Commit méthode.

Classe AnimationExtensions

La AnimationExtensions classe contient principalement des méthodes d’extension. Il existe plusieurs versions d’une Animate méthode et la méthode générique Animate est si polyvalente que c’est vraiment la seule fonction d’animation dont vous avez besoin.

Utilisation de la classe Animation

L’exemple ConcurrentAnimations illustre la Animation classe avec plusieurs animations différentes.

Animations enfants

L’exemple ConcurrentAnimations illustre également les animations enfants, qui utilisent les méthodes (très similaires).Insert Add

Au-delà des méthodes d’animation de haut niveau

L’exemple ConcurrentAnimations montre également comment effectuer des animations qui vont au-delà des propriétés ciblées par les ViewExtensions méthodes. Dans un exemple, une série de périodes est plus longue ; dans un autre exemple, une BackgroundColor propriété est animée.

Plus de vos propres méthodes attendables

La TranslateTo méthode de ViewExtensions ne fonctionne pas avec la Easing.SpringOut fonction. Il s’arrête lorsque la sortie d’accélération est supérieure à 1.

La Xamarin.Formsbibliothèque Book.Toolkit contient une classe avec TranslateXTo et TranslateYTo des méthodes d’extension MoreViewExtensions qui n’ont pas ce problème, ainsi que CancelTranslateXTo CancelTranslateYTo des méthodes pour annuler ces animations.

SpringSlidingEntrance illustre la TranslateXTo méthode.

La MoreExtensions classe contient également une méthode d’extension TranslateXYTo qui combine la traduction X et Y et une CancelTranslateXYTo méthode.

Implémentation d’une animation bezier

Il est également possible de développer une animation qui déplace un élément le long du chemin d’un spline bezier. La Xamarin.Formsbibliothèque Book.Toolkit contient une BezierSpline structure qui encapsule un spline bezier et une BezierTangent énumération pour contrôler l’orientation.

La MoreViewExtensions classe contient une méthode d’extension BezierPathTo et une CancelBezierPathTo méthode.

L’exemple BezierLoop illustre l’animation d’un élément le long d’un chemin Beizer.

Utilisation d’AnimationExtensions

Un type d’animation manquant dans la collection standard est une animation de couleur. Le problème est qu’il n’existe aucun moyen approprié d’interpoler entre deux Color valeurs. Il est possible d’interpoler les valeurs RVB individuelles, mais tout comme valides consiste à interpoler les valeurs HSL.

Pour cette raison, la MoreViewExtensions classe de la Xamarin.Formsbibliothèque Book.Toolkit contient deux Color méthodes d’animation : RgbColorAnimation et .HslColorAnimation (Il existe également deux méthodes d’annulation : CancelRgbColorAnimation et CancelHslColorAnimation).

Les deux méthodes utilisent ColorAnimation, qui effectue l’animation en appelant la méthode générique Animate étendue dans AnimationExtensions.

L’exemple ColorAnimations illustre l’utilisation de ces deux types d’animations de couleurs.

Structurer vos animations

Il est parfois utile d’exprimer des animations en XAML et de les utiliser conjointement avec MVVM. Il s’agit du chapitre suivant, chapitre 23. Déclencheurs et comportements.