Win8 loading 动画 Silverlight版本

体验win8后，觉得Loading图标挺好看的，自己随便做了一个，预览：

代码如下：

LayoutRoot

 1 <Grid x:Name="LayoutRoot" Background="White">
 2         <Border x:Name="BorderBackground" HorizontalAlignment="Center" Margin="20,201,0,225" Width="54" Background="#FF869CA7" Height="54" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" >
 3             <Border.RenderTransform>
 4                 <CompositeTransform ScaleX="2" ScaleY="2"/>
 5             </Border.RenderTransform>
 6             <Canvas x:Name="Loding_win8" RenderTransformOrigin="0,0" HorizontalAlignment="Center" Margin="2">
 7                 <Canvas.RenderTransform>
 8                     <CompositeTransform/>
 9                 </Canvas.RenderTransform>
10                 <Ellipse x:Name="ellipse_left1" Height="5" Stroke="Black" StrokeThickness="0" Width="5" Fill="White" RenderTransformOrigin="4.1,3.1" Canvas.Left="-20" Canvas.Top="10">
11                     <Ellipse.RenderTransform>
12                         <CompositeTransform/>
13                     </Ellipse.RenderTransform>
14                 </Ellipse>
15                 <Ellipse x:Name="ellipse_left2" Height="5" Stroke="Black" StrokeThickness="0" Width="5" Fill="White" RenderTransformOrigin="2.5,4.5" Canvas.Left="-12" Canvas.Top="3">
16                     <Ellipse.RenderTransform>
17                         <CompositeTransform/>
18                     </Ellipse.RenderTransform>
19                 </Ellipse>
20                 <Ellipse x:Name="ellipse_left3" Height="5" Stroke="Black" StrokeThickness="0" Width="5" Fill="White" RenderTransformOrigin="0.5,4.9" Canvas.Left="-2" Canvas.Top="1">
21                     <Ellipse.RenderTransform>
22                         <CompositeTransform/>
23                     </Ellipse.RenderTransform>
24                 </Ellipse>
25                 <Ellipse x:Name="ellipse_right1" Height="5" Stroke="Black" StrokeThickness="0" Width="5" Fill="White" RenderTransformOrigin="-1.5,4.5" Canvas.Left="8" Canvas.Top="3">
26                     <Ellipse.RenderTransform>
27                         <CompositeTransform/>
28                     </Ellipse.RenderTransform>
29                 </Ellipse>
30                 <Ellipse x:Name="ellipse_right2" Height="5" Stroke="Black" StrokeThickness="0" Width="5" Fill="White" RenderTransformOrigin="-3.1,3.1" Canvas.Left="16" Canvas.Top="10">
31                     <Ellipse.RenderTransform>
32                         <CompositeTransform/>
33                     </Ellipse.RenderTransform>
34                 </Ellipse>
35             </Canvas>
36         </Border>
37         <Ellipse Fill="Transparent" HorizontalAlignment="Left" Margin="25,206,0,229" Stroke="#FF70C264" Width="45" Visibility="Collapsed"/>
38     </Grid>

Storyboard

 1 <Storyboard x:Name="Storyboard_loading_win8" RepeatBehavior="Forever" AutoReverse="False">
 2             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ellipse_left1">
 3                 <EasingDoubleKeyFrame KeyTime="0:0:0.320" Value="0">
 4                     <EasingDoubleKeyFrame.EasingFunction>
 5                         <CubicEase EasingMode="EaseInOut"/>
 6                     </EasingDoubleKeyFrame.EasingFunction>
 7                 </EasingDoubleKeyFrame>
 8                 <EasingDoubleKeyFrame KeyTime="0:0:2.320" Value="360">
 9                     <EasingDoubleKeyFrame.EasingFunction>
10                         <CubicEase EasingMode="EaseInOut"/>
11                     </EasingDoubleKeyFrame.EasingFunction>
12                 </EasingDoubleKeyFrame>
13             </DoubleAnimationUsingKeyFrames>
14             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ellipse_left2">
15                 <EasingDoubleKeyFrame KeyTime="0:0:0.240" Value="0">
16                     <EasingDoubleKeyFrame.EasingFunction>
17                         <CubicEase EasingMode="EaseInOut"/>
18                     </EasingDoubleKeyFrame.EasingFunction>
19                 </EasingDoubleKeyFrame>
20                 <EasingDoubleKeyFrame KeyTime="0:0:2.240" Value="360">
21                     <EasingDoubleKeyFrame.EasingFunction>
22                         <CubicEase EasingMode="EaseInOut"/>
23                     </EasingDoubleKeyFrame.EasingFunction>
24                 </EasingDoubleKeyFrame>
25             </DoubleAnimationUsingKeyFrames>
26             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ellipse_left3">
27                 <EasingDoubleKeyFrame KeyTime="0:0:0.160" Value="0">
28                     <EasingDoubleKeyFrame.EasingFunction>
29                         <CubicEase EasingMode="EaseInOut"/>
30                     </EasingDoubleKeyFrame.EasingFunction>
31                 </EasingDoubleKeyFrame>
32                 <EasingDoubleKeyFrame KeyTime="0:0:2.160" Value="360">
33                     <EasingDoubleKeyFrame.EasingFunction>
34                         <CubicEase EasingMode="EaseInOut"/>
35                     </EasingDoubleKeyFrame.EasingFunction>
36                 </EasingDoubleKeyFrame>
37             </DoubleAnimationUsingKeyFrames>
38             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ellipse_right1">
39                 <EasingDoubleKeyFrame KeyTime="0:0:0.08" Value="0">
40                     <EasingDoubleKeyFrame.EasingFunction>
41                         <CubicEase EasingMode="EaseInOut"/>
42                     </EasingDoubleKeyFrame.EasingFunction>
43                 </EasingDoubleKeyFrame>
44                 <EasingDoubleKeyFrame KeyTime="0:0:2.08" Value="360">
45                     <EasingDoubleKeyFrame.EasingFunction>
46                         <CubicEase EasingMode="EaseInOut"/>
47                     </EasingDoubleKeyFrame.EasingFunction>
48                 </EasingDoubleKeyFrame>
49             </DoubleAnimationUsingKeyFrames>
50             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ellipse_right2">
51                 <EasingDoubleKeyFrame KeyTime="0" Value="0">
52                     <EasingDoubleKeyFrame.EasingFunction>
53                         <CubicEase EasingMode="EaseInOut"/>
54                     </EasingDoubleKeyFrame.EasingFunction>
55                 </EasingDoubleKeyFrame>
56                 <EasingDoubleKeyFrame KeyTime="0:0:2" Value="360">
57                     <EasingDoubleKeyFrame.EasingFunction>
58                         <CubicEase EasingMode="EaseInOut"/>
59                     </EasingDoubleKeyFrame.EasingFunction>
60                 </EasingDoubleKeyFrame>
61             </DoubleAnimationUsingKeyFrames>
62         </Storyboard>

 1 public partial class MainPage : UserControl
 2     {
 3         public MainPage()
 4         {
 5             // 为初始化变量所必需
 6             InitializeComponent();
 7             
 8             this.Storyboard_loading_win8.Begin();
 9         }
10     }

源码