此示例演示如何对 Color 对象的 Offset 和 GradientStop 进行动画处理。
示例：
下面的示例对一个 LinearGradientBrush 内部的三个梯度停止点进行动画处理。 该示例使用三个动画，每一个都对不同的梯度停止点进行动画处理：
第一个动画是 DoubleAnimation，对第一个梯度停止点的 Offset 进行动画处理，使其从 0.0 变为 1.0，再回到 0.0。 因此，渐变中的第一种颜色从矩形的左侧向右侧移动，然后移回到左侧。
第二个动画是 ColorAnimation，对第二个梯度停止点的 Color 进行动画处理，使其从 Purple 变为 Yellow，在回到 Purple。 因此，渐变中的中间颜色从紫色变为黄色，回到紫色。
第三个动画是另一个 ColorAnimation，对第三个梯度停止点的 Color 执行动画处理，先减 1 再还原。 因此，渐变中的第三种颜色逐渐消失，然后再次变得不透明。
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace BrushesIntroduction
{
public class GradientStopAnimationExample : Page
{
public GradientStopAnimationExample()
{
Title = "GradientStop Animation Example";
Background = Brushes.White;
// Create a NameScope for the page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
// Create a rectangle. This rectangle will
// be painted with a gradient.
Rectangle aRectangle = new Rectangle();
aRectangle.Width = 200;
aRectangle.Height = 100;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 1;
// Create a LinearGradientBrush to paint
// the rectangle's fill.
LinearGradientBrush gradientBrush = new LinearGradientBrush();
// Create gradient stops for the brush.
GradientStop stop1 = new GradientStop(Colors.MediumBlue, 0.0);
GradientStop stop2 = new GradientStop(Colors.Purple, 0.5);
GradientStop stop3 = new GradientStop(Colors.Red, 1.0);
// Register a name for each gradient stop with the
// page so that they can be animated by a storyboard.
this.RegisterName("GradientStop1", stop1);
this.RegisterName("GradientStop2", stop2);
this.RegisterName("GradientStop3", stop3);
// Add the stops to the brush.
gradientBrush.GradientStops.Add(stop1);
gradientBrush.GradientStops.Add(stop2);
gradientBrush.GradientStops.Add(stop3);
// Apply the brush to the rectangle.
aRectangle.Fill = gradientBrush;
//
// Animate the first gradient stop's offset from
// 0.0 to 1.0 and then back to 0.0.
//
DoubleAnimation offsetAnimation = new DoubleAnimation();
offsetAnimation.From = 0.0;
offsetAnimation.To = 1.0;
offsetAnimation.Duration = TimeSpan.FromSeconds(1.5);
offsetAnimation.AutoReverse = true;
Storyboard.SetTargetName(offsetAnimation, "GradientStop1");
Storyboard.SetTargetProperty(offsetAnimation,
new PropertyPath(GradientStop.OffsetProperty));
//
// Animate the second gradient stop's color from
// Purple to Yellow and then back to Purple.
//
ColorAnimation gradientStopColorAnimation = new ColorAnimation();
gradientStopColorAnimation.From = Colors.Purple;
gradientStopColorAnimation.To = Colors.Yellow;
gradientStopColorAnimation.Duration = TimeSpan.FromSeconds(1.5);
gradientStopColorAnimation.AutoReverse = true;
Storyboard.SetTargetName(gradientStopColorAnimation, "GradientStop2");
Storyboard.SetTargetProperty(gradientStopColorAnimation,
new PropertyPath(GradientStop.ColorProperty));
// Set the animation to begin after the first animation
// ends.
gradientStopColorAnimation.BeginTime = TimeSpan.FromSeconds(3);
//
// Animate the third gradient stop's color so
// that it becomes transparent.
//
ColorAnimation opacityAnimation = new ColorAnimation();
// Reduces the target color's alpha value by 1,
// making the color transparent.
opacityAnimation.By = Color.FromScRgb(-1.0F, 0F, 0F, 0F);
opacityAnimation.Duration = TimeSpan.FromSeconds(1.5);
opacityAnimation.AutoReverse = true;
Storyboard.SetTargetName(opacityAnimation, "GradientStop3");
Storyboard.SetTargetProperty(opacityAnimation,
new PropertyPath(GradientStop.ColorProperty));
// Set the animation to begin after the first two
// animations have ended.
opacityAnimation.BeginTime = TimeSpan.FromSeconds(6);
// Create a Storyboard to apply the animations.
Storyboard gradientStopAnimationStoryboard = new Storyboard();
gradientStopAnimationStoryboard.Children.Add(offsetAnimation);
gradientStopAnimationStoryboard.Children.Add(gradientStopColorAnimation);
gradientStopAnimationStoryboard.Children.Add(opacityAnimation);
// Begin the storyboard when the left mouse button is
// pressed over the rectangle.
aRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
{
gradientStopAnimationStoryboard.Begin(this);
};
StackPanel mainPanel = new StackPanel();
mainPanel.Margin = new Thickness(10);
mainPanel.Children.Add(aRectangle);
Content = mainPanel;
}
}
}
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Namespace BrushesIntroduction
Public Class GradientStopAnimationExample
Inherits Page
Public Sub New()
Title = "GradientStop Animation Example"
Background = Brushes.White
' Create a NameScope for the page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
' Create a rectangle. This rectangle will
' be painted with a gradient.
Dim aRectangle As New Rectangle()
aRectangle.Width = 200
aRectangle.Height = 100
aRectangle.Stroke = Brushes.Black
aRectangle.StrokeThickness = 1
' Create a LinearGradientBrush to paint
' the rectangle's fill.
Dim gradientBrush As New LinearGradientBrush()
' Create gradient stops for the brush.
Dim stop1 As New GradientStop(Colors.MediumBlue, 0.0)
Dim stop2 As New GradientStop(Colors.Purple, 0.5)
Dim stop3 As New GradientStop(Colors.Red, 1.0)
' Register a name for each gradient stop with the
' page so that they can be animated by a storyboard.
Me.RegisterName("GradientStop1", stop1)
Me.RegisterName("GradientStop2", stop2)
Me.RegisterName("GradientStop3", stop3)
' Add the stops to the brush.
gradientBrush.GradientStops.Add(stop1)
gradientBrush.GradientStops.Add(stop2)
gradientBrush.GradientStops.Add(stop3)
' Apply the brush to the rectangle.
aRectangle.Fill = gradientBrush
'
' Animate the first gradient stop's offset from
' 0.0 to 1.0 and then back to 0.0.
'
Dim offsetAnimation As New DoubleAnimation()
offsetAnimation.From = 0.0
offsetAnimation.To = 1.0
offsetAnimation.Duration = TimeSpan.FromSeconds(1.5)
offsetAnimation.AutoReverse = True
Storyboard.SetTargetName(offsetAnimation, "GradientStop1")
Storyboard.SetTargetProperty(offsetAnimation, New PropertyPath(GradientStop.OffsetProperty))
'
' Animate the second gradient stop's color from
' Purple to Yellow and then back to Purple.
'
Dim gradientStopColorAnimation As New ColorAnimation()
gradientStopColorAnimation.From = Colors.Purple
gradientStopColorAnimation.To = Colors.Yellow
gradientStopColorAnimation.Duration = TimeSpan.FromSeconds(1.5)
gradientStopColorAnimation.AutoReverse = True
Storyboard.SetTargetName(gradientStopColorAnimation, "GradientStop2")
Storyboard.SetTargetProperty(gradientStopColorAnimation, New PropertyPath(GradientStop.ColorProperty))
' Set the animation to begin after the first animation
' ends.
gradientStopColorAnimation.BeginTime = TimeSpan.FromSeconds(3)
'
' Animate the third gradient stop's color so
' that it becomes transparent.
'
Dim opacityAnimation As New ColorAnimation()
' Reduces the target color's alpha value by 1,
' making the color transparent.
opacityAnimation.By = Color.FromScRgb(-1.0F, 0F, 0F, 0F)
opacityAnimation.Duration = TimeSpan.FromSeconds(1.5)
opacityAnimation.AutoReverse = True
Storyboard.SetTargetName(opacityAnimation, "GradientStop3")
Storyboard.SetTargetProperty(opacityAnimation, New PropertyPath(GradientStop.ColorProperty))
' Set the animation to begin after the first two
' animations have ended.
opacityAnimation.BeginTime = TimeSpan.FromSeconds(6)
' Create a Storyboard to apply the animations.
Dim gradientStopAnimationStoryboard As New Storyboard()
gradientStopAnimationStoryboard.Children.Add(offsetAnimation)
gradientStopAnimationStoryboard.Children.Add(gradientStopColorAnimation)
gradientStopAnimationStoryboard.Children.Add(opacityAnimation)
' Begin the storyboard when the left mouse button is
' pressed over the rectangle.
AddHandler aRectangle.MouseLeftButtonDown, Sub(sender As Object, e As MouseButtonEventArgs) gradientStopAnimationStoryboard.Begin(Me)
Dim mainPanel As New StackPanel()
mainPanel.Margin = New Thickness(10)
mainPanel.Children.Add(aRectangle)
Content = mainPanel
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="GradientStop Animation Example"
Background="White">
<StackPanel Margin="10">
<Rectangle
Width="200"
Height="100"
Stroke="Black" StrokeThickness="1">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop x:Name="GradientStop1" Color="MediumBlue" Offset="0.0" />
<GradientStop x:Name="GradientStop2" Color="Purple" Offset="0.5" />
<GradientStop x:Name="GradientStop3" Color="Red" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="GradientStop1"
Storyboard.TargetProperty="Offset"
From="0.0" To="1.0" Duration="0:0:1.5"
AutoReverse="True" />
<ColorAnimation
Storyboard.TargetName="GradientStop2"
Storyboard.TargetProperty="Color"
From="Purple" To="Yellow"
Duration="0:0:1.5"
AutoReverse="True"
BeginTime="0:0:3" />
<ColorAnimation
Storyboard.TargetName="GradientStop3"
Storyboard.TargetProperty="Color"
Duration="0:0:1.5"
AutoReverse="True"
BeginTime="0:0:6">
<ColorAnimation.By>
<Color ScA="-1" ScR="0" ScB="0" ScG="0" />
</ColorAnimation.By>
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>
</Page>
虽然此示例使用 LinearGradientBrush，但该过程与 GradientStop内 RadialGradientBrush 对象进行动画处理的过程相同。
有关其他示例，请参阅画笔示例。
