Silverlight进度条控件动画源代码

效果：

代码：

1   <UserControl x:Class="ShineDraw.Controls.LoadingAnimation"
2       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4       Width="400" Height="400" >
5       <UserControl.Resources>
6           <Storyboard x:Name="Rotation" RepeatBehavior="Forever">
7               <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
8                   <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
9                   <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
10                  <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="45"/>
11                  <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="45"/>
12                  <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="90"/>
13                  <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="90"/>
14                  <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="135"/>
15                  <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="135"/>
16                  <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="180"/>
17                  <SplineDoubleKeyFrame KeyTime="00:00:01.0000000" Value="180"/>
18                  <SplineDoubleKeyFrame KeyTime="00:00:01.0000000" Value="225"/>
19                  <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="225"/>
20                  <SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="270"/>
21                  <SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="270"/>
22                  <SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="315"/>
23                  <SplineDoubleKeyFrame KeyTime="00:00:01.6000000" Value="315"/>
24              </DoubleAnimationUsingKeyFrames>
25          </Storyboard>
26      </UserControl.Resources>
27 
28      <Grid x:Name="LayoutRoot" Background="Transparent" RenderTransformOrigin="0.5,0.5">
29          <Grid.RenderTransform>
30              <TransformGroup>
31                  <ScaleTransform/>
32                  <SkewTransform/>
33                  <RotateTransform/>
34                  <TranslateTransform/>
35              </TransformGroup>
36          </Grid.RenderTransform>
37          <Ellipse Width="100" Height="100" Fill="#FF000000" >
38              <Ellipse.RenderTransform>
39                  <TransformGroup>
40                      <ScaleTransform/>
41                      <SkewTransform/>
42                      <RotateTransform/>
43                      <TranslateTransform X="-150"/>
44                  </TransformGroup>
45              </Ellipse.RenderTransform>
46          </Ellipse>
47          <Ellipse Width="100" Height="100" Fill="#FFAAAAAA" >
48              <Ellipse.RenderTransform>
49                  <TransformGroup>
50                      <ScaleTransform/>
51                      <SkewTransform/>
52                      <RotateTransform Angle="45" CenterX="200" CenterY="50"/>
53                      <TranslateTransform X="-150"/>
54                  </TransformGroup>
55              </Ellipse.RenderTransform>
56          </Ellipse>
57          <Ellipse Width="100" Height="100" Fill="#FFAAAAAA"  >
58              <Ellipse.RenderTransform>
59                  <TransformGroup>
60                      <ScaleTransform/>
61                      <SkewTransform/>
62                      <RotateTransform Angle="90" CenterX="200" CenterY="50"/>
63                      <TranslateTransform X="-150"/>
64                  </TransformGroup>
65              </Ellipse.RenderTransform>
66          </Ellipse>
67          <Ellipse Width="100" Height="100" Fill="#FFAAAAAA"  >
68              <Ellipse.RenderTransform>
69                  <TransformGroup>
70                      <ScaleTransform/>
71                      <SkewTransform/>
72                      <RotateTransform Angle="135" CenterX="200" CenterY="50"/>
73                      <TranslateTransform X="-150"/>
74                  </TransformGroup>
75              </Ellipse.RenderTransform>
76          </Ellipse>
77          <Ellipse Width="100" Height="100" Fill="#FF999999"  >
78              <Ellipse.RenderTransform>
79                  <TransformGroup>
80                      <ScaleTransform/>
81                      <SkewTransform/>
82                      <RotateTransform Angle="180" CenterX="200" CenterY="50"/>
83                      <TranslateTransform X="-150"/>
84                  </TransformGroup>
85              </Ellipse.RenderTransform>
86          </Ellipse>
87          <Ellipse Width="100" Height="100" Fill="#FF777777" >
88              <Ellipse.RenderTransform>
89                  <TransformGroup>
90                      <ScaleTransform/>
91                      <SkewTransform/>
92                      <RotateTransform Angle="225" CenterX="200" CenterY="50"/>
93                      <TranslateTransform X="-150"/>
94                  </TransformGroup>
95              </Ellipse.RenderTransform>
96          </Ellipse>
97          <Ellipse Width="100" Height="100" Fill="#FF555555"  >
98              <Ellipse.RenderTransform>
99                  <TransformGroup>
100                     <ScaleTransform/>
101                     <SkewTransform/>
102                     <RotateTransform Angle="270" CenterX="200" CenterY="50"/>
103                     <TranslateTransform X="-150"/>
104                 </TransformGroup>
105             </Ellipse.RenderTransform>
106         </Ellipse>
107         <Ellipse Width="100" Height="100" Fill="#FF333333"  >
108             <Ellipse.RenderTransform>
109                 <TransformGroup>
110                     <ScaleTransform/>
111                     <SkewTransform/>
112                     <RotateTransform Angle="315" CenterX="200" CenterY="50"/>
113                     <TranslateTransform X="-150"/>
114                 </TransformGroup>
115             </Ellipse.RenderTransform>
116         </Ellipse>
117     </Grid>
118 </UserControl>
119