WPF 仿windows8載入動畫
阿新 • • 發佈:2019-02-16
效果:
1,新增使用者控制元件CustomCircularProgressBar.xaml
XAML程式碼:
使用方法:<UserControl.Resources> <Storyboard x:Key="circularStoryboard" RepeatBehavior="Forever" > <DoubleAnimationUsingKeyFrames Storyboard.TargetName="grid1" BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" > <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="300"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="360"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01.5" Value="420"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01.9" Value="540"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:02.3" Value="660"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:02.9" Value="720"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:03.5" Value="780"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:03.9" Value="900"></SplineDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="grid2" BeginTime="00:00:00.13" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" > <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="300"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="360"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01.5" Value="420"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01.9" Value="540"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:02.3" Value="660"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:02.9" Value="720"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:03.5" Value="780"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:03.9" Value="900"></SplineDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="grid3" BeginTime="00:00:00.26" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" > <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="300"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="360"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01.5" Value="420"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01.9" Value="540"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:02.3" Value="660"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:02.9" Value="720"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:03.5" Value="780"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:03.9" Value="900"></SplineDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="grid4" BeginTime="00:00:00.39" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" > <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="300"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="360"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01.5" Value="420"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01.9" Value="540"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:02.3" Value="660"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:02.9" Value="720"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:03.5" Value="780"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:03.9" Value="900"></SplineDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="grid5" BeginTime="00:00:00.52" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" > <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="300"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="360"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01.5" Value="420"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:01.9" Value="540"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:02.3" Value="660"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:02.9" Value="720"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:03.5" Value="780"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:03.9" Value="900"></SplineDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="border" BeginTime="00:00:00.4" Storyboard.TargetProperty="Opacity" > <SplineDoubleKeyFrame KeyTime="00:00:00.1" Value="0"></SplineDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="border" BeginTime="00:00:03.5" Storyboard.TargetProperty="Opacity" > <SplineDoubleKeyFrame KeyTime="00:00:00.1" Value="1"></SplineDoubleKeyFrame> <SplineDoubleKeyFrame KeyTime="00:00:00.6" Value="1"></SplineDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <UserControl.Triggers> <EventTrigger RoutedEvent="UserControl.Loaded"> <BeginStoryboard Storyboard="{StaticResource circularStoryboard}" /> </EventTrigger> </UserControl.Triggers> <Grid Width="80" Height="80"> <Grid x:Name="grid1" Width="80" Height="80" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransform> <RotateTransform Angle="180"></RotateTransform> </Grid.RenderTransform> <Ellipse Width="6" Height="6" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Top"/> </Grid> <Grid x:Name="grid2" Width="80" Height="80" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransform> <RotateTransform Angle="180"></RotateTransform> </Grid.RenderTransform> <Ellipse Width="6" Height="6" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Top"/> </Grid> <Grid x:Name="grid3" Width="80" Height="80" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransform> <RotateTransform Angle="180"></RotateTransform> </Grid.RenderTransform> <Ellipse Width="6" Height="6" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Top"/> </Grid> <Grid x:Name="grid4" Width="80" Height="80" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransform> <RotateTransform Angle="180"></RotateTransform> </Grid.RenderTransform> <Ellipse Width="6" Height="6" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Top"/> </Grid> <Grid x:Name="grid5" Width="80" Height="80" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransform> <RotateTransform Angle="180"></RotateTransform> </Grid.RenderTransform> <Ellipse Width="6" Height="6" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Top"/> </Grid> <Border x:Name="border" Background="White" Width="8" Height="40" HorizontalAlignment="Center" VerticalAlignment="Bottom" Opacity="1" Margin="36,0,36,-2"></Border> </Grid>
新增引用:xmlns:local="clr-namespace:XXXX"
<local:CustomCircularProgressBar VerticalAlignment="Center" HorizontalAlignment="Center"></local:CustomCircularProgressBar>
原始碼地址:http://download.csdn.net/detail/dongcidaci999/9184481