RadialGradientBrushAnimationExample径向渐变画刷动画
上图左侧分别对GradientStop的Offset、Colort、Opacity值进行动画效果(通过Rectangle.Triggers的LeftMouseButtonDown事件触发)
<Rectangle Name="animatedGradientStopColorExampleRectangle"
Width="200" Height="100"
Stroke="Black" StrokeThickness="1"
Margin="10">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="MediumBlue" Offset="0.0" />
<GradientStop x:Name="gradientStopB2" Color="Purple" Offset="0.5" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="gradientStopB2"
Storyboard.TargetProperty="Color"
From="Purple" To="Yellow" Duration="0:0:3" FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
下图为GradientOrigin从右上往左下Point动画图
<TextBlock>Animated GradientOrigin</TextBlock>
<Ellipse
Width="200" Height="100"
Stroke="Black" StrokeThickness="1"
Margin="10">
<Ellipse.Fill>
<RadialGradientBrush x:Name="animatedGradientOriginExample"
GradientOrigin="0.75,0.25">
<GradientStop Color="#CBC8F1" Offset="0.0" />
<GradientStop Color="MediumBlue" Offset="0.5" />
<GradientStop Color="DarkBlue" Offset="1.0" />
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<PointAnimation
Storyboard.TargetName="animatedGradientOriginExample"
Storyboard.TargetProperty="GradientOrigin"
From="1,0" To="0,1" Duration="0:0:3" FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
下图为圆填充径向渐变画刷的径向渐变的最外面圆的中心值Point动画效果:
<TextBlock>Animated Center</TextBlock>
<Ellipse
Width="200" Height="100"
Stroke="Black" StrokeThickness="1"
Margin="10">
<Ellipse.Fill>
<RadialGradientBrush x:Name="animatedCenterExample"
GradientOrigin="0.75,0.25">
<GradientStop Color="#CBC8F1" Offset="0.0" />
<GradientStop Color="MediumBlue" Offset="0.5" />
<GradientStop Color="DarkBlue" Offset="1.0" />
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<PointAnimation
Storyboard.TargetName="animatedCenterExample"
Storyboard.TargetProperty="Center"
From="0,0" To="1,1" Duration="0:0:3" FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
下图为下图为圆填充径向渐变画刷的径向渐变的最外面圆的水平/垂直半径值Double动画效果:
<TextBlock>Animated Radius</TextBlock>
<Ellipse
Width="200" Height="100" Stroke="Black" StrokeThickness="1"
Margin="10">
<Ellipse.Fill>
<RadialGradientBrush x:Name="animatedRadiusExample"
GradientOrigin="0.75,0.25">
<GradientStop Color="#CBC8F1" Offset="0.0" />
<GradientStop Color="MediumBlue" Offset="0.5" />
<GradientStop Color="DarkBlue" Offset="1.0" />
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="animatedRadiusExample"
Storyboard.TargetProperty="RadiusX"
From="0" To="1" Duration="0:0:3" FillBehavior="Stop" />
<DoubleAnimation
Storyboard.TargetName="animatedRadiusExample"
Storyboard.TargetProperty="RadiusY"
From="0" To="1" Duration="0:0:3" FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。