如何平滑地向外生成徑向漸變

Question

我想爲從波浪中心點平滑向外移動的徑向漸變創建動畫。

這裏是兩個不同的故事板，我曾嘗試：

<Storyboard x:Key="RadialStoryBoard" RepeatBehavior="Forever"> 
     <DoubleAnimation Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" From=".1" To=".7" Duration="00:00:03" Storyboard.TargetName="RadialTest" /> 
     <DoubleAnimation Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" From=".2" To=".8" Duration="00:00:03" Storyboard.TargetName="RadialTest" /> 
     <DoubleAnimation Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" From=".3" To=".9" Duration="00:00:03" Storyboard.TargetName="RadialTest" /> 
     <DoubleAnimation Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Offset)" From=".4" To="1" Duration="00:00:03" Storyboard.TargetName="RadialTest" /> 
    </Storyboard> 

    <Storyboard x:Key="RadialStory2Board" RepeatBehavior="Forever"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="RadialTest"> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value=".5" /> 
     </DoubleAnimationUsingKeyFrames> 

     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="RadialTest"> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value=".7" /> 
     </DoubleAnimationUsingKeyFrames> 

     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="RadialTest"> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value=".9" /> 
     </DoubleAnimationUsingKeyFrames> 

     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Offset)" Storyboard.TargetName="RadialTest"> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value="1.1" /> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 

<Window.Triggers> 
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
     <BeginStoryboard Storyboard="{StaticResource RadialStory2}"/> 
    </EventTrigger> 
</Window.Triggers> 

這裏的對象：

<Rectangle x:Name="RadialTest" Height="50" Width="150" Stroke="Blue" StrokeThickness="4" Margin="5"> 
       <Rectangle.Fill> 
        <RadialGradientBrush Center="0.5,0.5" RadiusX=".15" RadiusY=".15" GradientOrigin="0.5,0.5" MappingMode="RelativeToBoundingBox" SpreadMethod="Repeat" > 
         <GradientStop Color="Yellow" Offset="0.1"/> 
         <GradientStop Color="Black" Offset="0.2"/> 
         <GradientStop Color="Yellow" Offset="0.3"/> 
         <GradientStop Color="Black" Offset="0.4"/> 
        </RadialGradientBrush> 
       </Rectangle.Fill> 
      </Rectangle> 

我已經嘗試了幾種不同的改變，但是這是關於衣櫃我來。建議？

Answer 1

我想你無法的SpreadMethod="Repeat"這裏採取互利，共創圓。因爲我們必須對偏移進行動畫製作，但偏移量（在每個圓中）已經填充範圍0-1。這意味着對偏移進行動畫處理會顯着改變徑向併產生閃爍的結果。因此，您必須定義多個GradientStop而不是使用重複的SpreadMethod來創建效果。在創建多個GradientStop時，還必須將RadiusX和RadiusY設置爲1，以便我們有更多空間用於漸變停止。這裏的規則是Black（或Yellow）的偏移量應以動畫的下一個Black（或Yellow）漸變停止偏移。這將履行週期，之後的過渡幾乎是光滑的，不會造成任何閃爍：

<Storyboard x:Key="RadialStoryBoard" RepeatBehavior="Forever"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="RadialTest"> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0.125" /> 
     </DoubleAnimationUsingKeyFrames> 

     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="RadialTest"> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value=".25" /> 
     </DoubleAnimationUsingKeyFrames> 

     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Offset)" Storyboard.TargetName="RadialTest"> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value=".375" /> 
     </DoubleAnimationUsingKeyFrames> 

     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[4].(GradientStop.Offset)" Storyboard.TargetName="RadialTest"> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value=".5" /> 
     </DoubleAnimationUsingKeyFrames> 

     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[5].(GradientStop.Offset)" Storyboard.TargetName="RadialTest"> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value=".625" /> 
     </DoubleAnimationUsingKeyFrames> 

     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[6].(GradientStop.Offset)" Storyboard.TargetName="RadialTest"> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value=".75" /> 
     </DoubleAnimationUsingKeyFrames> 

     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[7].(GradientStop.Offset)" Storyboard.TargetName="RadialTest"> 
      <EasingDoubleKeyFrame KeyTime="0:0:3" Value=".875" /> 
     </DoubleAnimationUsingKeyFrames> 

</Storyboard> 

<RadialGradientBrush Center="0.5,0.5" RadiusX="1" RadiusY="1" GradientOrigin="0.5,0.5" MappingMode="RelativeToBoundingBox"> 
     <GradientStop Color="Yellow" Offset="0"/> 
     <GradientStop Color="Black" Offset="0"/> 
     <GradientStop Color="Yellow" Offset="0"/> 
     <GradientStop Color="Black" Offset=".125"/> 
     <GradientStop Color="Yellow" Offset=".25"/> 
     <GradientStop Color="Black" Offset=".375"/> 
     <GradientStop Color="Yellow" Offset=".5"/> 
     <GradientStop Color="Black" Offset=".625"/> 
</RadialGradientBrush> 

注意有關SpreadMethod去除，並在Storyboard我上面貼的x:Key的變化。此外，我認爲你可以只使用DoubleAnimation（線性）而不是上面的簡單DoubleAnimationUsingKeyFrames（當然，你可能需要一些複雜的時間在未來這種動畫）。