WPF 仿windows8加载动画

来源：互联网发布：php保存到记事本编辑：程序博客网时间：2024/06/10 08:28

效果:

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

0 0