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

  • A+
所属分类:.NET技术
摘要

简单用一个路径动画做一个环形加载动画四个点,启动时间各个不同,运行时间相同。启动时圆形半径为0,启动后恢复正常半径。

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

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

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

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

 

 

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