Les animations

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

Visuels et média

Travailler avec les données

Sondes et autres fonctionnalités spécifiques au téléphone

Les animations

Avec Silverlight pour Windows Phone 7, les animations peuvent améliorer vos applications en y ajoutant de l’interactivité et du mouvement. En animant une couleur de fond ou en appliquant une transformation animée, vous pouvez créer des transitions d’écrans spectaculaires ou fournir des repères visuels utiles. Ce tutoriel vous montre comment créer des animations de base en changeant les valeurs d’une propriété et en utilisant des images clés (Key-Frames)

Ce tutoriel contient les sections suivantes :

Animation d’une propriété de type Double
Animation d’une propriété de type Color
Démarrage, Arrêt, Pause, Reprise
Animation par l’utilisation de Key-Frames
Animation par l’utilisation des Easing Functions

Remarque

Les exemples interactifs de ce tutoriel utilisent Silverlight qui est exécuté sur le navigateur pour simuler le comportement de Silverlight pour Windows Phone. Le comportement actuel peut être visiblement différent dans l’émulateur ou sur un téléphone Windows Phone.

Animation d’une propriété de type Double

Les animations en Silverlight pour Windows Phone sont créées en animant les valeurs des propriétés de leurs objets. Par exemple, vous pouvez animer les propriétés Width et Rectangle, l’angle d’un RotateTransform, ou la valeur d’une couleur d’un contrôle Button. Dans l’exemple suivant, la propriété Opacity est animée. Pour essayer cet exemple, cliquez sur le Rectangle pour le voir se fondre et disparaitre.

Get Microsoft Silverlight

XAML
Code Snippet
  1. <StackPanel >
  2.     <StackPanel.Resources>
  3.         <!-- Animates the rectangle's opacity. -->
  4.         <Storyboard x:Name="myStoryboard">
  5.             <DoubleAnimation
  6.                 Storyboard.TargetName="MyAnimatedRectangle"
  7.                 Storyboard.TargetProperty="Opacity"
  8.                 From="1.0" To="0.0" Duration="0:0:1"
  9.                 AutoReverse="True">
  10.             </DoubleAnimation>
  11.         </Storyboard>
  12.     </StackPanel.Resources>
  13.     <Rectangle MouseLeftButtonUp="Rectangle_Tapped"
  14.                x:Name="MyAnimatedRectangle"
  15.                Width="300" Height="200" Fill="Blue" />
  16. </StackPanel>

C#

Code Snippet
  1. // When the user taps the rectangle, the animation begins.
  2.         private void Rectangle_Tapped(object sender, MouseEventArgs e)
  3.         {
  4.             myStoryboard.Begin();
  5.         }

Visual Basic

Code Snippet
  1. ' When the user taps the rectangle, the animation begins.
  2. Private Sub Rectangle_Tapped(sender As Object, e As MouseEventArgs)
  3.     myStoryboard.Begin()
  4. End Sub

Les sections suivantes parlent des étapes d’animations sur la propriété Opacity et examinent le code XAML qui est utilisé pour chaque étape.

Identifier la propriété à animer

Dans cet exemple, vous animez la propriété Opacity d’un Rectangle. Vous n’avez pas à déclarer la propriété que vous voulez animer sur l’objet lui-même. Cependant, en général vous nommez l’objet que vous voulez animer. Nommer l’objet rend plus facile de spécifier quel objet sera visé par l’animation. Le XAML suivant montre comment nommer le Rectangle.

Code Snippet
  1. <Rectangle x:Name="MyAnimatedRectangle"/>

 

Créer un Storyboard et en faire une ressource

Un StoryBoard est un conteneur dans lequel vous mettez les objets à animer. Vous devez construire une ressource StoryBoard qui est disponible pour l’objet que vous voulez animer. Le XAML suivant montre comment construire une ressource StoryBoard de l’élément racine qui est un StackPanel.

Code Snippet
  1. <StackPanel x:Name="rootElement">
  2.     <StackPanel.Resources>
  3.         <!-- Animates the rectangle's opacity. -->
  4.         <Storyboard x:Name="myStoryboard">
  5.             <!-- Animation objects go here. -->
  6.         </Storyboard>
  7.     </StackPanel.Resources>
  8. </StackPanel>

 

Ajout d’une animation d’objet dans le storyboard

