Cet article est le deuxième d'une série d'articles que je consacrerai à Silverlight.
Nous venons de voir comment placer simplement des contrôles dans une application web Silverlight. Expression Blend 3 permet de créer facilement des animations, agissant sur l’aspect visuel des contrôles placés dans l’application.
On parlera de Storyboard, ou suite de dessins décrivant une séquence plans par plans que l’on personnalisera avec notre outil.
Dans un premier temps, nous prendrons conscience du Storyboard, puis nous allons ensuite modifier notre application Silverlight en ajoutant les animations nécessaires.
Storyboard :
- Deux lignes noires qui disparaissent en 2 secondes. La ligne du dessus (1) se réduit vers la droite, celle du dessous (2) vers la gauche.
- Une étiquette « Hello World ! » (3) qui apparait en dégradé.
t=0s : invisible
t=2s : visible
Aperçu en 3 étapes :
On compte donc au total deux animations à ajouter au projet : la première agissant sur les deux lignes, et la deuxième sur l’opacité de l’étiquette (sera faite avec Visual Studio 2010).
Note : pour exécuter cet exemple, suivre Création de figures géométriques à l’aide d’Expression Blend 3.
Commençons par ouvrir notre projet avec Expression Blend 3. Le volet traitant des animations est situé en bas à gauche, il s’agit de l’onglet “Arbre visuel et animation”. On y retrouve les contrôles placés précédemment.
Afin de clarifier les choses, renommons les IDs des contrôles de la façon suivante : “ligne1” et “ligne2” pour les contrôles Path et “tbkHelloWorld” pour le contrôle TextBlock :
Nous allons commencer par créer l’animation des lignes. Afin de créer une nouvelle animation, cliquez sur le bouton + :
Saisissez le nom du Storyboard : “Storyboard_lignes”
Désormais, la fenêtre affiche l’animation en cours de personnalisation, l’enregistrement est activé :
Pour modifier l’animation on utilisera la frise chronologique suivante :
Tout animation à un point de départ, par lequel l’animation commencera. Pour créer ce point de départ, il faut ajouter une “image clé” qui servira de base pour la suite. L’image clé est propre à chaque contrôle, il peut donc y en avoir plusieurs dans une même animation, elle sert à définir l’état visuel du contrôle à un instant choisi dans la frise.
Sélectionnez d’abord la ligne 1 et pour l’insérer dans la frise, puis cliquez sur 
On remarque alors l’ajout d’une ellipse dans la frise, symbolisant l’image clé de base :
La prochaine étape sera de définir l’état de nos lignes au bout de 2 secondes. Pour cela, déplacez la ligne verticale jaune à t=2secondes, et insérez une image clé :
On remarque dans la fenêtre « Arbre visuel et animation » l’ajout d’un rond rouge à côté de ligne1, validant l’ajout d’une animation pour ligne1 :
Afin d’ajouter une animation affectant ligne2, on sélectionne la ligne 2, et on insère une image clé à t=0seconde, et t=2secondes. On obtient ce résultat :
Pour l’instant, l’animation “Storyboard_lignes” a été définie sur une durée de 2 secondes, elle affecte les contrôles ligne1 et ligne2, et ne modifie pas encore l’aspect visuel des lignes.
Afin de modifier l’aspect des lignes à t=2secondes, placer la barre jaune chronologique sur 2 si ce n’est pas le cas. La différence (de position, taille, couleur, etc..) entre l’état initial et final des contrôles constituera l’animation.
- Sélectionner le côté gauche de la ligne 1, puis le glisser vers la droite pour réduire sa longueur jusqu’à ce qu’il ne soit plus visible :
- Faire de même pour ligne2, sélectionner le côté droit, puis le glisser vers la gauche :
Afin de valider le changement d’état entre t=0 et t=2, vous avez la possibilité de visualiser l’état des contrôles dans le temps en sélectionnant la barre jaune chronologique et en la déplaçant entre 0 et 2 secondes. Vérifiez que vous ayez bien vos deux lignes visibles à l’état initial (t = 0 seconde) et qu’elles ne sont plus visibles à l’état final (t = 2 secondes) :
La création de l’animation des lignes avec Expression Blend 3 est terminée. Pour tester l’animation depuis Expression Blend 3, cliquez sur Lecture :
Essayez de lancer la génération du projet pour l’ouvrir dans votre navigateur, vous remarquerez que l’animation ne démarre pas. En effet, il est nécessaire de la démarrer manuellement par code lorsque l’application termine son chargement (évènement Loaded).
Nous verrons ce point dans la suite à venir de cet article, qui traitera des animations avec Visual Studio 2010.
Téléchargez le projet (141kb) :
