Comment : animer un objet à l'aide d'images clés
Mise à jour : novembre 2007
Cet exemple montre comment animer un objet qui, dans cet exemple, est la propriété Background d'un contrôle Page, à l'aide d'images clés.
Exemple
L'exemple suivant utilise la classe ObjectAnimationUsingKeyFrames pour animer des modifications de couleur pour la propriété Background d'un contrôle Page. L'exemple d'animation passe à un pinceau d'arrière-plan différent à intervalles réguliers. Cette animation utilise la classe DiscreteObjectKeyFrame pour créer trois images clés différentes. L'animation utilise des images clés de la manière suivante :
À la fin de la première seconde, anime une instance de la classe LinearGradientBrush. Cette section de l'exemple applique un dégradé linéaire à la couleur d'arrière-plan afin que la couleur passe du jaune au rouge en passant par le orange.
À la fin de la seconde suivante, anime une instance de la classe RadialGradientBrush. Cette section de l'exemple applique un dégradé radial à la couleur d'arrière-plan afin que la couleur passe du blanc au noir en passant par le bleu.
À la fin de la troisième seconde, anime une instance de la classe DrawingBrush. Cette section de l'exemple applique un damier à l'arrière-plan.
L'animation recommence et se répète indéfiniment.
.gif "Remarque") Remarque : |
|---|
DiscreteObjectKeyFrame est le seul type d'image clé que vous pouvez utiliser avec la classe ObjectAnimationUsingKeyFrames. Les images clés comme DiscreteObjectKeyFrame créent des modifications soudaines dans les valeurs, c'est-à-dire que les modifications de couleur dans cet exemple se produisent soudainement. |
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- ObjectAnimationUsingKeyFrames is used to animate properties that take
an object as a value. This animation lasts for 4 seconds using 3 KeyFrames which
swap different brush objects at regular intervals, making the background of the Page
change. -->
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Duration="0:0:4" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<!-- Note: Only discrete interpolation (DiscreteObjectKeyFrame) is available for
use with ObjectAnimationUsingKeyFrames which merely swaps objects according to
a specified timeline. Other types of interpolation are too problematic to apply
to objects. -->
<!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes
to a LinearGradientBrush after the first second of the animation. -->
<DiscreteObjectKeyFrame KeyTime="0:0:1">
<DiscreteObjectKeyFrame.Value>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="0.5" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes
to a RadialGradientBrush after the second second of the animation. -->
<DiscreteObjectKeyFrame KeyTime="0:0:2">
<DiscreteObjectKeyFrame.Value>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<RadialGradientBrush.GradientStops>
<GradientStop Color="White" Offset="0.0" />
<GradientStop Color="MediumBlue" Offset="0.5" />
<GradientStop Color="Black" Offset="1.0" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly
changes to a DrawingBrush (creates a checkerboard pattern) after the
third second of the animation. -->
<DiscreteObjectKeyFrame KeyTime="0:0:3">
<DiscreteObjectKeyFrame.Value>
<DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="White">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,1,1" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="Black"
Geometry="M 0,0 L0,0.5 0.5,0.5 0.5,1 1,1 1,0.5 0.5,0.5 0.5,0" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Page.Triggers>
</Page>
Pour l'exemple complet, consultez Animation d'image clé, exemple.
Voir aussi
Tâches
Animation d'image clé, exemple
Concepts
Vue d'ensemble des animations d'image clé