Vue d’ensemble de l’animation

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 sur le côté gauche de la planche graphique, puis définir une image clé à la marque 1 seconde pour enregistrer la position de ce même rectangle sur le côté droit de la planche graphique. L’animation résultante sera basée sur la transformation qui se produit sur 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 translation en X et Y d’un objet rectangle

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.

Remarque :
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 sur l’animation et le minutage dans la section Windows Presentation Foundation de MSDN.

Haut de la page

Table de montage séquentiel

Les tables de montage séquentiel sont des conteneurs qui contiennent des chronologies d’animation. Expression Blend 2 met à votre disposition un nouveau 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 une série de tables de montage séquentiel pouvant être ouvertes

Autre nouveauté dans Expression Blend 2, un menu contextuel vous permet de dupliquer, d’inverser, de supprimer, de renommer ou de fermer la table de montage séquentiel actuellement sélectionnée ou de créer une nouvelle table de montage séquentiel. 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

Vous pouvez définir les propriétés sur les 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 à la fin de son cycle.

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 Scenes qui suit. Pour obtenir un exemple, voir Essayez ! Créer un contrôle utilisateur WPF ou Créer un contrôle utilisateur dans votre projet Silverlight 2.

• 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 Présentation générale des contrôles. Pour obtenir un exemple WPF, voir Essayez ! Ajouter de l’animation à un bouton.

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 (projets Windows Presentation Foundation uniquement) ou à l’aide de gestionnaires d’événements. Pour plus d’informations, voir Contrôler le moment auquel la table de montage séquentiel s’exécute ou Créer un bouton qui contrôle une table de montage séquentiel dans une application Silverlight.

Haut de la page

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 storyboards.

Vous utilisez des chronologies d’animation dans la section Objets et chronologie du panneau Interaction (pour une introduction, voir Panneau Interaction). 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.

Haut de la page

Images clés

Une image clé 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 aux objets entiers, tels qu’un objet rectangle, ou à une grille 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 (sous How does animation work in Expression Blend?), 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 Using multiple and overlapping animation timelines 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.

Haut de la page

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. Plusieurs méthodes d’interpolation peuvent être affectées à un intervalle de temps pour créer des changements de valeurs plus complexes :

• La valeur Atténuer + modifie la façon dont la valeur de la propriété change lorsque le temps approche de l’image clé. Vous pouvez définir le degré d’atténuation en spécifiant une valeur comprise entre 0 % (aucune atténuation) et 100 % (atténuation totale, qui représente la moitié de l’intervalle de temps entre l’image clé précédente et l’image clé modifiée).

• La valeur Atténuer modifie la façon dont les valeurs de propriété changent lorsque le temps s’éloigne de l’image clé. Vous pouvez définir le degré d’atténuation en spécifiant une valeur comprise entre 0 % (aucune atténuation) et 100 % (atténuation totale, qui représente la moitié de l’intervalle de temps entre l’image clé modifiée et l’image clé suivante).

• La méthode Mettre en attente n’interpole pas les changements dans le temps ; à la place, elle opère un brusque changement dans la nouvelle valeur de propriété lorsque le curseur de lecture atteint l’image clé où le changement se produit.

• L’interpolation linéaire modifie la valeur de la propriété par incréments égaux entre les images clés. L’interpolation entre deux images clés est linéaire si la valeur Atténue est 0 % pour la première image clé et la valeur Atténuer + est 0 % pour la seconde image clé.

Vous pouvez modifier les valeurs d’interpolation des images clés en cliquant avec le bouton droit sur une image clé sur la chronologie.

Une nouveauté dans Expression Blend 2 est la possibilité d’utiliser une courbe clé pour définir la transition entre des images clés en modifiant une courbe dans un éditeur graphique. Vous pouvez également convertir les valeurs de courbe clé en ressources et les réutiliser.

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

Pour obtenir un exemple, voir Changer l’interpolation d’animation entre les images clés.

Haut de la page

Création de chronologies manuellement ou en utilisant des trajectoires

Remarque :
Les trajectoires ne sont prises en charge ni dans les projets Microsoft Silverlight 1.0 ni dans les projets Silverlight 2.

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 Nouveau sous Objets et chronologie, puis enregistrez les images clés en déplaçant tout d’abord le curseur de lecture de chronologie , 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

	Deux objets distincts : une ellipse et un cercle (créés à l’aide de l’outil Ellipse).
	L’ellipse devient une trajectoire. Vous pouvez, en option, supprimer l’ellipse à ce stade.
	Une nouvelle chronologie est créée qui, lorsqu’elle est lue, déplace le cercle 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 (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 (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.

Haut de la page

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.

Remarque :
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.

Haut de la page

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 au curseur de lecture ou aux images clés en cours d’alignement sur place. 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 Alignement sous Objets et chronologie, puis cliquez sur Alignement pour afficher la boîte de dialogue Résolution d’alignement.

Haut de la page

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 l’onglet Contrôles personnalisés de la Bibliothèque de composants, puis les placer dans un document, comme n’importe quel autre contrôle.

Remarque :
Après avoir ajouté un contrôle utilisateur à votre projet, vous devez créer votre projet afin d’afficher le contrôle utilisateur dans la Bibliothèque de composants. Dans le menu Projet, 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.

  Remarque :
  Les déclencheurs ne sont disponibles ni dans les projets Microsoft Silverlight 1.0 ni dans les projets Silverlight 2. Toutefois, une fonction nommée États offre la même fonctionnalité dans les projets Silverlight 2.

Pour un exemple, voir Essayez ! Créer un contrôle utilisateur WPF ou voir « Table de montage séquentiel dans les contrôles utilisateur » sous Contrôler le moment auquel la table de montage séquentiel s’exécute.

Haut de la page

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 Tester Projet dans le menu Projet ou appuyez sur la touche F5). Dans l’environnement de création, vous pouvez utiliser les contrôles de lecture situés sous Objets et chronologie dans le panneau Interaction :

Contrôles de lecture sous Objets et chronologie

• Accéder à la première image   Envoie le curseur de lecture 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

La catégorie Objets et chronologie du panneau Interaction 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ée vers l’avant ou vers l’arrière, de la quantité d’images par seconde que vous avez spécifiée. Cette quantité de temps est déterminée par la résolution de l’alignement.

Boîte de dialogue Résolution d’alignement

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.

Remarque :
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 Frame rates.

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 du curseur de lecture, indiquant 1,450 seconde

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

Haut de la page

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 Vue d’ensemble des déclencheurs.

Remarque :
Les déclencheurs ne sont disponibles ni dans les projets Microsoft Silverlight 1.0 ni dans les projets Silverlight 2. Toutefois, une fonction nommée États offre la même fonctionnalité dans les projets Silverlight 2.

Haut de la page

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 Windows Presentation Foundation ou Silverlight 2, 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 Charger une nouvelle page dynamiquement dans votre application Silverlight 2). Dans un projet Silverlight 1.0, les fichiers code-behind sont écrits en JavaScript (pour obtenir un exemple, voir Créer un bouton qui contrôle une table de montage séquentiel dans une application Silverlight).

Haut de la page

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 Windows Presentation Foundation (WPF), car une application créée visuellement dans Expression Blend est essentiellement une application WPF.

Les chronologies d’animation sont représentées dans les fichiers XAML par un élément de table de montage séquentiel. Par exemple, si vous créez une chronologie d’animation dans Expression Blend en mode Création, 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é 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 sur l’animation et le minutage dans la section Windows Presentation Foundation de MSDN ou voir les exemples et didacticiels publiés sur le site Web Microsoft Expression.

Haut de la page