Cet exemple utilise l’objet DoubleAnimation parce que la valeur de la propriété que vous animez (Opacity) utilise un double. Un objet animation spécifie ce qui est animé et comment l’animation se comporte. Le XAML suivant montre comment l’objet DoubleAnimation est ajouté au StoryBoard.

Code Snippet
  1. <Storyboard x:Name="myStoryboard">
  2.      <DoubleAnimation
  3.          Storyboard.TargetName="MyAnimatedRectangle"
  4.          Storyboard.TargetProperty="Opacity"
  5.          From="1.0" To="0.0" Duration="0:0:1"
  6.          AutoReverse="True"
  7.          RepeatBehavior="Forever">
  8.      </DoubleAnimation>
  9.  </Storyboard>

L’objet DoubleAnimation spécifie l’animation suivante :

  • Storyboard.TargetProperty="Opacity" spécifie que la propriété Opacity est animée.
  • Storyboard.TargetName="MyAnimatedRectangle" spécifie que la propriété de cet objet est animée. (le Rectangle)
  • From="1.0" To="0.0" spécifie que la propriété Opacity commence à une valeur de 1 et est animée jusqu’à 0 (Démarre opaque et s’estompe par la suite)
  • Duration="0:0:1" spécifie combien de temps l’animation dure (A quelle vitesse s’estompe le Rectangle). La durée utilisée dans cet exemple est d’une seconde parce que la propriété Duration est spécifiée sous forme de « heures : minutes : secondes ».
  • AutoReverse="True" spécifie que quand l’animation se termine, elle recommence dans le sens inverse. Dans le cas de cet exemple, elle s’estompe et s’inverse à une opacité complète.
  • RepeatBehavior= « Forever »  spécifie que lorsque l’animation commence celle-ci continue indéfiniment. Dans cet exemple, le Rectangle s’estompe continuellement…

Démarrer l’animation

Une manière commune de démarrer une animation est une réponse à un évènement. Dans cet exemple, l’évènement MouseLeftButtonUp est utilisé pour démarrer l’animation quand l’utilisateur touche le Rectangle.

Code Snippet
  1. <Rectangle MouseLeftButtonUp="Rectangle_Tapped"
  2.                    x:Name="MyAnimatedRectangle"
  3.                    Width="100" Height="100" Fill="Blue" />

Le Storyboard est démarré en utilisant la méthode Begin().

Code Snippet
  1. myStoryboard.Begin();

Remarque

Vous pouvez utiliser le code C# au lieu du XAML pour définir une animation. Pour voir un exemple, allez à la section Vue d’ensemble d’une Animation dans la librairie MSDN.

Animation d’une propriété Color

L’exemple précédent nous a montré comment animer une propriété qui utilisait une valeur de type Double. Et que faire si vous voulez animer un type Color ?

Silverlight pour Windows Phone fourni des objets d’animation qui sont utilisés pour animer d’autres types de valeurs. Les objets suivants animent respectivement les propriétés de type Double, Color et Point :

Remarque

Vous pouvez aussi animer les propriétés qui utilisent des objets. Pour plus d’informations, voir la section Animations avancées.

L’exemple suivant montre comment créer un objet ColorAnimation. Pour essayer cet exemple, cliquez sur le Rectangle pour changer la couleur de fond du Canvas de rouge à vert sur une période de 4 secondes.

Get Microsoft Silverlight

XAML

Code Snippet
  1. <StackPanel MouseLeftButtonUp="Rectangle_Tapped">
  2.             <StackPanel.Resources>
  3.                 <Storyboard x:Name="myStoryboard">
  4.                     <!-- Animate the background color of the canvas from red to green over 4 seconds. -->
  5.                     <ColorAnimation Storyboard.TargetName="mySolidColorBrush"
  6.                                     Storyboard.TargetProperty="Color"
  7.                                     From="Red" To="Green" Duration="0:0:4" />
  8.                 </Storyboard>
  9.             </StackPanel.Resources>
  10.             <StackPanel.Background>
  11.                 <SolidColorBrush x:Name="mySolidColorBrush" Color="Red" />
  12.             </StackPanel.Background>
  13.         </StackPanel>

C#

Code Snippet
  1. // When the user taps the rectangle, the animation begins.
  2.         private void Rectangle_Tapped(object sender, MouseEventArgs e)
  3.         {
  4.             myStoryboard.Begin();
  5.         }

Visual Basic

