Essayez ! exécuter des transitions graduelles et non graduelles entre animations

Lorsque plusieurs chronologies d’animation animent la même propriété simultanément, la transition se comporte différemment si une image clé est enregistrée à la marque 0 seconde. La procédure suivante permet de comprendre le fonctionnement des transitions graduelles entre animations et des transitions non graduelles entre animations.

Pour comparer les transitions graduelles entre animations et les transitions non graduelles entre animations

1. Dans Microsoft Expression Blend, ouvrez ou créez un projet. Pour plus d’informations, voir Créer un projet.

2. Appuyez sur F6 pour basculer vers l’Espace de travail d’animation. (F6 permet de basculer entre les espaces de travail disponibles. Dans l’Espace de travail d’animation, le panneau Objets et chronologie se trouve sous la planche graphique).

3. Cliquez sur le bouton Fermer la table de montage séquentiel  dans le panneau Objets et chronologie.

   Conseil :
   Lorsque une table de montage séquentiel s’ouvre, toute modification de propriété que vous apportez enregistre automatiquement une image clé sur la chronologie dans la table de montage séquentiel.

4. Sélectionnez Ellipse  dans le panneau Outils. Dessinez un cercle au centre de la planche graphique. Vous pouvez définir des valeurs identiques pour les propriétés Hauteur et Largeur dans la catégorie Disposition du panneau Propriétés afin que l’ellipse soit un cercle parfait. En cas de détourage, modifiez les propriétés de Marge.

5. Dans le panneau Objets et chronologie, cliquez sur le bouton Nouveau .

   La boîte de dialogue Créer la ressource Table de montage séquentiel s’affiche.

6. Dans le champ Nom de la ressource (Clé), entrez le nom Double, puis cliquez sur OK.

   Expression Blend passe au mode enregistrement de chronologie, le curseur de lecture placé sur la marque 0 seconde. En mode enregistrement, les propriétés que vous définissez enregistrent automatiquement une image clé sur la chronologie.

7. Ne définissez pas une image clé à la marque 0 seconde. Faites plutôt glisser le curseur de lecture sur la marque 1 seconde.

8. Sélectionnez l’outil Sélection dans le panneau Outils, maintenez la touche Alt enfoncée, puis faites glisser la poignée de largeur de l’ellipse jusqu’à ce que l’ellipse atteigne deux fois sa largeur d’origine.

   Une image clé est automatiquement définie à la marque 1 seconde pour la propriété ScaleX.

   Conseil :
   Maintenir la touche Alt enfoncée lorsque vous redimensionnez un objet sur la planche graphique permet de conserver le point central.

9. Dans le panneau Objets et chronologie, développez les nœuds sous l’ellipse jusqu’à afficher le nœud ScaleX. Cliquez avec le bouton droit sur le nœud ScaleX ou sur la barre de temps grise qui représente l’intervalle de temps, puis cliquez sur Modifier la valeur de répétition.

   La boîte de dialogue Modifier la répétition s’affiche.

10. Pour répéter la chronologie à l’infini, cliquez sur le bouton Définirsur l’infini, puis sur OK.

11. Dans le panneau Objets et chronologie, cliquez sur le bouton Nouveau .

    La boîte de dialogue Créer la ressource Table de montage séquentiel s’affiche.

12. Dans le champ Nom de la ressource (Clé), entrez le nom Quadruple, puis cliquez sur OK.

    Expression Blend passe au mode enregistrement de la deuxième chronologie, en commençant par la taille d’origine de l’ellipse.

13. Comme précédemment, ne définissez pas une image clé à la marque 0 seconde. Faites plutôt glisser le curseur de lecture sur la marque 1 seconde.

14. Sélectionnez l’outil Sélection du panneau Outils, maintenez la touche Alt enfoncée, puis faites glisser la poignée de largeur de l’ellipse jusqu’à ce que l’ellipse atteigne quatre fois sa largeur d’origine.

    Une image clé est automatiquement définie à la marque 1 seconde pour la propriété ScaleX.

