Nasıl yapılır: Anahtar Çerçeveler Kullanarak bir Nesneye Animasyon Ekleme
Bu örnekte, anahtar çerçeveler kullanılarak bir denetimin özelliği olan bir nesneye Background nasıl Page animasyon animasyonu gösterebilirsiniz.
Örnek
Aşağıdaki örnek, bir ObjectAnimationUsingKeyFrames denetimin özelliği için renk değişikliklerine animasyon Background animasyonu yapmak için sınıfını Page kullanır. Örnek animasyon, düzenli aralıklarla farklı bir arka plan fırça olarak değişir. Bu animasyon üç farklı DiscreteObjectKeyFrame anahtar kare oluşturmak için sınıfını kullanır. Animasyonda anahtar çerçeveler şu şekilde 2018'de 100'e kadar 1000'e kadar 10
İlk saniyenin sonunda sınıfının bir örneğine LinearGradientBrush animasyonlar. Örneğin bu bölümü, rengin sarıdan turuncuya ve kırmızıya geçiş yapmak için arka plan rengine doğrusal bir gradyan uygular.
Sonraki saniyenin sonunda, sınıfının bir örneğine RadialGradientBrush animasyonlar. Örneğin bu bölümü arka plan rengine radyal bir gradyan uygular, böylece renk beyazdan maviye siyaha geçiş sağlar.
Üçüncü saniyenin sonunda, sınıfının bir örneğine DrawingBrush animasyonlar. Örneğin bu bölümü arka plana bir denetleyici panosu deseni uygular.
Animasyon yeniden başlar ve süresiz olarak yineler.
Not
DiscreteObjectKeyFrame , sınıfıyla kullanabileceğiniz tek anahtar çerçevesi t ObjectAnimationUsingKeyFrames tuşuna basın. Gibi anahtar DiscreteObjectKeyFrame kareler, değerlerde ani değişiklikler, yani bu örnekteki renk değişiklikleri aniden ortaya çıkar.
<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>
Tam örnek için bkz. KeyFrame Animasyon Örneği.