Partager via


Animation d'objets

L’animation crée une illusion en parcourant rapidement une série d’images, dans laquelle chaque image diffère légèrement de celle qui la précède. Le cerveau perçoit la séquence d’images comme une même scène en mouvement. Dans un film, un appareil photo crée cette illusion en enregistrant plusieurs photos, ou images, par seconde. Lorsque les images sont lues par un projecteur, le public voit une image en mouvement. L’animation informatique est similaire, à ceci près que les images enregistrées peuvent être plus éloignées dans le temps, car l’ordinateur interpole et anime les modifications intermédiaires.

Fonctionnement d’une animation dans Expression Blend

Dans Microsoft Expression Blend, les animations reposent sur des images clés qui définissent les points de départ et d’arrivée d’une transition visuelle en douceur. Pour créer une animation dans Expression Blend, vous créez une table de montage séquentiel et, dans celle-ci, vous définissez des images clés sur une chronologie pour marquer les changements de propriétés. Par exemple, vous pouvez définir une image clé à la marque 0 seconde pour enregistrer la position d’un rectangle à gauche de la planche graphique, puis définir une image clé à la marque 1 seconde pour enregistrer la position de ce même rectangle à droite de la planche graphique. L’animation obtenue est basée sur la transformation qui se produit pour les propriétés X et Y du rectangle en une seconde. Lorsque vous exécutez une table de montage séquentiel d’animation, Expression Blend réalise l’interpolation des changements de propriétés sur la période désignée et affiche le résultat dans votre application. Vous pouvez animer toutes les propriétés qui appartiennent à un objet sur la planche graphique de cette façon, même les propriétés non visuelles.

Images clés définies sur une chronologie dans une table de montage séquentiel nommée « MoveRight », indiquant des changements de propriétés dans les propriétés de translation en X et Y d’un objet rectangle

Cc295346.982f031a-74a3-414a-abc2-a0f41a741075(fr-fr,Expression.40).png

Dans certains programmes d’animation, vous pouvez créer des animations image par image , ce qui signifie que chaque image peut contenir une image différente (ou objet). Les animations résultantes peuvent être très volumineuses et gourmandes en ressources lors de l’exécution. C’est pourquoi les animations Expression Blend reposent sur des images clés qui enregistrent les changements apportés aux propriétés, en animant la transition entre les changements de propriétés lors de l’exécution. En outre, dans Expression Blend, tous les objets à afficher ou faire disparaître au cours d’une chronologie d’animation sont présents dans toute la chronologie. Toutefois, vous pouvez utiliser des images clés pour modifier leurs propriétés de visibilité et les faire apparaître ou disparaître.

NoteRemarque :

Même si vous ne pouvez pas créer spontanément des objets dans une table de montage séquentiel dans Expression Blend, vous pouvez générer de nouveaux objets et de nouvelles tables de montage séquentiel d’animation par programme dans les fichiers code-behind . Pour plus d’informations, voir les rubriques Animation et minutage Cc295346.xtlink_newWindow(fr-fr,Expression.40).png dans la section Windows Presentation Foundation de MSDN.

Tables de montage séquentiel

Les tables de montage séquentiel sont des conteneurs qui contiennent des chronologies d’animation. Expression Blend comprend un contrôle de sélecteur de tables de montage séquentiel, à partir duquel vous pouvez sélectionner et rechercher des tables de montage séquentiel dans votre projet.

Pour plus d’informations, voir Ouvrir ou fermer une table de montage séquentiel.

Sélecteur de tables de montage séquentiel répertoriant plusieurs tables de montage séquentiel pouvant être ouvertes

Cc295346.d13d140b-75cf-48f7-a3fa-bdfbd3e62db5(fr-fr,Expression.40).png

Lorsqu’une table de montage séquentiel est sélectionnée, un menu contextuel vous permet de dupliquer, d’inverser, de supprimer, de renommer ou de fermer celle actuellement sélectionnée ou d’en créer une autre.

Pour plus d’informations, voir Dupliquer ou inverser une table de montage séquentiel et Renommer une table de montage séquentiel.

Menu contextuel de table de montage séquentiel

Cc295346.74b1f5aa-10f5-40fc-b786-c9de76cb87ca(fr-fr,Expression.40).png

