Gewusst wie: Animieren der Breite eines Rahmens mithilfe von Keyframes
In diesem Beispiel wird das Animieren der BorderThickness-Eigenschaft eines Border dargestellt.
Beispiel
Im folgenden Beispiel wird die ThicknessAnimationUsingKeyFrames-Klasse verwendet, um die BorderThickness-Eigenschaft eines Border zu animieren. In dieser Animation werden drei Keyframes folgendermaßen verwendet:
In der ersten halben Sekunde wird eine Instanz der LinearThicknessKeyFrame-Klasse verwendet, um die Breite des Rahmens graduell zu erhöhen. Im Beispiel wird LinearThicknessKeyFrame für eine glatte, lineare Erhöhung von Werten verwendet.
Am Ende der nächsten halben Sekunde wird eine Instanz der DiscreteThicknessKeyFrame-Klasse verwendet, um die Breite des Rahmens abrupt zu erhöhen. Diskrete Keyframes, wie z. B. von DiscreteThicknessKeyFrame abgeleitete Keyframes, ermöglichen abrupte Sprünge zwischen Werten, d. h. die Animation ist ruckartig.
In den letzten beiden Sekunden wird eine Instanz der SplineThicknessKeyFrame-Klasse verwendet, um die Breite des Rahmens zu verringern. Spline-Keyframes wie die von SplineThicknessKeyFrame abngeleiteten, erzeugen einen variablen Übergang zwischen Werten gemäß den Werten der KeySpline-Eigenschaft. In diesem Keyframe ist die Animation zunächst langsam und beschleunigt dann exponentiell im letzten Bereich des Zeitabschnitts.
<!-- This example shows how to use the ThicknessAnimationUsingKeyFrames to create
an animation on the BorderThickness property of a Border. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameExamples.ThicknessAnimationUsingKeyFramesExample"
Name="myRootElement"
WindowTitle="ThicknessAnimationUsingKeyFrames Example">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Border Background="#99FFFFFF" BorderBrush="#CCCCFF" BorderThickness="1"
Margin="0,60,0,20" Padding="20" >
<Border.Triggers>
<EventTrigger RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animating the BorderThickness property uses 3 KeyFrames. -->
<ThicknessAnimationUsingKeyFrames
Storyboard.TargetProperty="BorderThickness"
Duration="0:0:5" FillBehavior="HoldEnd" RepeatBehavior="Forever">
<ThicknessAnimationUsingKeyFrames.KeyFrames>
<!-- Using a LinearThicknessKeyFrame, thickness increases gradually
over the first half second of the animation. -->
<LinearThicknessKeyFrame KeyTime="0:0:0.5">
<LinearThicknessKeyFrame.Value>
<Thickness Left="8" Right="8" Top="6" Bottom="6" />
</LinearThicknessKeyFrame.Value>
</LinearThicknessKeyFrame>
<!-- Using a DiscreteThicknessKeyFrame, thickness increases suddenly
after the first second of the animation. -->
<DiscreteThicknessKeyFrame KeyTime="0:0:1">
<DiscreteThicknessKeyFrame.Value>
<Thickness Left="28" Right="28" Top="24" Bottom="24" />
</DiscreteThicknessKeyFrame.Value>
</DiscreteThicknessKeyFrame>
<!-- Using a SplineThicknessKeyFrame, thickness decreases slowly at first
and then suddenly contracts. This KeyFrame takes 2 seconds. -->
<SplineThicknessKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3">
<SplineThicknessKeyFrame.Value>
<Thickness Left="1" Right="1" Top="1" Bottom="8" />
</SplineThicknessKeyFrame.Value>
</SplineThicknessKeyFrame>
</ThicknessAnimationUsingKeyFrames.KeyFrames>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<TextBlock>
This example shows how to use the ThicknessAnimationUsingKeyFrames to create
an animation on the BorderThickness property of a Border.
</TextBlock>
</Border>
</StackPanel>
</Page>
Das vollständige Beispiel finden Sie unter Beispiel für eine Keyframe-Animation.
Siehe auch
Aufgaben
Gewusst wie: Animieren eines BorderThickness-Werts
Referenz
Konzepte
Übersicht über Keyframe-Animationen