Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez aussi afficher la version anglaise dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte.
Traduction
Anglais

Essayez ! Créer des animations qui se chevauchent

Cette page s’applique uniquement aux projets WPF

La structure de la chronologie dans Blend for Visual Studio vous permet d'exécuter plusieurs chronologies d'animation en même temps dans votre application. La procédure suivante montre comment créer une animation avec un papillon qui se déplace en continu dans un cercle, mais bat des ailes lorsque l'utilisateur déplace le pointeur de la souris sur lui.

Remarque Remarque

La procédure suivante utilise des déclencheurs dans un projet Windows Presentation Foundation (WPF) pour contrôler les tables de montage séquentiel. Vous pouvez aussi utiliser le comportement ControlStoryboardAction pour contrôler les tables de montage séquentiel dans WPF ou dans Microsoft Silverlight. Pour plus d’informations sur l'utilisation d'un comportement, voir Ajouter un comportement à un objet.

Pour créer des animations qui se chevauchent

  1. Dans Blend for Visual Studio, ouvrez ou créez un nouveau projet WPF. Pour plus d'informations, consultez Créer un document dans Blend.

  2. Basculez vers l'espace de travail Animation. (Ctrl+F11 permet de basculer entre les espaces de travail disponibles. Dans l’espace de travail Animation, le panneau Objets et chronologie se trouve sous la planche graphique).

  3. Si une table de montage séquentiel est ouverte, cliquez sur Fermer la table de montage séquentiel JJ170453.4c066464-3a41-452d-b2e9-e95f6c5659ff(fr-fr,VS.120).png dans le panneau Objets et chronologie.

    Remarque Remarque

    Lorsqu’une chronologie autre que la chronologie Par défaut est sélectionnée, toute modification apportée à une propriété enregistre automatiquement une image clé sur la chronologie.

  4. Sélectionnez EllipseJJ170453.d7a04618-e35a-44f9-b78c-1f22e38016c1(fr-fr,VS.120).png dans le panneau Outils. Dessinez deux petits cercles à droite de la planche graphique. Vous pouvez définir des valeurs identiques pour les propriétés Height et Width dans la catégorie Disposition du panneau Propriétés afin que les ellipses soient des cercles parfaits. En cas de détourage, modifiez les propriétés de Marge.

  5. Choisissez SélectionJJ170453.2ff91340-477e-4efa-a0f7-af20851e4daa(fr-fr,VS.120).png dans le panneau Outils, puis rapprochez les cercles, comme dans l’image ci-après :



    Deux cercles tracés sur la planche graphique

    JJ170453.9d303fc9-9be5-4904-a740-28ed53f85fdc(fr-fr,VS.120).png
  6. Pour utiliser les deux cercles en même temps, sélectionnez un cercle dans le panneau Objets et chronologie, maintenez la touche Ctrl enfoncée pour sélectionner l’autre cercle, cliquez avec le bouton droit sur les cercles sélectionnés, sélectionnez Grouper, puis cliquez sur Grid.

    Un nouveau panneau de disposition Grid contenant les deux cercles apparaît dans le panneau Objets et chronologie.

  7. Pour renommer l’objet Grid, cliquez dessus avec le bouton droit, puis sélectionnez Renommer. Changez le nom en Papillon.

  8. Pour créer l’animation circulaire, vous pouvez utiliser l’outil Convertir en trajectoire qui crée une chronologie d’animation à partir d’une trajectoire. Dessinez une troisième ellipse au centre de la planche graphique, d’une largeur correspondant environ à la moitié de celle de la surface de la planche graphique.

  9. Sélectionnez la nouvelle ellipse dans le panneau Objets et chronologie, sélectionnez Tracé dans le menu Objet, puis cliquez sur Convertir en trajectoire.

    La boîte de dialogue Choisir la cible de la trajectoire s’affiche.

  10. Sélectionnez l’objet GridPapillon dans la liste des objets disponibles sur la planche graphique, puis cliquez sur OK.

    Une chronologie est créée. Blend passe en mode enregistrement de la chronologie pour vous permettre de cliquer sur le bouton Lecture JJ170453.64ad8e84-1eec-4154-9d0c-11fef322c0bf(fr-fr,VS.120).png afin d’afficher l’animation sur la planche graphique. La cible (Papillon) se déplace le long de la trajectoire créée à partir de l’ellipse. Notez que si la propriété Fill de l’ellipse a pour valeur un pinceau, une partie de l’objet Papillon sera couverte.

  11. Vous n’avez plus besoin de la troisième ellipse. Supprimez-la.

  12. Dans le panneau Objets et chronologie, développez les nœuds des éléments Papillon, RenderTransform et Translation de façon à visualiser l’intervalle de temps de la trajectoire. Cliquez avec le bouton droit sur l’élément Trajectoire 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.

  13. Pour répéter la chronologie à l’infini, cliquez sur Définir sur toujoursJJ170453.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(fr-fr,VS.120).png, puis sur OK.

    Lorsque cette animation s’exécute, elle est lue en boucle.

  14. Dans le panneau Objets et chronologie, cliquez sur le bouton Nouveau JJ170453.86937695-03dd-44ea-aa30-28d4029b3ad0(fr-fr,VS.120).png.

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

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

    Blend passe au mode enregistrement de chronologie, la tête de lecture JJ170453.5626c9eb-40bb-450a-9ca1-3678e5abe429(fr-fr,VS.120).png placée sur la marque 0 seconde. En mode enregistrement, les propriétés que vous définissez enregistrent automatiquement une image clé sur la chronologie.

  16. Pour définir une image clé à la position 0 seconde, sélectionnez l’objet GridPapillon, puis cliquez sur Enregistrer l’image clé JJ170453.e8ec61d4-c8e8-465a-85a7-70bf787a67de(fr-fr,VS.120).png.

    Une image clé JJ170453.fa3c696d-5463-4000-8a6b-650fe6759bf7(fr-fr,VS.120).png s’affiche sur la chronologie, dans la ligne qui correspond à l’objet PapillonGrid.

  17. Faites glisser le curseur de lecture vers la marque 1 seconde, puis enregistrez une autre image clé.

    Les positions de départ et d’arrivée de votre animation sont désormais définies.

  18. Faites glisser le curseur de lecture vers la marque 0,5 seconde, entre les deux images clés précédentes.

  19. Sélectionnez l’outil Sélection du panneau Outils, maintenez la touche Alt enfoncée, puis sur la planche graphique, étirez la hauteur et compressez la largeur de l’objet GridPapillon pour qu’il ressemble à l’image ci-dessous.

    Étant donné qu’Blend est en mode enregistrement de la chronologie d’animation Battement, la modification de l’objet GridPapillon définit de nouvelles images clés sur la marque 0,5 seconde pour les propriétés ScaleX et ScaleY de l’objet Grid.



    Étirement de l’objet Grid sur la planche graphique

    JJ170453.a6857649-160b-446f-b998-a135389a19be(fr-fr,VS.120).png
  20. Dans le panneau Objets et chronologie, développez les nœuds de l’objet GridPapillon jusqu’à ce que les nœuds ScaleX et ScaleY s’affichent. Sélectionnez les nœuds l’un après l’autre, cliquez dessus avec le bouton droit, sélectionnez Modifier la valeur de répétition, puis dans la boîte de dialogue Modifier la répétition, entrez 2 afin d’exécuter la chronologie à deux reprises, puis cliquez sur OK.

  21. Cliquez sur le bouton Lecture pour tester votre animation sur la planche graphique. Notez que la valeur de répétition n’est pas prise en compte pour la lecture sur la planche graphique. Si vous souhaitez modifier la chronologie de votre animation, vous pouvez déplacer les images clés sur la barre grise représentant l’intervalle de temps.

    Remarque Remarque

    Si l’espace est insuffisant pour afficher l’intégralité de la chronologie, vous pouvez utiliser la zone de texte Zoom de la chronologie pour appliquer un zoom arrière à la chronologie. Vous pouvez également modifier la largeur des panneaux pour agrandir l’affichage du panneau Objets et chronologie.

  22. 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 qui se produit au démarrage de votre application.

    Vous pouvez conserver ce déclencheur pour la chronologie circulaire et en ajouter un pour la chronologie Battement.

  23. 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 Battement.Begin pour supprimer cette action.

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

    Remarque Remarque

    Vous devrez éventuellement régler la taille du panneau Déclencheurs pour voir 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.



    Suppression de l’animation Battement du déclencheur Windows.Loaded

    JJ170453.7f6ed2c1-373a-4bf1-8008-0380917c618d(fr-fr,VS.120).png
  24. Pour ajouter le déclencheur de l’animation Flap, cliquez sur le bouton Add event triggerJJ170453.671c69bb-32e9-4ef9-9837-29403524abd0(fr-fr,VS.120).png dans le panneau Triggers.

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

  25. Sélectionnez l’objet GridPapillon dans le panneau Objets et chronologie, puis dans le panneau Déclencheurs, utilisez les zones déroulantes pour changer le nouveau déclencheur Quand Window.Loaded se déclenche en Quand Papillon.MouseEnter se déclenche.

  26. Cliquez sur Ajouter une nouvelle actionJJ170453.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(fr-fr,VS.120).png en regard de Quand Butterfly.MouseEnter se déclenche, puis utilisez les zones de liste déroulante pour changer la nouvelle action en Flap.Begin.

    Dès lors, lorsque le pointeur se déplace sur le papillon, la chronologie d’animation Battement commence.



    Création d’un nouveau déclencheur pour l’événement MouseEnter de l’objet Grid

    JJ170453.c0eee764-9e82-492e-92a8-5540d15c3abe(fr-fr,VS.120).png
  27. 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.

    Remarque Remarque

    Si l’animation circulaire est trop rapide, vous pouvez modifier le temps d’exécution de la chronologie. Dans le panneau Objets et chronologie, sélectionnez la trajectoire dans la zone déroulante, développez les nœuds sous l’objet Grid jusqu’à ce que le nœud Trajectoire s’affiche, sélectionnez l’extrémité droite de la barre de temps grise, puis faites-la glisser vers la droite pour allonger la durée.

    Vous pouvez également supprimer la chronologie circulaire, en créer une autre, puis commencer à l’étape 8 (dessinez une ellipse) pour créer la trajectoire. (Si vous ne créez pas une chronologie avant de commencer à l’étape 8, l’animation circulaire sera ajoutée à la chronologie d’animation Battement.)

Afficher: