Jak animować obiekt z wykorzystaniem klatek kluczowych
W tym przykładzie pokazano, jak animować obiekt, który w tym przykładzie jest Background właściwością Page kontrolki przy użyciu klatek kluczowych.
Przykład
W poniższym przykładzie użyto ObjectAnimationUsingKeyFrames klasy do animowania zmian kolorów dla Background właściwości kontrolki Page . Przykładowa animacja zmienia się na inny pędzl tła w regularnych odstępach czasu. Ta animacja DiscreteObjectKeyFrame używa klasy do tworzenia trzech różnych klatek kluczowych. Animacja używa klatek kluczowych w następujący sposób:
Na końcu pierwszej sekundy animuje wystąpienie LinearGradientBrush klasy. W tej sekcji przykładu stosowany jest gradient liniowy do koloru tła, dzięki czemu kolor przechodzi z żółtego na pomarańczowy do czerwonego.
Na końcu następnej sekundy animuje wystąpienie RadialGradientBrush klasy. W tej sekcji przykładu stosowany jest gradient promieniowy do koloru tła, dzięki czemu kolor przechodzi od białego do niebieskiego na czarny.
Na końcu trzeciej sekundy animuje wystąpienie DrawingBrush klasy. Ta sekcja przykładu stosuje wzorzec tablicy kontrolnej do tła.
Animacja zaczyna się ponownie i powtarza w nieskończoność.
Uwaga
DiscreteObjectKeyFrame jest jedynym typem ramki klucza, której można używać z klasą ObjectAnimationUsingKeyFrames . Kluczowe ramki, takie jak DiscreteObjectKeyFrame nagłe zmiany w wartościach, czyli zmiany kolorów w tym przykładzie występują nagle.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://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>
Pełny przykład można znaleźć w temacie KeyFrame Animation Sample (Przykład animacji klatek kluczowych).
Zobacz też
.NET Desktop feedback
Opinia
https://aka.ms/ContentUserFeedback.
Dostępne już wkrótce: W 2024 r. będziemy stopniowo wycofywać zgłoszenia z serwisu GitHub jako mechanizm przesyłania opinii na temat zawartości i zastępować go nowym systemem opinii. Aby uzyskać więcej informacji, sprawdź:Prześlij i wyświetl opinię dla