Code Snippet
  1. ' When the user taps the rectangle, the animation begins.
  2. Private Sub Rectangle_Tapped(sender As Object, e As MouseEventArgs)
  3.     myStoryboard.Begin()
  4. End Sub


Démarrage, arrêt, pause et reprise

L’exemple précédant nous a montré comment démarrer une animation en utilisant la méthode Begin(). Le Storyboard aussi possède les méthodes Stop(), Pause(), et Resume() qui peuvent être utilisées pour contrôler une animation. L’exemple suivant créé quatre contrôles Button qui permettent à l’utilisateur de contrôler l’animation d’une Ellipse sur l’écran. Pour essayer cet exemple, cliquez sur les boutons et regardez comment l’animation se comporte.

Get Microsoft Silverlight

Code Snippet
  1. <Canvas>
  2.             <Canvas.Resources>
  3.                 <Storyboard x:Name="myStoryboard">
  4.                     <!-- Animate the center point of the ellipse. -->
  5.                     <PointAnimation Storyboard.TargetProperty="Center" Storyboard.TargetName="MyAnimatedEllipseGeometry"
  6.                                     Duration="0:0:5"
  7.                                     From="20,200"
  8.                                     To="400,100"
  9.                                     RepeatBehavior="Forever" />
  10.                 </Storyboard>
  11.             </Canvas.Resources>
  12.             <Path Fill="Blue">
  13.                 <Path.Data>
  14.                     <!-- Describe an ellipse. -->
  15.                     <EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="20,20" RadiusX="15" RadiusY="15" />
  16.                 </Path.Data>
  17.             </Path>
  18.             <StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265">
  19.                 <!-- Button that begins animation. -->
  20.                 <Button Click="Animation_Begin" Width="65" Height="30" Margin="2" Content="Begin" />
  21.                 <!-- Button that pauses animation. -->
  22.                 <Button Click="Animation_Pause" Width="65" Height="30" Margin="2" Content="Pause" />
  23.                 <!-- Button that resumes animation. -->
  24.                 <Button Click="Animation_Resume" Width="65" Height="30" Margin="2" Content="Resume" />
  25.                 <!-- Button that stops animation. Stopping the animation returns the ellipse to its original location. -->
  26.                 <Button Click="Animation_Stop" Width="65" Height="30" Margin="2" Content="Stop" />
  27.             </StackPanel>
  28.         </Canvas>

C#

Code Snippet
  1.  
  2. private void Animation_Begin(object sender, RoutedEventArgs e)
  3. {
  4.     myStoryboard.Begin();
  5. }
  6. private void Animation_Pause(object sender, RoutedEventArgs e)
  7. {
  8.     myStoryboard.Pause();
  9. }
  10. private void Animation_Resume(object sender, RoutedEventArgs e)
  11. {
  12.     myStoryboard.Resume();
  13. }
  14. private void Animation_Stop(object sender, RoutedEventArgs e)
  15. {
  16.     myStoryboard.Stop();
  17. }

Visual Basic

Code Snippet
  1. Private Sub Animation_Begin(sender As Object, e As RoutedEventArgs)
  2.     myStoryboard.Begin()
  3. End Sub
  4. Private Sub Animation_Pause(sender As Object, e As RoutedEventArgs)
  5.     myStoryboard.Pause()
  6. End Sub
  7. Private Sub Animation_Resume(sender As Object, e As RoutedEventArgs)
  8.     myStoryboard.[Resume]()
  9. End Sub
  10. Private Sub Animation_Stop(sender As Object, e As RoutedEventArgs)
  11.     myStoryboard.[Stop]()
  12. End Sub

 

Animation en utilisant les Key-Frames

Jusqu’à maintenant, les exemples dans ce tutoriel ont montré les animations entre 2 valeurs. (Elles sont appelées les animations From/To/By) Les animations Key-Frames vous laissent utiliser plus de deux valeurs cibles et contrôlent la méthode d’interpolation d’une animation (plus précisément, en utilisant la propriété KeySpline), vous pouvez contrôler l’accélération d’une animation.
L’exemple suivant montre comment utiliser une animation key-frame pour animer la propriété Height d’un Rectangle. Pour essayer cet exemple, cliquez sur le Rectangle pour voir l’effet attendu.

Get Microsoft Silverlight

XAML

