HOW TO：使用主要畫面格建立色彩的動畫
更新：2007 年 11 月
本範例說明如何使用主要畫面格，將 SolidColorBrush 的 Color 顯示為動畫。
範例
下列範例會使用 ColorAnimationUsingKeyFrames 類別將 SolidColorBrush 的 Color 屬性顯示為動畫。這個動畫以下列方式使用三個主要畫面格。
在前兩秒，使用 LinearColorKeyFrame 類別的執行個體，逐漸將色彩從綠色變成紅色。線性的主要畫面格 (例如 LinearColorKeyFrame) 會在兩個值之間建立平滑的線性轉換。
在後半秒結尾，使用 DiscreteColorKeyFrame 類別的執行個體，快速將色彩從紅色變成黃色。不連續的主要畫面格 (例如 DiscreteColorKeyFrame) 會在值之間建立突然的變化，也就是說，這部分動畫的色彩變更快速而且明顯。
在最後兩秒，使用 SplineColorKeyFrame 類別的執行個體再次變更色彩，這次是從黃色變回綠色。曲線主要畫面格 (例如 SplineColorKeyFrame) 會根據 KeySpline 屬性的值建立值之間的可變轉換。在這個範例中，色彩一開始會緩慢變更，當接近時間區段結尾時會以指數型方式加速。
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;
}
}
}
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>
如需完整範例，請參閱 KeyFrame 動畫範例。