Как анимировать радиальный градиент плавно наружу

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. Это означает, что анимация смещений значительно изменит радиусы и сделает мерцающий результат. Таким образом, вы должны определить multi GradientStop s вместо использования SpreadMethod of Repeat для создания эффекта. При создании multi GradientStop s вы также должны установить RadiusX и RadiusY в 1, чтобы у нас было больше места для остановок градиента. Правило здесь смещение в Black (или Yellow) должны быть оживлены к смещению следующийBlack (или Yellow) GradientStop. Это будет выполнять цикл и после того, что переход почти гладкая и не вызывает каких-либо мерцания:

<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 и изменения в x:Key в Storyboard я написал выше. Также я думаю, что вы можете просто использовать DoubleAnimation (линейный) вместо простого DoubleAnimationUsingKeyFrames выше (конечно, вам может понадобиться некоторое сложное время в будущем с такой анимацией).