Vous pouvez définir les propriétés des tables de montage séquentiel afin que celles-ci s’inversent ou se répètent automatiquement lorsqu’elles atteignent la fin de leur dernière chronologie.

Pour plus d’informations, voir Modifier une table de montage séquentiel pour la répétition ou l’inversion.

Vous pouvez créer des tables de montage séquentiel dans les emplacements (ou étendues) ci-après de votre application :

  • Dans le corps principal de votre document    Si l’objectif de votre application est de présenter une animation, ou si vous n’avez pas besoin de réutiliser l’animation, vous pouvez créer des chronologies d’animation dans le corps principal de votre document.

    Pour obtenir un exemple, voir Créer une animation simple.

  • Dans une scène ou un contrôle utilisateur    Si vous devez réutiliser une animation plusieurs fois dans un seul document, ou dans une autre application, vous pouvez créer des chronologies d’animation dans un contrôle utilisateur . Cela est également utile pour organiser vos animations dans différents documents ou projets. Les contrôles utilisateur peuvent être ajoutés à la planche graphique comme n’importe quel autre contrôle (tel qu’un bouton). Pour plus d’informations, voir la section « Scènes » qui suit.

    Pour obtenir un exemple, voir Créer un contrôle utilisateur vide ou Créer un contrôle utilisateur dans votre projet.

  • Dans le modèle d’un contrôle    Si vous souhaitez animer de la même façon tous les contrôles d’un type spécifique (tels que des boutons) dans votre application, vous pouvez créer l’animation dans le modèle du contrôle. Cela ne signifie pas que tous les contrôles doivent être identiques. Si vous utilisez la liaison de modèle (liaison d’une propriété dans le modèle à une propriété dans le contrôle auquel le modèle est appliqué), chaque contrôle peut avoir une couleur ou une apparence différente dans l’animation.

    Pour plus d’informations, voir Sélection et utilisation de contrôles interactifs. Pour obtenir un exemple de Windows Presentation Foundation (WPF), voir Essayez ! Ajouter de l’animation à un bouton.

  • Dans un état    Pour modifier l’animation existante après être passé à un nouvel état, vous pouvez sélectionner l’état dans le panneau États, puis cliquer sur Afficher la chronologie Cc295346.d5d49398-e7e2-48f6-82e0-7ab34fda33ea(fr-fr,Expression.40).png dans le panneau Objets et chronologie pour effectuer les modifications.

    Pour plus d’informations sur l’utilisation des états, voir Définition d'états visuels différents pour un contrôle.

Vous pouvez contrôler les tables de montage séquentiel (début, arrêt, interruption) à l’aide de déclencheurs définis sur les objets, à l’aide de comportements ou de gestionnaires d’événements.

Pour plus d’informations, voir Contrôler le moment auquel la table de montage séquentiel s’exécute.

Chronologies

Les chronologies fournissent la structure des séquences d’animation dans votre application. Une animation dans Expression Blend est composée d’une chronologie sur laquelle vous enregistrez des images clés qui représentent la chronologie des changements de propriétés. Vous pouvez comparer les chronologies à des couches de changements de propriétés appliqués aux objets sur la planche graphique. Les chronologies sont contenues dans des tables de montage séquentiel.

Vous devez utiliser des chronologies d’animation dans le panneau Objets et chronologie. Au moyen des contrôles disponibles dans ce panneau, vous pouvez afficher l’évolution de la planche graphique avec le temps, ajouter et modifier des chronologies et bien plus encore.

Images clés

Une image cléCc295346.fa3c696d-5463-4000-8a6b-650fe6759bf7(fr-fr,Expression.40).png est un marqueur sur la chronologie qui indique un changement de propriété. Expression Blend possède les quatre types d’images clés suivants :

  • Les images clés au niveau objet s’appliquent à un objet entier, tel qu’un objet rectangle , ou à un objet grid qui contient plusieurs objets. Généralement, sauf si elle a été définie manuellement en cliquant sur le bouton Enregistrer l’image clé, une image clé au niveau objet indique qu’une propriété se trouve dans un des objets enfants qui a été modifié, ce que vous pouvez constater en développant les nœuds sous l’objet. Par exemple, dans l’image précédente (de la section « Fonctionnement d’une animation dans Expression Blend », plus haut dans cette rubrique), l’image clé définie dans la ligne sur la chronologie qui correspond au Rectangle est une image clé au niveau objet.

  • Les images clés composées    Les images clés composées indiquent que la propriété possède des propriétés enfants animées. Par exemple, dans l’image précédente, l’image clé définie dans la ligne sur la chronologie qui correspond à la propriété Translate est une image clé composée. Vous pouvez utiliser les images clés composées pour modifier de grands groupes de propriétés en une seule fois et en une seule sélection, par exemple, lorsque vous déplacez des images clés le long de la chronologie.

  • Les images clés simples représentent un seul changement de propriété à ce moment donné. Par exemple, dans l’image précédente, les images clés définies dans les lignes sur la chronologie qui correspondent aux propriétés X et Y sont des images clés simples. Vous devez utiliser des images clés simples pour effectuer certaines actions, telles que modifier la valeur de répétition d’une animation.

    Pour obtenir un exemple, voir Définir la durée de la boucle.

  • Les images clés implicites sont présentes lorsqu’une animation est interrompue par une autre, et qu’aucune image clé n’est définie à la marque 0 seconde de la deuxième animation. Lors de l’interruption, Expression Blend anime le changement entre la dernière valeur connue d’une propriété et la valeur définie sur la première image clé de la deuxième animation. La dernière valeur connue est considérée comme une image clé implicite, même si la valeur se trouve entre deux images clés de la première animation. Cette transition est appelée transition graduelle entre animations et est décrite plus en détail dans la section « Utilisation de plusieurs chronologies d’animation superposées » ci-après.

Il est utile de connaître la différence entre les images clés car il n’est pas toujours nécessaire d’afficher les détails de chaque propriété animée. À la place, vous pouvez réduire les propriétés de chaque objet et afficher uniquement les images clés au niveau objet. Vous pouvez utiliser les images clés au niveau objet et composées pour modifier de grands groupes de propriétés en une seule fois et en une seule sélection, par exemple, lorsque vous souhaitez déplacer des images clés le long de la chronologie.

Pour obtenir un exemple, voir Coller ou déplacer une image clé.

Vous devez utiliser des images clés simples pour effectuer certaines actions, telles que modifier la valeur de répétition d’une animation.

Pour obtenir un exemple, voir Définir la durée de la boucle.

Transition entre images clés

L’ interpolation d’images clés décrit le mode d’animation des changements de propriétés dans un intervalle de temps entre deux images clés.

Vous pouvez modifier des valeurs d’interpolation d’images clés en sélectionnant les valeurs prédéfinies Atténuer + ou Atténuer, en modifiant un graphique KeySpline, ou en utilisant une option prédéfinie EasingFunction qui représente un graphique KeySpline complexe.

Éditeur de courbe clé permettant de créer une interpolation personnalisée entre les images clés

Cc295346.7ec8ec80-9667-4e95-9dd6-16cf9199b83b(fr-fr,Expression.40).png

Pour plus d’informations, voir Changer l’interpolation d’animation entre les images clés.

Création de chronologies manuellement ou en utilisant des trajectoires

NoteRemarque :

Les trajectoires ne sont pas prises en charge dans les projets Microsoft Silverlight.

Créer une chronologie d’animation manuellement offre davantage de contrôle sur le mouvement et le nombre d’objets animés par la chronologie. Vous pouvez aussi créer des animations entre les couleurs. Pour créer une chronologie d’animation manuellement dans Expression Blend, cliquez sur le bouton NouveauCc295346.86937695-03dd-44ea-aa30-28d4029b3ad0(fr-fr,Expression.40).png sous Objets et chronologie, puis enregistrez les images clés en déplaçant tout d’abord la tête de lecture de chronologie Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(fr-fr,Expression.40).png, puis en modifiant un objet sur la planche graphique pour générer une image clé.

Pour obtenir un exemple, voir Créer une animation simple.

Vous pouvez créer une chronologie d’animation automatiquement avec l’outil Convertir en trajectoire qui fait suivre un tracé à un objet sur la planche graphique, qu’il s’agisse d’une ligne ou du périmètre d’une forme (telle qu’une ellipse ou un rectangle). Comme illustré dans l’image suivante, le périmètre de l’ellipse devient la trajectoire du cercle bleu.

