Windows 8/8.1/10 加载动画WPF实现
新建WPF控件
后台代码文件不需要编辑，xaml文件如下。
<UserControl x:Class="ModernShow.CircleLoader" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=mscorlib"> <Grid> <Grid.Resources> <SolidColorBrush x:Key="ParticleColor" Color = "White"/> <SolidColorBrush x:Key="ParticleBackgroundColor" Color = "Transparent"/> <sys:Double x:Key="ParticleOpacity">1</sys:Double> <sys:Double x:Key="ParticleRadius">5</sys:Double> <sys:Double x:Key="StartingPointX">0</sys:Double> <sys:Double x:Key="StartingPointY">-18</sys:Double> <sys:Double x:Key="RotationPointX">0.5</sys:Double> <sys:Double x:Key="RotationPointY">0.5</sys:Double> <sys:TimeSpan x:Key="StoryBoardBeginTimeP0">00:00:00.000</sys:TimeSpan> <sys:TimeSpan x:Key="StoryBoardBeginTimeP1">00:00:00.100</sys:TimeSpan> <sys:TimeSpan x:Key="StoryBoardBeginTimeP2">00:00:00.200</sys:TimeSpan> <sys:TimeSpan x:Key="StoryBoardBeginTimeP3">00:00:00.300</sys:TimeSpan> <sys:TimeSpan x:Key="StoryBoardBeginTimeP4">00:00:00.400</sys:TimeSpan> <Duration x:Key="StoryBoardDuration">00:00:03.500</Duration> <sys:Double x:Key="ParticleOriginAngleP0">0</sys:Double> <sys:Double x:Key="ParticleOriginAngleP1">-15</sys:Double> <sys:Double x:Key="ParticleOriginAngleP2">-30</sys:Double> <sys:Double x:Key="ParticleOriginAngleP3">-45</sys:Double> <sys:Double x:Key="ParticleOriginAngleP4">-60</sys:Double> <sys:Double x:Key="ParticleBeginAngle1">0</sys:Double> <sys:Double x:Key="ParticleEndAngle1">90</sys:Double> <sys:TimeSpan x:Key="ParticleBeginTime1">00:00:00.000</sys:TimeSpan> <Duration x:Key="ParticleDuration1">00:00:00.750</Duration> <sys:Double x:Key="ParticleBeginAngle2">90</sys:Double> <sys:Double x:Key="ParticleEndAngle2">270</sys:Double> <sys:TimeSpan x:Key="ParticleBeginTime2">00:00:00.751</sys:TimeSpan> <Duration x:Key="ParticleDuration2">00:00:00.500</Duration> <sys:Double x:Key="ParticleBeginAngle3">270</sys:Double> <sys:Double x:Key="ParticleEndAngle3">360</sys:Double> <sys:TimeSpan x:Key="ParticleBeginTime3">00:00:01.252</sys:TimeSpan> <Duration x:Key="ParticleDuration3">00:00:00.750</Duration> <sys:Double x:Key="ParticleBeginAngle4">0</sys:Double> <sys:Double x:Key="ParticleEndAngle4">180</sys:Double> <sys:TimeSpan x:Key="ParticleBeginTime4">00:00:02.03</sys:TimeSpan> <Duration x:Key="ParticleDuration4">00:00:00.450</Duration> <sys:Double x:Key="ParticleBeginOpacity6">1</sys:Double> <sys:Double x:Key="ParticleEndOpacity6">0</sys:Double> <sys:TimeSpan x:Key="ParticleBeginTime6">00:00:02.353</sys:TimeSpan> <Duration x:Key="ParticleDuration6">00:00:00.040</Duration> <sys:Double x:Key="ParticleBeginOpacity7">0</sys:Double> <sys:Double x:Key="ParticleEndOpacity7">1</sys:Double> <sys:TimeSpan x:Key="ParticleBeginTime7">00:00:02.900</sys:TimeSpan> <Duration x:Key="ParticleDuration7">00:00:00.020</Duration> <sys:Double x:Key="ParticleBeginAngle5">180</sys:Double> <sys:Double x:Key="ParticleEndAngle5">360</sys:Double> <sys:TimeSpan x:Key="ParticleBeginTime5">00:00:02.900</sys:TimeSpan> <Duration x:Key="ParticleDuration5">00:00:00.600</Duration> <Style x:Key="EllipseStyle" TargetType="Ellipse"> <Setter Property="Width" Value="{StaticResource ParticleRadius}"/> <Setter Property="Height" Value="{StaticResource ParticleRadius}"/> <Setter Property="Fill" Value="{StaticResource ParticleColor}"/> <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/> <Setter Property="Opacity" Value="{StaticResource ParticleOpacity}"/> </Style> </Grid.Resources> <Grid Width="50" Height="50"> <Grid.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard BeginTime="{StaticResource StoryBoardBeginTimeP0}" Duration="{StaticResource StoryBoardDuration}" RepeatBehavior="Forever"> <DoubleAnimation Storyboard.TargetName="p0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle1}" To="{StaticResource ParticleEndAngle1}" BeginTime="{StaticResource ParticleBeginTime1}" Duration="{StaticResource ParticleDuration1}"/> <DoubleAnimation Storyboard.TargetName="p0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle2}" To ="{StaticResource ParticleEndAngle2}" BeginTime="{StaticResource ParticleBeginTime2}" Duration="{StaticResource ParticleDuration2}"/> <DoubleAnimation Storyboard.TargetName="p0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle3}" To="{StaticResource ParticleEndAngle3}" BeginTime="{StaticResource ParticleBeginTime3}" Duration="{StaticResource ParticleDuration3}"/> <DoubleAnimation Storyboard.TargetName="p0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle4}" To="{StaticResource ParticleEndAngle4}" BeginTime="{StaticResource ParticleBeginTime4}" Duration="{StaticResource ParticleDuration4}"/> <DoubleAnimation Storyboard.TargetName="p0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle5}" To="{StaticResource ParticleEndAngle5}" BeginTime="{StaticResource ParticleBeginTime5}" Duration="{StaticResource ParticleDuration5}"/> <DoubleAnimation Storyboard.TargetName="p0" Storyboard.TargetProperty="(UIElement.Opacity)" From="{StaticResource ParticleBeginOpacity6}" To="{StaticResource ParticleEndOpacity6}" BeginTime="{StaticResource ParticleBeginTime6}" Duration="{StaticResource ParticleDuration6}"/> <DoubleAnimation Storyboard.TargetName="p0" Storyboard.TargetProperty="(UIElement.Opacity)" From="{StaticResource ParticleBeginOpacity7}" To="{StaticResource ParticleEndOpacity7}" BeginTime="{StaticResource ParticleBeginTime7}" Duration="{StaticResource ParticleDuration7}"/> </Storyboard> </BeginStoryboard> <BeginStoryboard> <Storyboard BeginTime="{StaticResource StoryBoardBeginTimeP1}" Duration="{StaticResource StoryBoardDuration}" RepeatBehavior="Forever"> <DoubleAnimation Storyboard.TargetName="p1" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle1}" To="{StaticResource ParticleEndAngle1}" BeginTime="{StaticResource ParticleBeginTime1}" Duration="{StaticResource ParticleDuration1}"/> <DoubleAnimation Storyboard.TargetName="p1" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle2}" To="{StaticResource ParticleEndAngle2}" BeginTime="{StaticResource ParticleBeginTime2}" Duration="{StaticResource ParticleDuration2}"/> <DoubleAnimation Storyboard.TargetName="p1" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle3}" To="{StaticResource ParticleEndAngle3}" BeginTime="{StaticResource ParticleBeginTime3}" Duration="{StaticResource ParticleDuration3}"/> <DoubleAnimation Storyboard.TargetName="p1" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle4}" To="{StaticResource ParticleEndAngle4}" BeginTime="{StaticResource ParticleBeginTime4}" Duration="{StaticResource ParticleDuration4}"/> <DoubleAnimation Storyboard.TargetName="p1" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle5}" To="{StaticResource ParticleEndAngle5}" BeginTime="{StaticResource ParticleBeginTime5}" Duration="{StaticResource ParticleDuration5}"/> <DoubleAnimation Storyboard.TargetName="p1" Storyboard.TargetProperty="(UIElement.Opacity)" From="{StaticResource ParticleBeginOpacity6}" To="{StaticResource ParticleEndOpacity6}" BeginTime="{StaticResource ParticleBeginTime6}" Duration="{StaticResource ParticleDuration6}"/> <DoubleAnimation Storyboard.TargetName="p1" Storyboard.TargetProperty="(UIElement.Opacity)" From="{StaticResource ParticleBeginOpacity7}" To="{StaticResource ParticleEndOpacity7}" BeginTime="{StaticResource ParticleBeginTime7}" Duration="{StaticResource ParticleDuration7}"/> </Storyboard> </BeginStoryboard> <BeginStoryboard> <Storyboard BeginTime="{StaticResource StoryBoardBeginTimeP2}" Duration="{StaticResource StoryBoardDuration}" RepeatBehavior="Forever"> <DoubleAnimation Storyboard.TargetName="p2" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle1}" To="{StaticResource ParticleEndAngle1}" BeginTime="{StaticResource ParticleBeginTime1}" Duration="{StaticResource ParticleDuration1}"/> <DoubleAnimation Storyboard.TargetName="p2" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle2}" To="{StaticResource ParticleEndAngle2}" BeginTime="{StaticResource ParticleBeginTime2}" Duration="{StaticResource ParticleDuration2}"/> <DoubleAnimation Storyboard.TargetName="p2" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle3}" To="{StaticResource ParticleEndAngle3}" BeginTime="{StaticResource ParticleBeginTime3}" Duration="{StaticResource ParticleDuration3}"/> <DoubleAnimation Storyboard.TargetName="p2" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle4}" To="{StaticResource ParticleEndAngle4}" BeginTime="{StaticResource ParticleBeginTime4}" Duration="{StaticResource ParticleDuration4}"/> <DoubleAnimation Storyboard.TargetName="p2" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle5}" To="{StaticResource ParticleEndAngle5}" BeginTime="{StaticResource ParticleBeginTime5}" Duration="{StaticResource ParticleDuration5}"/> <DoubleAnimation Storyboard.TargetName="p2" Storyboard.TargetProperty="(UIElement.Opacity)" From="{StaticResource ParticleBeginOpacity6}" To="{StaticResource ParticleEndOpacity6}" BeginTime="{StaticResource ParticleBeginTime6}" Duration="{StaticResource ParticleDuration6}"/> <DoubleAnimation Storyboard.TargetName="p2" Storyboard.TargetProperty="(UIElement.Opacity)" From="{StaticResource ParticleBeginOpacity7}" To="{StaticResource ParticleEndOpacity7}" BeginTime="{StaticResource ParticleBeginTime7}" Duration="{StaticResource ParticleDuration7}"/> </Storyboard> </BeginStoryboard> <BeginStoryboard> <Storyboard BeginTime="{StaticResource StoryBoardBeginTimeP3}" Duration="{StaticResource StoryBoardDuration}" RepeatBehavior="Forever"> <DoubleAnimation Storyboard.TargetName="p3" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle1}" To="{StaticResource ParticleEndAngle1}" BeginTime="{StaticResource ParticleBeginTime1}" Duration="{StaticResource ParticleDuration1}"/> <DoubleAnimation Storyboard.TargetName="p3" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle2}" To="{StaticResource ParticleEndAngle2}" BeginTime="{StaticResource ParticleBeginTime2}" Duration="{StaticResource ParticleDuration2}"/> <DoubleAnimation Storyboard.TargetName="p3" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle3}" To="{StaticResource ParticleEndAngle3}" BeginTime="{StaticResource ParticleBeginTime3}" Duration="{StaticResource ParticleDuration3}"/> <DoubleAnimation Storyboard.TargetName="p3" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle4}" To="{StaticResource ParticleEndAngle4}" BeginTime="{StaticResource ParticleBeginTime4}" Duration="{StaticResource ParticleDuration4}"/> <DoubleAnimation Storyboard.TargetName="p3" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle5}" To="{StaticResource ParticleEndAngle5}" BeginTime="{StaticResource ParticleBeginTime5}" Duration="{StaticResource ParticleDuration5}"/> <DoubleAnimation Storyboard.TargetName="p3" Storyboard.TargetProperty="(UIElement.Opacity)" From="{StaticResource ParticleBeginOpacity6}" To="{StaticResource ParticleEndOpacity6}" BeginTime="{StaticResource ParticleBeginTime6}" Duration="{StaticResource ParticleDuration6}"/> <DoubleAnimation Storyboard.TargetName="p3" Storyboard.TargetProperty="(UIElement.Opacity)" From="{StaticResource ParticleBeginOpacity7}" To="{StaticResource ParticleEndOpacity7}" BeginTime="{StaticResource ParticleBeginTime7}" Duration="{StaticResource ParticleDuration7}"/> </Storyboard> </BeginStoryboard> <BeginStoryboard> <Storyboard BeginTime="{StaticResource StoryBoardBeginTimeP4}" Duration="{StaticResource StoryBoardDuration}" RepeatBehavior="Forever"> <DoubleAnimation Storyboard.TargetName="p4" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle1}" To="{StaticResource ParticleEndAngle1}" BeginTime="{StaticResource ParticleBeginTime1}" Duration="{StaticResource ParticleDuration1}"/> <DoubleAnimation Storyboard.TargetName="p4" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle2}" To="{StaticResource ParticleEndAngle2}" BeginTime="{StaticResource ParticleBeginTime2}" Duration="{StaticResource ParticleDuration2}"/> <DoubleAnimation Storyboard.TargetName="p4" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle3}" To="{StaticResource ParticleEndAngle3}" BeginTime="{StaticResource ParticleBeginTime3}" Duration="{StaticResource ParticleDuration3}"/> <DoubleAnimation Storyboard.TargetName="p4" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle4}" To="{StaticResource ParticleEndAngle4}" BeginTime="{StaticResource ParticleBeginTime4}" Duration="{StaticResource ParticleDuration4}"/> <DoubleAnimation Storyboard.TargetName="p4" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="{StaticResource ParticleBeginAngle5}" To="{StaticResource ParticleEndAngle5}" BeginTime="{StaticResource ParticleBeginTime5}" Duration="{StaticResource ParticleDuration5}"/> <DoubleAnimation Storyboard.TargetName="p4" Storyboard.TargetProperty="(UIElement.Opacity)" From="{StaticResource ParticleBeginOpacity6}" To="{StaticResource ParticleEndOpacity6}" BeginTime="{StaticResource ParticleBeginTime6}" Duration="{StaticResource ParticleDuration6}"/> <DoubleAnimation Storyboard.TargetName="p4" Storyboard.TargetProperty="(UIElement.Opacity)" From="{StaticResource ParticleBeginOpacity7}" To="{StaticResource ParticleEndOpacity7}" BeginTime="{StaticResource ParticleBeginTime7}" Duration="{StaticResource ParticleDuration7}"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Grid.Triggers> <Border x:Name="p0" Background="{StaticResource ParticleBackgroundColor}" Opacity="{StaticResource ParticleOpacity}"> <Border.RenderTransform> <RotateTransform/> </Border.RenderTransform> <Border.RenderTransformOrigin> <Point X="{StaticResource RotationPointX}" Y="{StaticResource RotationPointY}"/> </Border.RenderTransformOrigin> <Ellipse Style="{StaticResource EllipseStyle}"> <Ellipse.RenderTransform> <TransformGroup> <TranslateTransform X="{StaticResource StartingPointX}" Y="{StaticResource StartingPointY}"/> <RotateTransform Angle="{StaticResource ParticleOriginAngleP0}"/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> </Border> <Border x:Name="p1" Background="{StaticResource ParticleBackgroundColor}" Opacity="{StaticResource ParticleOpacity}"> <Border.RenderTransform> <RotateTransform/> </Border.RenderTransform> <Border.RenderTransformOrigin> <Point X="{StaticResource RotationPointX}" Y ="{StaticResource RotationPointY}"/> </Border.RenderTransformOrigin> <Ellipse Style = "{StaticResource EllipseStyle}"> <Ellipse.RenderTransform> <TransformGroup> <TranslateTransform X="{StaticResource StartingPointX}" Y="{StaticResource StartingPointY}"/> <RotateTransform Angle="{StaticResource ParticleOriginAngleP1}"/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> </Border> <Border x:Name="p2" Background="{StaticResource ParticleBackgroundColor}" Opacity="{StaticResource ParticleOpacity}"> <Border.RenderTransform> <RotateTransform/> </Border.RenderTransform> <Border.RenderTransformOrigin> <Point X="{StaticResource RotationPointX}" Y="{StaticResource RotationPointY}"/> </Border.RenderTransformOrigin> <Ellipse Style="{StaticResource EllipseStyle}"> <Ellipse.RenderTransform> <TransformGroup> <TranslateTransform X="{StaticResource StartingPointX}" Y="{StaticResource StartingPointY}"/> <RotateTransform Angle="{StaticResource ParticleOriginAngleP2}"/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> </Border> <Border x:Name="p3" Background="{StaticResource ParticleBackgroundColor}" Opacity="{StaticResource ParticleOpacity}"> <Border.RenderTransform> <RotateTransform/> </Border.RenderTransform> <Border.RenderTransformOrigin> <Point X="{StaticResource RotationPointX}" Y="{StaticResource RotationPointY}"/> </Border.RenderTransformOrigin> <Ellipse Style="{StaticResource EllipseStyle}"> <Ellipse.RenderTransform> <TransformGroup> <TranslateTransform X="{StaticResource StartingPointX}" Y="{StaticResource StartingPointY}"/> <RotateTransform Angle="{StaticResource ParticleOriginAngleP3}"/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> </Border> <Border x:Name="p4" Background="{StaticResource ParticleBackgroundColor}" Opacity="{StaticResource ParticleOpacity}"> <Border.RenderTransform> <RotateTransform/> </Border.RenderTransform> <Border.RenderTransformOrigin> <Point X="{StaticResource RotationPointX}" Y="{StaticResource RotationPointY}"/> </Border.RenderTransformOrigin> <Ellipse Style="{StaticResource EllipseStyle}"> <Ellipse.RenderTransform> <TransformGroup> <TranslateTransform X="{StaticResource StartingPointX}" Y="{StaticResource StartingPointY}"/> <RotateTransform Angle="{StaticResource ParticleOriginAngleP4}"/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> </Border> </Grid> </Grid> </UserControl>
