WPF：Graphics图画-Brushes画刷-Brushes画刷集合（7）

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>