Création d’une chronologie d’animation à l’aide d’une trajectoire

Cc295346.0b7efb11-9146-4bc5-a61f-2dc595f5cf5d(fr-fr,Expression.40).png

Cc295346.25182a96-9a69-478a-9cfe-5b360e6a9bea(fr-fr,Expression.40).png

Deux objets distincts : ellipse et circle (créés à l’aide de l’outil Ellipse).

Cc295346.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(fr-fr,Expression.40).png

L’objet ellipse devient une trajectoire. Vous pouvez éventuellement supprimer l’ ellipse à ce stade.

Cc295346.f0c1ff71-7814-42ba-806b-7ea92d616e69(fr-fr,Expression.40).png

Une nouvelle chronologie est créée qui, lorsqu’elle est lue, déplace le circle le long du tracé elliptique.

Pour un exemple de génération de chronologies d’animation à l’aide de trajectoires, voir Créer, modifier ou supprimer une trajectoire.

Les trajectoires ne sont pas représentées sur la chronologie par des images clés. C’est pourquoi vous ne pouvez pas modifier les effets d’interpolation. Toutefois, vous pouvez modifier la valeur de répétition.

Pour plus d’informations, voir Définir la durée de la boucle.

Vous pouvez également orienter l’objet animé vers le tracé afin que le côté de l’objet qui pointe vers le centre du tracé conserve son orientation tout au long de la chronologie.

Pour plus d’informations, voir « Pour que l’objet en déplacement s’oriente vers le tracé » sous Créer, modifier ou supprimer une trajectoire.

Une fois la trajectoire créée, vous pouvez ajouter des animations manuelles à la chronologie qui contient la trajectoire.

NoteRemarque :

Vous ne pouvez pas inverser une trajectoire dans Expression Blend par inversion de la table de montage séquentiel qui contient cette trajectoire. Mais, vous pouvez transformer (retourner) la trajectoire afin de l’inverser, ou utiliser la propriété de la table de montage séquentiel AutoReverse pour la table de montage séquentiel s'exécute vers l'avant puis s’inverse.

Utilisation de plusieurs chronologies d’animation superposées

La structure des tables de montage séquentiel dans Expression Blend permet l’exécution simultanée de plusieurs tables de montage séquentiel (et plusieurs chronologies) dans votre application. Par exemple, vous pouvez dessiner deux cercles pour représenter un papillon, créer une chronologie d’animation du papillon qui se déplace le long d’une trajectoire circulaire, puis créer une chronologie d’animation distincte pour le battement des ailes. L’animation du battement des ailes peut être exécutée en même temps que l’animation circulaire sans interrompre l’animation circulaire car les chronologies n’animent pas les mêmes propriétés de l’objet papillon.

Pour obtenir un exemple, voir Essayez ! Créer des animations qui se chevauchent.

Lorsque plusieurs chronologies d’animation animent la même propriété simultanément, la transition entre les chronologies est différente si une image clé est enregistrée à la marque 0 seconde de la deuxième animation. Si vous n’enregistrez pas d’image clé à la marque 0 seconde, Expression Blend suppose que vous souhaitez créer l’animation à partir de la dernière valeur de la propriété au moment de l’interruption à la valeur de la propriété de la première image clé dans la deuxième chronologie. Ce type de transition est appelé animation de transfert . Par exemple, songez à un cercle qui, dans une chronologie, s’étire pour doubler sa largeur, et dans une deuxième chronologie s’étire pour quadrupler sa largeur. Si la deuxième animation interrompt la première et qu’aucune image clé n’est définie à la marque 0 seconde, l’ellipse s’étire à partir du moment où la première chronologie a été interrompue, jusqu’au point de terminaison de la deuxième chronologie (quatre fois la largeur d’origine). Si la deuxième animation n’est pas une animation de transfert (une image clé est définie à la marque 0 seconde), le cercle passe soudain au point de départ de la deuxième animation.

Pour obtenir un exemple, voir Essayez ! exécuter des transitions graduelles et non graduelles entre animations.

NoteRemarque :

