WPF 利用路径动画作一个环形加载动画
简单用一个路径动画作一个环形加载动画动画
四个点，启动时间各个不一样，运行时间相同。启动时圆形半径为0，启动后恢复正常半径。spa
gif截图略慢，实际运行仍是能够的code
<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>