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

posted @ 2020-08-30 18:35  雨也绵绵  阅读(389)  评论(0编辑  收藏  举报