WPF 向外扩散(类似广播)动画效果
先画两个弧形,然后进行缩放动画
<Path x:Name="ArcSegmentPath" Stroke="#F6F6F7" StrokeThickness="4" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
</TransformGroup>
</Path.RenderTransform>
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="70,67" IsClosed="False">
<ArcSegment Point="70,121" Size="54,50"/>
</PathFigure>
<PathFigure StartPoint="130,67" IsClosed="False">
<ArcSegment Point="130,121" Size="54,50" SweepDirection="Clockwise"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Storyboard x:Key="ScaleArcSegmentPath" Storyboard.TargetName="ArcSegmentPath" RepeatBehavior="Forever" AccelerationRatio="1" FillBehavior="HoldEnd">
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="2.2" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="2.2" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" AccelerationRatio="0.5" Duration="0:0:1.6"/>
</Storyboard>
效果如下:
代码地址:https://gitee.com/fanfulei/scale-arc-segment-animation.git