Nasıl yapılır: Anahtar Çerçeveler Kullanarak Renge Animasyon Ekleme
Bu örnek, Color anahtar çerçeveler kullanarak a 'nın nasıl hareketlendirileceğini gösterir SolidColorBrush .
Örnek
Aşağıdaki örnek, ColorAnimationUsingKeyFrames öğesinin özelliğine animasyon uygulamak için sınıfını kullanır Color SolidColorBrush . Bu animasyon üç anahtar çerçevesini aşağıdaki şekilde kullanır:
İlk iki saniye boyunca, LinearColorKeyFrame rengi kademeli olarak yeşil ve kırmızı olarak değiştirmek için sınıfının bir örneğini kullanır. LinearColorKeyFrameDeğerler arasında düz bir doğrusal geçiş oluşturma gibi doğrusal anahtar çerçeveler.
Sonraki yarı saniyenin sonunda, DiscreteColorKeyFrame rengi kırmızı ve sarı olarak hızlı bir şekilde değiştirmek için sınıfının bir örneğini kullanır. DiscreteColorKeyFrameDeğerler arasında ani değişiklikler oluşturma gibi ayrık anahtar çerçeveler, diğer bir deyişle animasyonun bu bölümündeki renk değişikliği hızlı bir şekilde gerçekleşir ve hafif değildir.
Son iki saniye boyunca, SplineColorKeyFrame rengi yeniden değiştirmek için sınıfın bir örneğini kullanır — bu kez sarıdan yeşil ' e geri döner. SplineColorKeyFrameÖzelliğin değerlerine göre değerler arasında değişken geçişi oluşturma gibi eğri anahtar çerçeveleri KeySpline . Bu örnekte, renkteki değişiklik yavaş başlar ve zaman diliminin sonuna doğru bir şekilde üstel olarak hızlanır.
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;
namespace Microsoft.Samples.KeyFrameExamples
{
public class ColorAnimationUsingKeyFramesExample : Page
{
public ColorAnimationUsingKeyFramesExample()
{
Title = "BooleanAnimationUsingKeyFrames Example";
Background = Brushes.White;
Margin = new Thickness(20);
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
StackPanel myStackPanel = new StackPanel();
myStackPanel.Orientation = Orientation.Vertical;
myStackPanel.HorizontalAlignment = HorizontalAlignment.Center;
// Create the Border that is the target of the animation.
SolidColorBrush animatedBrush = new SolidColorBrush();
animatedBrush.Color = Color.FromArgb(255, 0, 255, 0);
Border myBorder = new Border();
// Set the initial color of the border to green.
myBorder.BorderBrush = animatedBrush;
myBorder.BorderThickness = new Thickness(28);
myBorder.Padding = new Thickness(20);
myStackPanel.Children.Add(myBorder);
// Create a TextBlock to host inside the Border.
TextBlock myTextBlock = new TextBlock();
myTextBlock.Text = "This example shows how to use the ColorAnimationUsingKeyFrames"
+ " to create an animation on the BorderBrush property of a Border.";
myBorder.Child = myTextBlock;
// Assign the Brush a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"AnimatedBrush", animatedBrush);
// Create a ColorAnimationUsingKeyFrames to
// animate the BorderBrush property of the Button.
ColorAnimationUsingKeyFrames colorAnimation
= new ColorAnimationUsingKeyFrames();
colorAnimation.Duration = TimeSpan.FromSeconds(6);
// Create brushes to use as animation values.
Color redColor = new Color();
redColor = Color.FromArgb(255, 255, 0, 0);
Color yellowColor = new Color();
yellowColor = Color.FromArgb(255, 255, 255, 0);
Color greenColor = new Color();
greenColor = Color.FromArgb(255, 0, 255, 0);
// Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
// a smooth, linear animation between values.
colorAnimation.KeyFrames.Add(
new LinearColorKeyFrame(
redColor, // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.0))) // KeyTime
);
// In the next half second, go to yellow. DiscreteColorKeyFrame creates a
// sudden jump between values.
colorAnimation.KeyFrames.Add(
new DiscreteColorKeyFrame(
yellowColor, // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5))) // KeyTime
);
// In the final 2 seconds of the animation, go from yellow back to green. SplineColorKeyFrame
// creates a variable transition between values depending on the KeySpline property. In this example,
// the animation starts off slow but toward the end of the time segment, it speeds up exponentially.
colorAnimation.KeyFrames.Add(
new SplineColorKeyFrame(
greenColor, // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.5)), // KeyTime
new KeySpline(0.6, 0.0, 0.9, 0.0) // KeySpline
)
);
// Set the animation to repeat forever.
colorAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Set the animation to target the Color property
// of the object named "AnimatedBrush".
Storyboard.SetTargetName(colorAnimation, "AnimatedBrush");
Storyboard.SetTargetProperty(
colorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));
// Create a storyboard to apply the animation.
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(colorAnimation);
// Start the storyboard when the Border loads.
myBorder.Loaded += delegate(object sender, RoutedEventArgs e)
{
myStoryboard.Begin(this);
};
Content = myStackPanel;
}
}
}
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Imports System.Windows.Media
Namespace Microsoft.Samples.KeyFrameExamples
Public Class ColorAnimationUsingKeyFramesExample
Inherits Page
Public Sub New()
Title = "BooleanAnimationUsingKeyFrames Example"
Background = Brushes.White
Margin = New Thickness(20)
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myStackPanel As New StackPanel()
myStackPanel.Orientation = Orientation.Vertical
myStackPanel.HorizontalAlignment = HorizontalAlignment.Center
' Create the Border that is the target of the animation.
Dim animatedBrush As New SolidColorBrush()
animatedBrush.Color = Color.FromArgb(255, 0, 255, 0)
Dim myBorder As New Border()
' Set the initial color of the border to green.
myBorder.BorderBrush = animatedBrush
myBorder.BorderThickness = New Thickness(28)
myBorder.Padding = New Thickness(20)
myStackPanel.Children.Add(myBorder)
' Create a TextBlock to host inside the Border.
Dim myTextBlock As New TextBlock()
myTextBlock.Text = "This example shows how to use the ColorAnimationUsingKeyFrames" & " to create an animation on the BorderBrush property of a Border."
myBorder.Child = myTextBlock
' Assign the Brush a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("AnimatedBrush", animatedBrush)
' Create a ColorAnimationUsingKeyFrames to
' animate the BorderBrush property of the Button.
Dim colorAnimation As New ColorAnimationUsingKeyFrames()
colorAnimation.Duration = TimeSpan.FromSeconds(6)
' Create brushes to use as animation values.
Dim redColor As New Color()
redColor = Color.FromArgb(255, 255, 0, 0)
Dim yellowColor As New Color()
yellowColor = Color.FromArgb(255, 255, 255, 0)
Dim greenColor As New Color()
greenColor = Color.FromArgb(255, 0, 255, 0)
' Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
' a smooth, linear animation between values.
colorAnimation.KeyFrames.Add(New LinearColorKeyFrame(redColor, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.0)))) ' KeyTime - Target value (KeyValue)
' In the next half second, go to yellow. DiscreteColorKeyFrame creates a
' sudden jump between values.
colorAnimation.KeyFrames.Add(New DiscreteColorKeyFrame(yellowColor, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5)))) ' KeyTime - Target value (KeyValue)
' In the final 2 seconds of the animation, go from yellow back to green. SplineColorKeyFrame
' creates a variable transition between values depending on the KeySpline property. In this example,
' the animation starts off slow but toward the end of the time segment, it speeds up exponentially.
colorAnimation.KeyFrames.Add(New SplineColorKeyFrame(greenColor, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.5)), New KeySpline(0.6, 0.0, 0.9, 0.0))) ' KeySpline - KeyTime - Target value (KeyValue)
' Set the animation to repeat forever.
colorAnimation.RepeatBehavior = RepeatBehavior.Forever
' Set the animation to target the Color property
' of the object named "AnimatedBrush".
Storyboard.SetTargetName(colorAnimation, "AnimatedBrush")
Storyboard.SetTargetProperty(colorAnimation, New PropertyPath(SolidColorBrush.ColorProperty))
' Create a storyboard to apply the animation.
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(colorAnimation)
' Start the storyboard when the Border loads.
AddHandler myBorder.Loaded, Sub(sender As Object, e As RoutedEventArgs) myStoryboard.Begin(Me)
Content = myStackPanel
End Sub
End Class
End Namespace
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ThicknessAnimationUsingKeyFrames Example">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Border Background="#99FFFFFF" BorderThickness="28"
Margin="0,60,0,20" Padding="20" >
<Border.BorderBrush>
<SolidColorBrush x:Name="MyAnimatedBrush" Color="Green" />
</Border.BorderBrush>
<Border.Triggers>
<EventTrigger RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate from green to red using a linear key frame, from red to
yellow using a discrete key frame, and from yellow back to green with
a spline key frame. This animation repeats forever. -->
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="Color"
Storyboard.TargetName="MyAnimatedBrush"
Duration="0:0:6" FillBehavior="HoldEnd" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames.KeyFrames>
<!-- Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
a smooth, linear animation between values. -->
<LinearColorKeyFrame Value="Red" KeyTime="0:0:2" />
<!-- In the next half second, go to yellow. DiscreteColorKeyFrame creates a
sudden jump between values. -->
<DiscreteColorKeyFrame Value="Yellow" KeyTime="0:0:2.5" />
<!-- In the final 2 seconds of the animation, go from yellow back to green. SplineColorKeyFrame
creates a variable transition between values depending on the KeySpline property. In this example,
the animation starts off slow but toward the end of the time segment, it speeds up exponentially.-->
<SplineColorKeyFrame Value="Green" KeyTime="0:0:4.5" KeySpline="0.6,0.0 0.9,0.00" />
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<TextBlock>
This example shows how to use the ColorAnimationUsingKeyFrames to create
an animation on the BorderBrush property of a Border.
</TextBlock>
</Border>
</StackPanel>
</Page>
Tüm örnek için bkz. ana kare animasyon örneği.