效果:
代码:
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
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