Jak animować grubość obramowania z wykorzystaniem klatek kluczowych
W tym przykładzie pokazano, jak animować BorderThickness właściwość obiektu Border.
Przykład
W poniższym przykładzie użyto ThicknessAnimationUsingKeyFrames klasy do animowania BorderThickness właściwości klasy Border. Ta animacja używa trzech klatek kluczowych w następujący sposób:
W pierwszej połowie drugiego LinearThicknessKeyFrame roku używa wystąpienia klasy, aby stopniowo zwiększać grubość obramowania. W przykładzie użyto LinearThicknessKeyFrame metody , aby utworzyć gładki liniowy wzrost między wartościami.
Na koniec następnej połowy używa wystąpienia DiscreteThicknessKeyFrame klasy, aby nagle zwiększyć grubość obramowania. Dyskretne klatki kluczowe, takie jak te pochodzące z DiscreteThicknessKeyFrame tworzenia nagłych skoków między wartościami, czyli ruch animacji jest szarpany.
W ciągu ostatnich dwóch sekund używa wystąpienia SplineThicknessKeyFrame klasy, aby zmniejszyć grubość obramowania. Ramki klucza spline, takie jak te pochodzące z SplineThicknessKeyFrame tworzenia zmiennej przejścia między wartościami zgodnie z wartościami KeySpline właściwości. W tej klatce kluczowej animacja zaczyna się powoli i przyspiesza wykładniczo w kierunku końca segmentu czasu.
<!-- This example shows how to use the ThicknessAnimationUsingKeyFrames to create
an animation on the BorderThickness property of a Border. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://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>
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