15. Cliquez avec le bouton droit sur le nœud ScaleX ou sur la barre de temps grise qui représente l’intervalle de temps, cliquez sur Modifier la valeur de répétition, sur Définir sur l’infini, puis sur OK.

16. Vous pouvez maintenant définir des déclencheurs pour vos animations. Par défaut, une nouvelle chronologie créée dans la racine de votre document entraîne l’ajout d’un déclencheur d’événements dans le panneau Déclencheurs pour l’événement Window.Loaded. Vous pouvez conserver ce déclencheur pour la chronologie Double et en ajouter un pour la chronologie Quadruple.

17. Dans le panneau Déclencheurs, sélectionnez le déclencheur Window.Loaded. Les actions du déclencheur sont affichées sous Quand Window.Loaded se déclenche. Cliquez sur le signe moins en regard de Quadruple.Begin pour supprimer cette action.

    Dès lors, l’animation Double commence au démarrage de l’application, contrairement à l’animation Quadruple.

    Conseil :
    Vous devrez peut-être modifier la taille du panneau Déclencheurs afin d’afficher la section Propriétés une fois actif. Pour modifier la taille, cliquez sur les bordures et sur la bordure interne du panneau et faites-les glisser.

18. Pour ajouter le déclencheur de l’animation Quadruple, cliquez sur le bouton Ajouter un déclencheur d’événements dans le panneau Déclencheurs.

    Un déclencheur Window.Loaded est créé.

19. Sélectionnez l’ellipse dans le panneau Objets et chronologie, puis dans le panneau Déclencheurs, utilisez les zones de liste déroulante pour changer le nouveau déclencheur Quand Window.Loadedse déclenche en Quand ellipse.MouseEnterse déclenche.

20. Cliquez sur le bouton Ajouter une nouvelle action en regard de Quand ellipse.MouseEnter se déclenche, puis utilisez les zones de liste déroulante pour changer la nouvelle action en Quadruple.Begin.

    Dès lors, lorsque du déplacement du pointeur sur l’ellipse, l’animation Quadruple interrompt l’animation Double.

21. Ajoutez un déclencheur d’événements, changez-le en Quand ellipse.MouseLeavese déclenche, puis ajoutez une action pour Double.Begin.

    Dès lors, lors du déplacement du pointeur hors de l’ellipse, l’animation Double interrompt l’animation Quadruple.

22. Pour visualiser la chronologie d’animation et le déclencheur d’événements créés, testez votre scène en cliquant sur Tester le projet dans le menu Projet.

    Aucune image clé n’est définie à la marque 0 seconde pour les animations. La transition résultante entre les animations est appelée transition graduelle entre animations. Lorsque vous interrompez une animation avec l’autre, le transfert de l’animation s’effectue en toute transparence à partir de la largeur au moment de l’interruption jusqu’à la première image clé de l’animation suivante. Si vous déplacez le pointeur à l’intérieur de l’ellipse à la fin de l’animation Double, le point de départ de l’animation Quadruple ne sera pas de la taille d’origine de l’ellipse ; l’animation Quadruple commencera à la largeur de l’ellipse lorsque vous avez déplacé le pointeur. Lorsque vous déplacez le pointeur de la souris hors de l’ellipse, l’animation Double apparaît comme l’inverse de l’animation Quadruple en raison de la transition qui se produit entre les deux animations.

23. Quittez votre application pour revenir à Expression Blend.

24. Dans le panneau Objets et chronologie, sélectionnez le nœud ScaleX de l’ellipse, sélectionnez la chronologie Quadruple, déplacez le curseur de lecture vers la marque 0 seconde, puis cliquez sur le bouton Enregistrer l’image clé.

25. Testez de nouveau votre animation. Le comportement de la transition change. Lorsque vous déplacez le pointeur de la souris dans l’ellipse, l’animation Quadruple commence à la taille d’origine de l’ellipse.

    Vous pouvez étudier un autre comportement de transition en ajoutant une image clé à la marque 0 seconde de l’animation Double et en procédant à un nouveau test, puis en supprimant l’image clé à la marque 0 seconde de l’animation Quadruple, puis en procédant à un nouveau test.