Si deux chronologies animent la même propriété d’un objet, la première chronologie s’arrête lorsqu’elle est interrompue, même si elle a été définie pour être lue indéfiniment.

Fréquences d’images

Une animation dans Expression Blend est créée en par le biais de la définition d’images clés le long d’une chronologie. L’interpolation entre les images clés s’effectue lors de l’exécution. Par conséquent, il est inutile de configurer la fréquence d’images de l’animation. Lorsque vous exécutez votre application, .NET Framework affiche vos chronologies d’animation à la fréquence d’images la plus élevée possible.

Vous pouvez néanmoins spécifier les intervalles auxquels définir une image clé sur la chronologie. Cette fréquence d’intervalle est appelée résolution d’alignement , car elle fait référence à la tête de lecture Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(fr-fr,Expression.40).png ou aux images clés Cc295346.fa3c696d-5463-4000-8a6b-650fe6759bf7(fr-fr,Expression.40).png en cours d’alignement. Par exemple, si vous avez changé la résolution d’alignement en 10 images clés par seconde, vous pouvez définir des images clés à chaque dixième de seconde sur la chronologie. Pour changer la résolution d’alignement, cliquez sur la flèche déroulante en regard du bouton bascule Cc295346.d4a3eb40-55f9-4120-9ba0-acc90a465828(fr-fr,Expression.40).png Alignement sous Objets et chronologie, puis cliquez sur Alignement pour afficher la boîte de dialogue Résolution d’alignement.

Scènes

Dans Expression Blend, vous pouvez encapsuler des animations dans des scènes (ou contrôles utilisateur), puis utiliser ces animations plusieurs fois dans d’autres documents de votre application. Vous pouvez créer un contrôle utilisateur dans un seul document ou dans un fichier .dll (bibliothèque de contrôles). Vous pouvez accéder aux contrôles utilisateur qui font partie intégrante de votre application dans la catégorie Projets du panneau ComposantsCc295346.0d8b8d29-1af9-418f-8741-be3097d76eab(fr-fr,Expression.40).png, puis les placer dans un document, comme n’importe quel autre contrôle.

NoteRemarque :

Après avoir ajouté un contrôle utilisateur à votre projet, vous devez créer votre projet afin d’afficher le contrôle utilisateur dans le panneau Composants. Dans le menu Projets, cliquez sur Générer le projet.

Lorsque vous planifiez les éléments à animer dans un contrôle utilisateur, considérez les points suivants :

  • La chronologie de vos différentes animations    Par exemple, songez tout d’abord à une animation qui anime un écran d’accueil, puis anime ensuite le fondu de l’interface utilisateur. Vous pouvez insérer chacune des animations dans son propre contrôle utilisateur, mais laissez suffisamment de temps au début de la deuxième animation pour terminer l’animation de l’écran d’accueil.

  • Les propriétés et les déclencheurs dont vous souhaitez disposer dans vos animations    Par exemple, songez à une application qui contient un bouton, et à une animation contenue dans un contrôle utilisateur. Vous ne pouvez pas ajouter un déclencheur au contrôle utilisateur qui lancera la chronologie d’animation lorsque le bouton est enfoncé, sauf si ce dernier fait également partie du contrôle utilisateur. En outre, vous ne pouvez prévoir une liaison de données entre des valeurs de propriétés que si les deux propriétés se trouvent dans le même contrôle utilisateur.

    NoteRemarque :

    Les déclencheurs ne sont pas disponibles dans les projets Silverlight. Cependant, vous pouvez utiliser des comportements pour contrôler les tables de montage séquentiel et les transitions d'états.

    Pour plus d’informations, voir Utilisation des comportements.

Pour plus d’informations sur les contrôles utilisateur, voir Créer un contrôle utilisateur vide, ou « Table de montage séquentiel dans les contrôles utilisateur, » dans Contrôler le moment auquel la table de montage séquentiel s’exécute.

Tester les tables de montage séquentiel

Les tables de montage séquentiel d’un projet Expression Blend peuvent être testées de plusieurs manières : dans l’environnement de création ou au moment de l’exécution lorsque l’application est compilée (cliquez sur Exécuter le projet dans le menu Projets ou appuyez sur la touche F5). Dans l’environnement de création, vous pouvez utiliser les contrôles de lecture situés dans le panneau Objets et chronologie.

