首先设置Fill.GradientOrigin属性,线性渐变有一个起点和一个终点用于定义渐变矢量,而径向渐变有一个椭圆以及一个焦点 (GradientOrigin) 用于定义渐变行为,该椭圆定义渐变的终点。然后再设置Fill.GradientStops属性。Ellipse椭圆,设置椭圆填充色径向渐变,最后在使用镜像梯度画刷(ColorAnimation改变颜色,使用PointAnimatin改变坐标)
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<PointAnimation Storyboard.TargetName="ellipse1"
Storyboard.TargetProperty="Fill.GradientOrigin"
To="1,1" Duration="0:0:5" />
<ColorAnimation Storyboard.TargetName="ellipse1"
Storyboard.TargetProperty="Fill.GradientStops[0].Color"
To="Pink" Duration="0:0:5" />
<ColorAnimation Storyboard.TargetName="ellipse1"
Storyboard.TargetProperty="Fill.GradientStops[1].Color"
To="Gold" Duration="0:0:5" />
<ColorAnimation Storyboard.TargetName="ellipse1"
Storyboard.TargetProperty="Fill.GradientStops[2].Color"
To="Gray" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Window.Triggers>
<Grid>
<Ellipse Name="ellipse1" Width="150" Height="150">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.1,0.1">
<RadialGradientBrush.GradientStops>
<GradientStop Offset="0.3" Color="PowderBlue"/>
<GradientStop Offset="0.6" Color="Purple"/>
<GradientStop Offset="0.9" Color="Gainsboro"/>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
原图:
效果图: