如何设置径向渐变平滑向外的动画

本文关键字：渐变 平滑 动画 何设置 设置 | 更新日期: 2023-09-27 18:24:21

我想制作一个从波浪中的中心点平滑向外移动的径向渐变的动画。

以下是我尝试过的两个不同的故事板：

<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>

我试过几种不同的变体，但这是关于我来的壁橱。建议？

如何设置径向渐变平滑向外的动画

我认为您不能利用此处的SpreadMethod="Repeat"创建圆。因为我们必须设置偏移的动画，但偏移（在每个圆中）已经填充了范围0-1。这意味着设置偏移的动画将显著改变半径并产生闪烁的结果。因此，您必须定义多个GradientStop，而不是使用SpreadMethod of Repeat来创建效果。在创建多个GradientStop时，还必须将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和更改上面发布的Storyboard的x:Key的注意事项。此外，我认为您可以使用DoubleAnimation（线性），而不是上面简单的DoubleAnimationUsingKeyFrames（当然，您可能希望在未来使用这种动画时使用一些复杂的计时）。

相关文章：