L’animatique est une part importante de l’expérience utilisateur dans les interfaces modernes, qu’elles soient WEB ou Desktop. WPF répond à cette problématique d’une manière très complète en fournissant dans le framework .NET des classes de gestion du temps (minuteurs,table de montage) et de synchronisation des contrôles (calcul et mise à jour des propriétés).

Dans cet article nous allons voir une façon de construire une syntaxe courte et flexible en C# pour animer les contrôles de l’UI en WPF, sans avoir recours à beaucoup de XAML, qui est certes un langage de description très complet (et puissant) mais qui à tendance à être très verbeux, où la moindre déclaration d’élément occupe rapidement un grand nombre de lignes.

I. Les différents types d’animation

Il existe différents types d’animation :

  • animation From/To/By
    • animation d’une valeur de propriété entre une valeur de début et de destination, avec une valeur de décalage
    • classes aux noms normalisés : {nomDeType}Animation
  • animation qui utilise des images clefs (AnimationUsingKeyFrames)
    • permet de définir une nombre multiples de valeurs cibles et de contrôler leur méthode d’interpolation
  • animation qui utilise un chemin (AnimationUsingPath)
    • animation de tracé, pour animer des valeurs selon un tracé générique
  • animation base pour la fabrication d’animations personnalisées (AnimationBase)
    • classe abstraite pour Animation et AnimationUsingKeyFrames

II. Les animations Fom/To/By

Les méthodes proposées dans cet article mettent le focus sur les animations From/to/By dans un premier temps.

Étant donné que les animations génèrent des valeurs de propriété, différents types d’animation existent pour différents types de propriété. Pour animer une propriété qui accepte un Double, tels que les propriétés de largeur ou de longueur d’un élément, il convient d’utiliser une animation qui produit des valeur de type Double. Pour animer une propriété qui accepte un Point, on utilise une animation qui produit des valeur de type Point,etc … En raison du nombre de différents types de propriétés, il existe plusieurs classes d’animations dans le namespace System.Windows.Media.Animation :

classe description
DoubleAnimation valeur de type double, par exemple Width et Height de FrameworkElement
DecimalAnimation valeur de type decimal
Int16Animation valeur de type entière sur 16 bits
Int32Animation valeur de type entière sur 32 bits
Int64Animation valeur de type entière sur 64 bits
ColorAnimation valeur de type Color d’un Brush comme un SolidGradientBrush ou d’un GradientStop par exemple, des propriétés comme Background, Foreground et BorderBrush d’un Control
PointAnimation valeur de type Point (double X,double Y) comme la propriété Center d’un EllipseGeometry
Point3DAnimation valeur de type Point3D (double X,Double Y,double Z) comme la propriété Position de Camera de ViewPort3D
QuaternionAnimation un quaternion représente une rotation dans un espace à 3 dimensions (Double W,Double X,Double Y,Double Z), par exemple la propriété Rotation de RotateTransform3D
RectAnimation valeur de type Rect (double Left,double Top,double Width,double Height) par exemple la propriété Rect de RectangleGeometry
Rotation3DAnimation anime la ropriété Rotate de RotateTransform3D
SingleAnimation valeur de type Single
SizeAnimation valeur de type Size, comme la propriété Size de ArcSegment
ThicknessAnimation valeur de type Thickness, comme BorderThickness de Border
Vector3DAnimation valeur de type Vector3D (double X,double Y,double Z,double Length), par exemple la propriété Axis de AxisAngleRotation3D
VectorAnimation valeur de type Vecteur (double X,double y,double Length)

à propos des propriétés animables:

  • En XAML, l’objet StoryBoard fournit les propriétés attachées TargetName et TargetProperty pour indiquer les propriétés à animer via une animation. l’objet ciblé par l’animation doit être nommé
  • les propriétés attachées sont une spécialisation des propriétés de dépendances (DependencyProperty)
