zoukankan html css js c++ java

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     }

源码

查看全文

相关阅读:
Maximum Flow Exhaustion of Paths Algorithm
ubuntu下安装java环境
 visualbox使用（二）
vxworks一个超级奇怪的错误(parse error before `char')
February 4th, 2018 Week 6th Sunday
February 3rd, 2018 Week 5th Saturday
February 2nd, 2018 Week 5th Friday
February 1st, 2018 Week 5th Thursday
January 31st, 2018 Week 05th Wednesday
January 30th, 2018 Week 05th Tuesday

原文地址：https://www.cnblogs.com/starlet/p/2831193.html