Path构图 PointAnimation实现动画

最新推荐文章于 2024-04-03 17:00:02 发布

LsxForLove

最新推荐文章于 2024-04-03 17:00:02 发布

阅读量754

点赞数

1、首先我们构建一个Path

 <Path  Fill="#FF34CBCB" HorizontalAlignment="Left" Height="141" Margin="158.097,209.225,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="149.5" UseLayoutRounding="False">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="144.5,73.5">
                            <BezierSegment Point1="144.5,113.817" Point2="112.265,146.5" Point3="72.5,146.5"/>
                            <BezierSegment Point1="32.7355,146.5" Point2="0.5,113.817" Point3="0.5,73.5"/>
                            <BezierSegment Point1="0.5,33.1832" Point2="32.7355,0.5" Point3=" 72.5,0.5"/>
                            <BezierSegment x:Name="bs" Point1="112.265,0.5" Point2="144.5,33.1832" Point3="80,0"/>
                            <LineSegment Point="70,80"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>

效果

2、利用storyboard和PointAnimation实现动画

   <Grid.Resources>
            <Storyboard x:Name="sb">
                <PointAnimation From="80,0" To="144.5,73.5" Duration="0:0:1" Storyboard.TargetName="bs" Storyboard.TargetProperty="Point3" RepeatBehavior="5"/>
 
            </Storyboard>
        </Grid.Resources>

效果是使整个圆重复闭合