Nasıl yapılır: Anahtar Çerçeveler Kullanarak Kenarlık Kalınlığına Animasyon Ekleme
Bu örnekte, bir özelliğinin özelliğine BorderThickness animasyonu nasıl animasyonu ve sonra da bu özelliğin nasıl animasyona sahip olduğu Border gösterir.
Örnek
Aşağıdaki örnek, bir ThicknessAnimationUsingKeyFrames özelliğinin özelliğine animasyonu BorderThickness yapmak için sınıfını Border kullanır. Bu animasyon aşağıdaki şekilde üç anahtar kare kullanır:
İlk yarım saniye boyunca, sınırın kalınlığını kademeli LinearThicknessKeyFrame olarak artırmak için sınıfının bir örneğini kullanır. Örnek, değerler LinearThicknessKeyFrame arasında sorunsuz bir doğrusal artış oluşturmak için kullanır.
Sonraki yarım saniyenin sonunda, kenarlığın kalınlığını aniden artırmak DiscreteThicknessKeyFrame için sınıfının bir örneğini kullanır. Değerler arasında ani atlamalar oluşturmaktan türetilenler gibi ayrık anahtar kareler, yani animasyonun DiscreteThicknessKeyFrame hareketi çok hareketlidir.
Son iki saniye boyunca, kenarlığı kalınlığını azaltmak SplineThicknessKeyFrame için sınıfının bir örneğini kullanır. Türetilenler gibi eğri anahtar SplineThicknessKeyFrame çerçeveler, özelliğin değerlerine göre değerler arasında bir değişken geçişi KeySpline oluşturun. Bu anahtar çerçevede animasyon yavaş başlar ve zaman segmenti sonuna doğru üstel olarak hızlandırır.
<!-- 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>
Tam örnek için bkz. KeyFrame Animasyon Örneği.