remarque: le but des propriétés attachées est de permettre à différents éléments enfants de spécifier une valeur unique pour une propriété qui se situe en réalité dans un élément parent, car ces propriétés sont concues pour être initialisées par les éléments enfants et pas par l’élément parent. Par exemple, la propriété Dock de DockPanel : la classe DockPanel définie une DependencyProperty nommée DockProperty et fournit les méthodes d’initialisation GetDoc et SetDock. C’est un élement enfant qui fixe la propriété Dock:

<DockPanel>
    <Label DockPanel.Dock="Top">...</Label>
</DockPanel>

En C#, on utilisera donc les champs ClassName.DependencyNameProperty pour indiquer aux classes d’animation les propriétés à animer.
Par exemple, on indique à la classe ScaleTransform la propriété de dépendance ScaleTransform.ScaleX sur l’appel de la méthode BeginAnimation pour indiquer la propriété qui doit être animée par la Timeline (class AnimationTimeline) DoubleAnimation.
Le système de minuterie fabrique alors une horloge pour le DoubleAnimation et s’applique à l’objet et la propriété qui sont spécifiés par les paramètres TargetName et TargetProperty pour le DoubleAnimation.

III. La chronologie d’animation

Les animations sont des chronologies. Tous les types d’animation hérient de la classe Chronologie. A une chronologie correspond un segment de temps.

Les propriétés d’un segment de temps de chronologie sont les suivantes :

  • durée : longueur d’une segment de temps (une chronologie), exprimée par un `TimeSpan`. Correspond à une itération de l’animation. Par défaut vaut 1 seconde
  • nombre de répétitions : indique combien de fois une chronologie est lue ou si elle est lue indéfiniment. Par défaut vaut 1
  • auto reverse : indique que la chronologie repard en arrière après avoir atteint la fin de sa durée. Par défaut vaut false
  • rapidité de progression : Par défaut la valeur d’animation est linéaire et calculée pour couvrir l’intervalle de valeurs indiquées (from/to) dans le temps imparti (durée du segment). Il est possible de définir et d’appliquer des formules mathématiques (les fonctions de easing) pour modifier la progression de l’animation

III.1. Les fonctions de easing

Les fonctions de easing appellées également fonctions d’accélération sont des formules mathématiques qui calculent la progression de l’animation sur le chemin d’animation, comme la progression des valeurs de from à to dans une animation from/to/by.

La fonction de easing peut être appliquée selon 3 modes d’interpolation :

  • EaseIn: l’interpolation suit la formule mathématique de la fonction de easing
  • EaseOut: l’interpolation suit 100% d’interpolation moins la valeur de la fonction de easing (fonction symétrique)
  • EaseInOut: l’interpolation utilise EaseIn sur la première moitié de l’animation et EaseOut pour la seconde moité

Il est possible de définir sa propre fonction, bien que WPF définisse en standard les fonctions listées ci-après:

remarque: les graphiques représentent les valeurs de fonctions de easing. Chaque graphique contient les 3 versions des fonctions selon le mode de easing:

  • rouge : EaseIn
  • vert : EaseOut
  • bleu : EaseInOut
easing function description
BackEase rétracte légérement le mouvement au début de l’animation easing function BackEase
BounceEase effet rebondissanteasing function bounce ease
CircleEase ralentit/accélère le mouvement selon une fonction circulaireeasing function circle ease
CubicEase ralentit/accélère le mouvement selon la fonction f(t)=t3easing function cubic ease
ElasticEase produit une animation qui ressemble à un ressort oscillant jusqu’à l’amortissement complet de l’oscillationeasing function Elastic ease
ExponentialEase ralentit/accélère le mouvement selon une fonction exponentielleeasing function Exponential ease
PowerEase ralentit/accélère le mouvement selon la fonction f(t)=tp où p est la propriété Power de la fonction easeeasing function Power ease
QuadraticEase ralentit/accélère le mouvement selon la fonction f(t)=t2easing function Quadratic ease
QuarticEase ralentit/accélère le mouvement selon la fonction f(t)=t4easing function Quartic ease
QuinticEase ralentit/accélère le mouvement selon la fonction f(t)=t5easing function Quintic ease
SineEase produit une animation qui ralentit/accélère selon la formule du sinuseasing function Sine ease

III.2. Les événéments de chronolgie

à suivre …