Astuce Silverlight : Animer des objets avec DoubleAnimation - #S020

En Silverlight vous pouvez utiliser le contrôle Storyboard pour animer une propriété d’un objet. Il peut être utilisé pour des propriétés de type double, Color ou Point. Par exemple vous pouvez animer le changement de la propriété Opacity de type double d’un Rectangle en fonction du temps. Un Storyboard peut être déclaré dans votre XAML mais doit être placé comme une ressource. Par exemple, le Storyboard suivant est déclaré comme une ressource d’un objet Canvas :

 
<Canvas>                 

    <Canvas.Resources>

        <Storyboard x:Name="MyRect">

        </Storyboard>

    </Canvas.Resources>

</Canvas>

Le contrôle Storyboard fournit deux options pour l’animation :

1. DoubleAnimation – Utilise une direction De/Vers.
2. DoubleAnimationUsingKeyFrames – Il s’agit d’un conteneur pour un ensemble d’images clés qui vont déterminer la valeur pour un ensemble de points donné sur la ligne du temps. Nous verrons cette option dans la prochaine astuce.

DoubleAnimation.

Comme je l'ai dit précédemment, DoubleAnimation utilise une direction (De/Vers) qui prend la propriété cible à partir une valeur à une autre. Examinons maintenant certaines des propriétés que DoubleAnimation fournit :

1. Storyboard.TargetProperty – A utiliser pour cibler la propriété que vous souhaiter animer. Cela doit être dans le format UIElement.Property.
2. Storyboard.TargetName – A utiliser pour cibler l’objet que vous voulez animer.
3. Duration – Utilisez cette propriété pour spécifier le temps que dois prendre l’annimation. Format = [jours.]heures:minutes:secondes.
4. From/To – Les valeurs de début et de fin que vous voulez définir pour la propriété. Par défaut From = 1.0 et ne doit pas être défini à moins que vous ne vouliez une valeur différente.
5. AutoReverse – Cela entraînera l’inversion de l'animation une fois qu'elle est terminée.
6. RepeatBehavior – Definissez la à “Forever” pour une répétition infinie. Vous pouvez également définir la durée (format = [jours.]heures:minutes:secondes) ou un nombre d’itérations.

L’exemple suivant montre comment, avec DoubleAnimation nous modifions l’opacité d’une image en continue.

 
<Canvas>                 

    <Canvas.Resources>

        <Storyboard x:Name="CatSB">

            <DoubleAnimation Storyboard.TargetName="MyCat" Storyboard.TargetProperty="UIElement.Opacity"

                             Duration="00:00:02" From="1.0" To="0.0" 

                             AutoReverse="True"  RepeatBehavior="Forever">                        

            </DoubleAnimation>

        </Storyboard>

    </Canvas.Resources>

    <Image Source="cat.jpg" x:Name="MyCat" >              

    </Image>

</Canvas>

Pour démarrer le Storyboard nous appelons la méthode CatSB.Begin(); depuis notre code.

Demo Live :

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