記錄一個仿Windows10加載動畫

 1 <UserControl x:Class="Zhaoxi.Controls.Loading"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              xmlns:local="clr-namespace:Zhaoxi.Controls"
 7              mc:Ignorable="d" 
 8              d:DesignHeight="100" d:DesignWidth="100">
 9     <UserControl.Resources>
10         <Storyboard x:Key="beginStoryboard">
11             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rt1" Storyboard.TargetProperty="Angle" RepeatBehavior="Forever">
12                 <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" KeySpline="0.6,0.1,0.4,0.9"/>
13                 <SplineDoubleKeyFrame KeyTime="0:0:2" Value="360" KeySpline="0.6,0.1,0.4,0.9"/>
14                 <SplineDoubleKeyFrame KeyTime="0:0:4" Value="720" KeySpline="0.6,0.1,0.4,0.9"/>
15             </DoubleAnimationUsingKeyFrames>
16             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rt2" Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" BeginTime="0:0:0.2">
17                 <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" KeySpline="0.6,0.1,0.4,0.9"/>
18                 <SplineDoubleKeyFrame KeyTime="0:0:2" Value="360" KeySpline="0.6,0.1,0.4,0.9"/>
19                 <SplineDoubleKeyFrame KeyTime="0:0:4" Value="720" KeySpline="0.6,0.1,0.4,0.9"/>
20             </DoubleAnimationUsingKeyFrames>
21             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rt3" Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" BeginTime="0:0:0.4">
22                 <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" KeySpline="0.6,0.1,0.4,0.9"/>
23                 <SplineDoubleKeyFrame KeyTime="0:0:2" Value="360" KeySpline="0.6,0.1,0.4,0.9"/>
24                 <SplineDoubleKeyFrame KeyTime="0:0:4" Value="720" KeySpline="0.6,0.1,0.4,0.9"/>
25             </DoubleAnimationUsingKeyFrames>
26             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rt4" Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" BeginTime="0:0:0.6">
27                 <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" KeySpline="0.6,0.1,0.4,0.9"/>
28                 <SplineDoubleKeyFrame KeyTime="0:0:2" Value="360" KeySpline="0.6,0.1,0.4,0.9"/>
29                 <SplineDoubleKeyFrame KeyTime="0:0:4" Value="720" KeySpline="0.6,0.1,0.4,0.9"/>
30             </DoubleAnimationUsingKeyFrames>
31             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rt5" Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" BeginTime="0:0:0.8">
32                 <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" KeySpline="0.6,0.1,0.4,0.9"/>
33                 <SplineDoubleKeyFrame KeyTime="0:0:2" Value="360" KeySpline="0.6,0.1,0.4,0.9"/>
34                 <SplineDoubleKeyFrame KeyTime="0:0:4" Value="720" KeySpline="0.6,0.1,0.4,0.9"/>
35             </DoubleAnimationUsingKeyFrames>
36             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rt6" Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" BeginTime="0:0:1">
37                 <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" KeySpline="0.6,0.1,0.4,0.9"/>
38                 <SplineDoubleKeyFrame KeyTime="0:0:2" Value="360" KeySpline="0.6,0.1,0.4,0.9"/>
39                 <SplineDoubleKeyFrame KeyTime="0:0:4" Value="720" KeySpline="0.6,0.1,0.4,0.9"/>
40             </DoubleAnimationUsingKeyFrames>
41         </Storyboard>
42     </UserControl.Resources>
43     <UserControl.Triggers>
44         <EventTrigger RoutedEvent="UserControl.Loaded">
45             <BeginStoryboard Storyboard="{StaticResource beginStoryboard}"/>
46         </EventTrigger>
47     </UserControl.Triggers>
48     <Grid>
49         <Border RenderTransformOrigin="0.5,0.5">
50             <Border.RenderTransform>
51                 <RotateTransform Angle="0" x:Name="rt1"/>
52             </Border.RenderTransform>
53             <Ellipse Width="10" Height="10" Fill="Orange" VerticalAlignment="Top"/>
54         </Border>
55         <Border RenderTransformOrigin="0.5,0.5">
56             <Border.RenderTransform>
57                 <RotateTransform Angle="0" x:Name="rt2"/>
58             </Border.RenderTransform>
59             <Ellipse Width="10" Height="10" Fill="Orange" VerticalAlignment="Top"/>
60         </Border>
61 
62         <Border RenderTransformOrigin="0.5,0.5">
63             <Border.RenderTransform>
64                 <RotateTransform Angle="0" x:Name="rt3"/>
65             </Border.RenderTransform>
66             <Ellipse Width="10" Height="10" Fill="Orange" VerticalAlignment="Top"/>
67         </Border>
68 
69         <Border RenderTransformOrigin="0.5,0.5">
70             <Border.RenderTransform>
71                 <RotateTransform Angle="0" x:Name="rt4"/>
72             </Border.RenderTransform>
73             <Ellipse Width="10" Height="10" Fill="Orange" VerticalAlignment="Top"/>
74         </Border>
75 
76         <Border RenderTransformOrigin="0.5,0.5">
77             <Border.RenderTransform>
78                 <RotateTransform Angle="0" x:Name="rt5"/>
79             </Border.RenderTransform>
80             <Ellipse Width="10" Height="10" Fill="Orange" VerticalAlignment="Top"/>
81         </Border>
82 
83         <Border RenderTransformOrigin="0.5,0.5">
84             <Border.RenderTransform>
85                 <RotateTransform Angle="0" x:Name="rt6"/>
86             </Border.RenderTransform>
87             <Ellipse Width="10" Height="10" Fill="Orange" VerticalAlignment="Top"/>
88         </Border>
89     </Grid>
90 </UserControl>