Contrôles de lecture dans le panneau Objets et chronologie

Cc295346.ab1e4f11-0317-4ef1-a029-7d749629f0f8(fr-fr,Expression.40).png

  • Accéder à la première image    Envoie le curseur de lecture Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(fr-fr,Expression.40).png sur la première image de l’animation.

  • Accéder à l’image précédente    Envoie le curseur de lecture sur l’image précédente.

  • Lecture    Lit l’animation à partir de l’instant actuel.

  • Accéder à l’image suivante    Envoie le curseur de lecture sur l’image suivante.

  • Accéder à la dernière image    Envoie le curseur de lecture sur la dernière image de l’animation.

Lecture à vitesse variable de la chronologie

La lecture de la chronologie à vitesse variable est une technique utile pour contrôler avec précision la vitesse et la position de l’animation à prévisualiser ou tester. Pour une lecture à vitesse variable, faites glisser le curseur de lecture. Ce faisant, l’animation s’affiche sur la planche graphique. Les images peuvent être lues en avant ou en arrière. La vitesse de lecture de l’animation dépend de la vitesse à laquelle vous faites glisser le curseur de lecture.

Pour obtenir un exemple, voir Lire la chronologie à vitesse variable.

Alignement du temps

Le panneau Objets et chronologie contient des contrôles permettant de gérer la lecture de l’animation et de parcourir le temps selon des unités discrètes (images par seconde) déterminées par la résolution de l’alignement. L’alignement du temps est utilisé lors de la navigation dans la chronologie au moyen des contrôles de lecture. Lorsque vous cliquez sur les boutons d’image suivante ou d’image précédente, le curseur de lecture est envoyé vers l’avant ou vers l’arrière, du nombre d’images par seconde que vous avez défini. Cette quantité de temps est déterminée par la résolution de l’alignement.

Boîte de dialogue Résolution d’alignement

Cc295346.df6c0208-d349-4948-b096-31869b94269d(fr-fr,Expression.40).png

Pour des exemples d’utilisation de la résolution d’alignement, voir Activer ou désactiver l’alignement de la chronologie et Modifier la résolution de l’alignement.

NoteRemarque :

L’alignement de la chronologie ne s’applique pas à la fréquence d’images ou à la vitesse de votre animation lorsque l’application s’exécute. Pour plus d’informations, voir « Fréquences d’images », plus haut dans cette rubrique.

Affichage du temps

L’affichage actuel du temps indique, en MM:SS:xxx (minutes, secondes, millisecondes), l’instant actuellement sélectionné. Pour atteindre directement un instant particulier, vous pouvez entrer une valeur numérique dans ce champ.

Zone de texte Position de la tête de lecture, indiquant 1,450 seconde

Cc295346.74a390c7-0ed5-4f6a-8f8b-372e6e0dcbdf(fr-fr,Expression.40).png

Pour un exemple d’utilisation de l’affichage du temps, voir Atteindre un point particulier d’une chronologie.

Déclencheurs

Vous pouvez utiliser les déclencheurs pour modifier l’état d’un objet sur la planche graphique en réponse à des événements ou changements de propriétés. Vous pouvez utiliser des déclencheurs pour commencer ou arrêter des chronologies d’animation. Par exemple, lorsque vous créez une chronologie, un déclencheur par défaut est créé et exécute votre chronologie lorsque votre application est chargée pour la première fois. Vous pouvez modifier ce déclencheur ou en créer d’autres qui exécutent la chronologie si l’utilisateur clique sur un bouton ou effectue une autre action.

Pour plus d’informations sur les déclencheurs, voir Utilisation de déclencheurs pour la définition du comportement d'un contrôle WPF.

NoteRemarque :

Les déclencheurs ne sont pas disponibles dans les projets Silverlight. Cependant, vous pouvez utiliser des comportements pour contrôler les tables de montage séquentiel et les transitions d'états.

Pour plus d’informations, voir Utilisation des comportements.

Gestionnaires d’événements

