WPF 利用路径动画做一个环形加载动画

简单用一个路径动画做一个环形加载动画

四个点，启动时间各个不同，运行时间相同。启动时圆形半径为0，启动后恢复正常半径。

gif截图略慢，实际运行还是可以的

  <Window.Resources>
        <PathGeometry x:Key="EllipesPath" Figures="M 5 10 a 35 35 0 1 1 1 1 Z"/>
    </Window.Resources>
    <Grid>
        <Canvas x:Name="cs">
            <Path Panel.ZIndex="1" x:Name="Geo" Visibility="Visible"  Canvas.Top="100" Canvas.Left="100"  Fill="Red" Stroke="Red" >
                <Path.Data>
                    <GeometryGroup x:Name="G1" FillRule="Nonzero"  >
                        <EllipseGeometry  x:Name="eg1" Center="05 10"    RadiusX="0" RadiusY="0" />
                        <EllipseGeometry  x:Name="eg2" Center="25 10"    RadiusX="0" RadiusY="0"/>
                        <EllipseGeometry  x:Name="eg3" Center="45 10"    RadiusX="0" RadiusY="0"/>
                        <EllipseGeometry  x:Name="eg4" Center="65 10"    RadiusX="0" RadiusY="0"/>
                    </GeometryGroup>
                </Path.Data>
                <Path.RenderTransform>
                    <RotateTransform/>
                </Path.RenderTransform>
                <Path.Triggers>
                    <EventTrigger RoutedEvent="Path.Loaded"    >
                        <BeginStoryboard x:Name="P1" >
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="eg1"  Storyboard.TargetProperty="RadiusX" To="5" BeginTime="0:0:0"    />
                                <DoubleAnimation Storyboard.TargetName="eg1"  Storyboard.TargetProperty="RadiusY" To="5" BeginTime="0:0:0" />
                                <PointAnimationUsingPath  Storyboard.TargetName="eg1"  Storyboard.TargetProperty="Center" RepeatBehavior="Forever"  PathGeometry="{DynamicResource EllipesPath}" Duration="0:0:4" BeginTime="0:0:0.1"  AccelerationRatio="0.7" SpeedRatio="1.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                        <BeginStoryboard x:Name="P2">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="eg2"  Storyboard.TargetProperty="RadiusX" To="5" BeginTime="0:0:0.5"    />
                                <DoubleAnimation Storyboard.TargetName="eg2"  Storyboard.TargetProperty="RadiusY" To="5" BeginTime="0:0:0.5" />
                                <PointAnimationUsingPath  Storyboard.TargetName="eg2"  Storyboard.TargetProperty="Center"  RepeatBehavior="Forever"  PathGeometry="{DynamicResource EllipesPath}" Duration="0:0:4" BeginTime="0:0:0.5" AccelerationRatio="0.7" SpeedRatio="1.2" />
                            </Storyboard>
                        </BeginStoryboard>
                        <BeginStoryboard x:Name="P3">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="eg3"  Storyboard.TargetProperty="RadiusX" To="5" BeginTime="0:0:1"  />
                                <DoubleAnimation Storyboard.TargetName="eg3"  Storyboard.TargetProperty="RadiusY" To="5" BeginTime="0:0:1"   />
                                <PointAnimationUsingPath RepeatBehavior="Forever"  Storyboard.TargetName="eg3" Storyboard.TargetProperty="Center" PathGeometry="{DynamicResource EllipesPath}" Duration="0:0:4" BeginTime="0:0:1" AccelerationRatio="0.7" SpeedRatio="1.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                        <BeginStoryboard x:Name="P4">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="eg4"  Storyboard.TargetProperty="RadiusX" To="5" BeginTime="0:0:1.5"  />
                                <DoubleAnimation Storyboard.TargetName="eg4"  Storyboard.TargetProperty="RadiusY" To="5" BeginTime="0:0:1.5"   />
                                <PointAnimationUsingPath RepeatBehavior="Forever"  Storyboard.TargetName="eg4" Storyboard.TargetProperty="Center" PathGeometry="{DynamicResource EllipesPath}" Duration="0:0:4" BeginTime="0:0:1.5" AccelerationRatio="0.7" SpeedRatio="1.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Path.Triggers>
            </Path>
            <Path  Canvas.Top="100" Canvas.Left="100" Stroke="Red" Visibility="Visible" StrokeThickness="1" Data="{DynamicResource EllipesPath}"/>
        </Canvas>
    </Grid>