Code Snippet
  1. <StackPanel Background="#FDF5E6">
  2.     <StackPanel.Resources>
  3.         <Storyboard x:Name="myStoryboard">
  4.             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myRectangle" Storyboard.TargetProperty="Height">
  5.                 <!-- This key frame resets the animation to its starting value (30) at the beginning of the animation. -->
  6.                 <LinearDoubleKeyFrame Value="30" KeyTime="0:0:0" />
  7.                 <!-- Spline animations are used to create acceleration. This
  8.                      SplineDoubleKeyFrame creates an animation that starts out slow
  9.                      and then speeds up. The rectangle "falls". -->
  10.                 <SplineDoubleKeyFrame KeySpline="0,0 1,0" Value="300" KeyTime="0:0:0.8" />
  11.                 <!-- This spline animation creates the "bounce" at the end where
  12.                      the rectangle shortens its length quickly at first and then
  13.                      slows down and stops. -->
  14.                 <SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="250" KeyTime="0:0:1.5" />
  15.             </DoubleAnimationUsingKeyFrames>
  16.         </Storyboard>
  17.     </StackPanel.Resources>
  18.     <Rectangle x:Name="myRectangle" MouseLeftButtonUp="Rectangle_Tapped" Fill="Blue" Width="200" Height="30" />
  19. </StackPanel>

C#

Code Snippet
  1. // When the user taps the rectangle, the animation begins.
  2.         private void Rectangle_Tapped(object sender, MouseEventArgs e)
  3.         {
  4.             myStoryboard.Begin();
  5.         }

Visual Basic

Code Snippet
  1. ' When the user taps the rectangle, the animation begins.
  2. Private Sub Rectangle_Tapped(sender As Object, e As MouseEventArgs)
  3.     myStoryboard.Begin()
  4. End Sub

Le XAML suivant inclut trois Key-Frames. Chaque key-frame spécifie une valeur animée pour un certain temps. L’animation entière prend donc 1,5 seconde.

  • La première key-frame de cet exemple est un LinearDoubleKeyFrame. Les objets tels que le LinearDoubleKeyFrame créent une transition linéaire entre les valeurs. Cependant ici, cela est utilisé pour spécifier que l’animation est à une valeur de 30 au temps 0.
  • La deuxième key-frame dans cet exemple est un SplineDoubleKeyFrame qui spécifie que la hauteur (Height) d’un Rectangle est à 300 au temps 0,8 seconde après que l’animation ait commencé. Les objets de type SplineDoubleKeyFrame tels que SplineDoubleKeyFrame créent une variable de transition entre les valeurs selon la valeur de la propriété KeySpline. Ici, le Rectangle commence par se déplacer doucement et avance jusqu’à la fin du temps du segment.
  • La troisième key-frame dans cet exemple est un SplineDoubleKeyFrame qui spécifie que la hauteur (Height) du Rectangle est de 250 au temps de 1,5 seconde après que l’animation ait commencé (0,7 seconde après que le dernier SplineDoubleKeyFrame se termine). En contraste avec le précédent SplineDoubleKeyFrame ce key-frame fait que l’animation démarre rapidement et ralentit jusqu’à la fin.
  • La propriété la plus astucieuse utilisée par le SplineDoubleKeyFrame est la propriété KeySpline. Elle spécifie les premiers et deuxièmes points de contrôle d’une courbe de Bézier, qui décrit l’accélération de l’animation.

Get Microsoft Silverlight

Remarque

Pour en apprendre plus sur les « key splines » et les courbes de Bézier, exécutez cet exemple Windows Presentation Foundation ou allez voir à la section Key-Frame Animations dans la librairie MSDN.

Animer en utilisant les Easing Functions

Les Easing Functions vous permettent d’appliquer des formules de mathématiques personnalisées pour votre animation. Par exemple, vous aimeriez qu’un objet rebondisse ou se comporte comme s’il était sur ressort. Vous pouvez utiliser les animations de type Key-Frame ou même From/To/By pour approximer ces effets, mais cela prendrait une somme significative de temps et de travail, et l’animation serait moins efficace qu’en utilisant une formule mathématique.

Outre le fait de créer votre propre Easing Function en implémentant l’interface IEasingFunction, vous pouvez utiliser une des plusieurs Easing Functions fournies par le runtime pour créer des effets communs. L’exemple suivant montre les Easing Function qui sont fournies avec le runtime. Sélectionnez une Easing Function dans la liste déroulante, définissez ses propriétés, puis exécutez l’animation. Le code XAML pour l’animation est affiché sur le coin inférieur droit de l’exemple.