Les gestionnaires d’événements sont des méthodes dont l’exécution est programmée si un événement spécifique (tel que MouseOver ) se produit. Vous pouvez utiliser un gestionnaire d’événements à la place d’un déclencheur pour les tâches autres que la définition d’une propriété ou le contrôle d’une chronologie d’animation lorsqu’un événement se produit dans votre application. Les méthodes de gestionnaire d’événements vous permettent d’ajouter une autre logique de programmation, telle que la définition d’une propriété sur un autre objet, le chargement d’un nouveau document, la création d’un nouvel objet, l’utilisation d’un calcul mathématique pour animer un objet, etc. Par exemple, si vous souhaitez déterminer quelle touche a été enfoncée lors d’un événement KeyDown , vous devez créer une méthode de gestionnaire d’événements qui sera appelée si une touche est enfoncée et ajouter du code pour déterminer de quelle touche il s’agit.

Les méthodes de gestionnaire d’événements sont définies dans le fichier code-behind de votre document. Dans un projet WPF ou Silverlight, les fichiers code-behind sont écrits en Microsoft Visual C# ou Microsoft Visual Basic .NET.

Pour obtenir des exemples, voir Contrôler des éléments multimédias à l’aide de déclencheurs dans une chronologie et Essayez ! Charger une nouvelle page dynamiquement dans votre application Silverlight.

Animation codée

Si vous utilisez le mode Création dans Expression Blend, vous pouvez créer des chronologies d’animation complètes sans modifier les fichiers XAML ou le code d’un fichier code-behind. Vous pouvez également configurer des déclencheurs qui démarrent, arrêtent ou interrompent des chronologies d’animation reposant sur les interactions avec l’utilisateur. Vous serez très probablement en mesure de réaliser la totalité du travail d’animation souhaité dans le mode Création d’Expression Blend.

Certains scénarios d’animation avancés nécessitent du code (dans C# ou Visual Basic .NET), tel que des calculs mathématiques pour déterminer le mouvement d’un objet. Si vous prévoyez de manipuler des chronologies d’animation dans des fichiers code-behind, il est utile de comprendre le modèle d’animation de la technologie que votre application utilise (soit WPF, soit Silverlight).

Les chronologies d’animation sont représentées dans les fichiers XAML par un élément STORYBOARD. Par exemple, si vous créez une chronologie d’animation en mode Création de Expression Blend, le code XAML généré pour l’animation est semblable à celui qui suit :

<Window.Resources>
  <Storyboard x:Key="MoveRight">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
        Storyboard.TargetName="rectangle"
        Storyboard.TargetProperty="...(TranslateTransform.Y)">
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
      <SplineDoubleKeyFrame KeyTime="00:00:01" Value="375"/>
    </DoubleAnimationUsingKeyFrames>
  </Storyboard>
</Window.Resources>

Les attributs de l’exemple XAML précédent sont les suivants :

  • L’attribut x:Key indique le nom de la chronologie (ou table de montage séquentiel).

  • L’attribut BeginTime indique le début de l’animation ; à la marque 0 seconde dans cet exemple.

  • L’attribut TargetName indique le nom de l’élément animé par la table de montage séquentiel (ou chronologie) ; un objet nommé « rectangle » dans cet exemple.

  • L’attribut TargetProperty indique la propriété qui sera changée (la propriété de position Y du rectangle dans ce cas).

  • L’attribut KeyTime indique à quels intervalles de temps la propriété cible change et sa nouvelle valeur. En mode Création dans Expression Blend, ces éléments sont représentés par des images clés sur la chronologie.

Vous pouvez contrôler des chronologies d’animation par programme dans des fichiers code-behind à l’aide de C# ou de Visual Basic .NET. Par exemple, pour démarrer la chronologie d’animation précédente dans un fichier code-behind, le code C# pourrait se présenter comme suit :

Storyboard moveRight;
moveRight = (Storyboard)this.Resources["MoveRight"];
moveRight.Begin(this);

Pour plus d’informations sur la façon de créer et de manipuler des chronologies d’animation dans les fichiers XAML et code-behind, voir les rubriques Animation et minutage Cc295346.xtlink_newWindow(fr-fr,Expression.40).png dans la section Windows Presentation Foundation de MSDN, ou voir les exemples et didacticiels publiés sur le site Web Microsoft Expression Cc295346.xtlink_newWindow(fr-fr,Expression.40).png.

Copyright © 2011 Microsoft Corporation. Tous droits réservés.