Astuce Silverlight :Animer des objets avec DoubleAnimationUsingKeyFrames - #S022

Dans l’astuce #S020 j’ai exploré l’utilisation de DoubleAnimation pour animer la valeur d’une propriété pour un contrôle donné en utiliser la méthode De/Vers. Dans cette astuce, nous allons explorer DoubleAnimationUsingKeyFrames. Tandis que DoubleAnimation va d’une valeur vers une autre, DoubleAnimationUsingKeyFrames quand à lui est un conteneur pour un ensemble d’images clé qui déterminera la valeur des propriétés définies à des points précis tout au long du temps.

Il y a 3 différents types d’images clé disponibles :

1. LinearDoubleKeyFrame – Anime une valeur double en utilisant l’interpolation linéaire. Cela signifie que l'animation sera sans heurts entre les valeurs.
2. DiscreteDoubleKeyFrame – Anime une valeur double en utilisant des valeurs discrètes. Cela signifie que l'animation sautera entre les positions.
3. SplineDoubleKeyFrame – Anime une valeur double à l'aide interpolation spline. Cette image clé utilise un KeySpline. Pour mieux comprendre comment cela fonctionne je vous recommande de revoir comment fonctionne courbes de Bézier. Essentiellement, elle a un point de départ (toujours 0), un point de fin (toujours 1) et deux points de contrôle. Vous définissez les deux points de contrôle en utilisant le KeySpline. Le résultat est une courbe qui représente le taux de changement de l'animation.

Afin de démontrer cette fonctionnalité, nous allons créer une chronologie d'animation d'une image d'un mage marchant dans un carré comme vu dans la démo ci-dessous. Chaque direction utilise un autre type d’image clé.

En examinant le XAML ci-dessous, vous verrez que nous utilisons LinearDoubleKeyFrame pour animer la propriété Left des images depuis la chronologie de la seconde 0 à 2 pour déplacer l'image à droite. Puis, à l'aide SplineDoubleKeyFrame la propriété Top s'anime de la seconde 2 à 4 où je déplace l'image vers le bas l'écran. Vous verrez le mage partir lentement, puis accélérer rapidement étant donné qu’il suit l’ensemble de courbe. Ensuite, nous utilisons à nouveau SplineDoubleKeyFrame l'animation de la propriété Left qui intervient une fois de plus de la seconde 4 à 6 en déplacement le mage vers la gauche. Remarquez qu'aucun KeySpline n’a été créé, ce qu'aurait fait LinearDoubleKeyFrame. Enfin, la propriété Top intervient à la seconde 7 causant le saut de l'image vers Top=0, puisque nous avons utilisé DiscreteDoubleAnimation.

J’ai définie RepeatBehavior = “Forever” qui permettra la lecture en boucle de l’animation.

Et la source de Page.xaml :

 <Storyboard x:Name="MageSB" RepeatBehavior="Forever" >                   

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" 

                                   Storyboard.TargetName="MyMage">                        

        <LinearDoubleKeyFrame KeyTime="00:00:00" Value="0"></LinearDoubleKeyFrame>

        <LinearDoubleKeyFrame KeyTime="00:00:02" Value="120"></LinearDoubleKeyFrame>

        <SplineDoubleKeyFrame KeyTime="00:00:04" Value="120"></SplineDoubleKeyFrame>

        <SplineDoubleKeyFrame KeyTime="00:00:06" Value="0"></SplineDoubleKeyFrame>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" 

                                   Storyboard.TargetName="MyMage">

        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0"></SplineDoubleKeyFrame>

        <SplineDoubleKeyFrame KeySpline="1.0,0.0 1.0,0.00" KeyTime="00:00:04" Value="80"></SplineDoubleKeyFrame>

        <DiscreteDoubleKeyFrame KeyTime="00:00:07" Value="0"></DiscreteDoubleKeyFrame>

    </DoubleAnimationUsingKeyFrames>

</Storyboard>

Syndication : Mike Snow’s Weblog
Traduction autorisée par Mike Snow.