L’exemple suivant montre comment utiliser une animation Key Frame pour animer la hauteur (Height) d’un Rectangle. Pour essayer cet exemple, cliquez sur le Rectangle pour voir l’effet.

Get Microsoft Silverlight

Ci-dessous une liste des Easing Functions démontrées dans l’exemple ci-dessus avec un rapide résumé de ce qu’elles font :

  • BackEase: Rétracte les mouvements d’une animation avant qu’ils commencent à s’animer sur le chemin indiqué.
  • BounceEase: Créée un effet de rebondissement
  • CircleEase: Créée une animation qui accélère et / ou décélère en utilisant une fonction circulaire.
  • CubicEase: Créée une animation qui accélère et / ou décélère en utilisant la formule f(t) = t3.
  • ElasticEase: Créée une animation qui a un ressort oscillant d’avant en arrière jusqu’à ce qu’il s’immobilise.
  • ExponentialEase: Créée une animation qui accélère et / ou décélère en utilisant une formule exponentielle.
  • PowerEase: Créée une animation qui accélère et /ou décélère en utilisant la formule f(t) = tp où p est égal à la propriété puissance.
  • QuadraticEase: Créée une animation qui accélère et / ou décélère en utilisant la formule f(t)= t2
  • QuarticEase: Créée une animation qui accélère et / ou décélère en utilisant la formule f(t) = t4
  • QuinticEase: Créée une animation qui accélère et / ou décélère en utilisant la formule f(t) = t5
  • SineEase: Créée une animation qui accélère et / ou décélère en utilisant une formule sinus.

Dans l’exemple précédent, les Easing Functions sont appliquées pour une animation From/To/By. Vous pouvez aussi appliquer ces Easing Functions aux animations Key Frame en utilisant les objets suivants :

L’exemple suivant montre comment utiliser les Key Frames avec les Easing Functions qui leurs sont associées pour créer l’animation d’un Rectangle qui se contracte, ralentit, puis s’étend vers le bas (comme s’il chutait) et puis rebondit jusqu’à s’arrêter. Pour essayer cet exemple, cliquez sur le Rectangle pour voir l’effet.

Get Microsoft Silverlight

XAML

Code Snippet
  1. <StackPanel x:Name="LayoutRoot" Background="White">
  2.             <StackPanel.Resources>
  3.                 <Storyboard x:Name="myStoryboard">
  4.                     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="myRectangle">
  5.                         <!-- This keyframe animates the ellipse up to the crest where it slows down and stops. -->
  6.                         <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
  7.                             <EasingDoubleKeyFrame.EasingFunction>
  8.                                 <CubicEase EasingMode="EaseOut"/>
  9.                             </EasingDoubleKeyFrame.EasingFunction>
  10.                         </EasingDoubleKeyFrame>
  11.                         <!-- This keyframe animates the ellipse back down and makes it bounce. -->
  12.                         <EasingDoubleKeyFrame Value="200" KeyTime="00:00:06">
  13.                             <EasingDoubleKeyFrame.EasingFunction>
  14.                                 <BounceEase Bounces="5" EasingMode="EaseOut"/>
  15.                             </EasingDoubleKeyFrame.EasingFunction>
  16.                         </EasingDoubleKeyFrame>
  17.                     </DoubleAnimationUsingKeyFrames>
  18.                 </Storyboard>
  19.             </StackPanel.Resources>
  20.             <Rectangle x:Name="myRectangle" MouseLeftButtonUp="Rectangle_Tapped" Fill="Blue" Width="200" Height="200" />
  21.         </StackPanel>

C#

Code Snippet
  1. // When the user taps the rectangle, the animation begins.
  2.         private void Rectangle_Tapped(object sender, MouseEventArgs e)
  3.         {
  4.             myStoryboard.Begin();
  5.         }

Visual Basic

Code Snippet
  1. ' When the user taps the rectangle, the animation begins.
  2. Private Sub Rectangle_Tapped(sender As Object, e As MouseEventArgs)
  3.     myStoryboard.Begin()
  4. End Sub

En plus de l’utilisation des Easing Functions, vous pouvez créer vos propres Easing Functions en héritant d’EasingFunctionBase. Pour plus d’informations, consultez EasingFunctionBase.

Voir aussi