windows phone开发学习--加载时的旋转动画

转自：windows phone开发学习--加载时的旋转动画

在进行windows phone开发时，有时候我们使用的是ProgressBar来表示程序正在进行载入操作，但其实也可以通过设计一个旋转的图片（类似于360杀毒软件）来表示正在进行加载。就像下面这样：

下面说说实现过程：

第一步：添加一个旋转png图片到工程中去

   

第二步：在MainPage,xaml中添加下面的动画效果

[html]  view plain copy print ?

1. <phone:PhoneApplicationPage.Resources>  
2.     <Storyboard x:Name="SpinningAnimation">  
3.         <DoubleAnimation AutoReverse="False"  
4.                    Duration="0:0:3"  
5.                    From="0"  
6.                    RepeatBehavior="Forever"  
7.                    Storyboard.TargetName="SpinningRotateTransform"  
8.                    Storyboard.TargetProperty="Angle"  
9.                    To="360" />  
10.     </Storyboard>  
11. </phone:PhoneApplicationPage.Resources>  

第三步：把下面代码加入到MainPage.xaml中：

[html]  view plain copy print ?

1. <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="Red">  
2.     <Image  
3.     Margin="10,10"  
4.     Height="50"  
5.     Width="50"  
6.     Source="/Spinner.png"  
7.     Stretch="Uniform">  
8.         <Image.RenderTransform>  
9.             <RotateTransform x:Name="SpinningRotateTransform"  
10.              CenterX="25"  
11.              CenterY="25" />  
12.         </Image.RenderTransform>  
13.     </Image>  
14. </StackPanel>  

第四步：添加两个按钮来开始结束动画

[html]  view plain copy print ?

1. <Button Content="Start Animation" Click="btnStart_Click"/>  
2. <Button Content="Stop Animation" Click="btnStop_Click"/>  

[csharp]  view plain copy print ?

1. private void btnStart_Click(object sender, RoutedEventArgs e)  
2. {  
3.     this.SpinningAnimation.Begin();  
4. }  
5.    
6. private void btnStop_Click(object sender, RoutedEventArgs e)  
7. {  
8.     this.SpinningAnimation.Stop();  
9. }  

第五步：如果运行后看不到效果，一般情况下是旋转图片的颜色和页面的背景色一致，改变颜色以后就能看到了，这里可以使用一个不透明性的Mask，添加下面代码：

[html]  view plain copy print ?

1. <Ellipse Fill="{StaticResource PhoneForegroundBrush}" Height="50" Width="50" Margin="10,10">  
2.     <Ellipse.OpacityMask>  
3.         <ImageBrush ImageSource="/Spinner.png" Stretch="Uniform"/>  
4.     </Ellipse.OpacityMask>  
5.     <Ellipse.RenderTransform>  
6.         <RotateTransform x:Name="SpinningRotateTransform"  
7.              CenterX="25"  
8.              CenterY="25" />  
9.     </Ellipse.RenderTransform>  
10. </Ellipse>  

最终全部代码如下：

MainPage.xaml:

[html]  view plain copy print ?

1. <phone:PhoneApplicationPage  
2.     x:Class="SpinningProgressBar.MainPage"  
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
5.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"  
6.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"  
7.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
8.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
9.     mc:Ignorable="d"  
10.     FontFamily="{StaticResource PhoneFontFamilyNormal}"  
11.     FontSize="{StaticResource PhoneFontSizeNormal}"  
12.     Foreground="{StaticResource PhoneForegroundBrush}"  
13.     SupportedOrientations="Portrait" Orientation="Portrait"  
14.     shell:SystemTray.IsVisible="True">  
15.     <phone:PhoneApplicationPage.Resources>  
16.         <Storyboard x:Name="SpinningAnimation">  
17.             <DoubleAnimation AutoReverse="False"  
18.                        Duration="0:0:3"  
19.                        From="0"  
20.                        RepeatBehavior="Forever"  
21.                        Storyboard.TargetName="SpinningRotateTransform"  
22.                        Storyboard.TargetProperty="Angle"  
23.                        To="360" />  
24.         </Storyboard>  
25.     </phone:PhoneApplicationPage.Resources>  
26.   
27.     <!--LayoutRoot is the root grid where all page content is placed-->  
28.     <Grid x:Name="LayoutRoot" Background="Transparent">  
29.         <Grid.RowDefinitions>  
30.             <RowDefinition Height="Auto"/>  
31.             <RowDefinition Height="*"/>  
32.         </Grid.RowDefinitions>  
33.   
34.   
35.         <!--TitlePanel contains the name of the application and page title-->  
36.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">  
37.             <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>  
38.             <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>  
39.         </StackPanel>  
40.   
41.         <!--ContentPanel - place additional content here-->  
42.         <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" >  
43.             <Ellipse Fill="{StaticResource PhoneForegroundBrush}" Height="50" Width="50" Margin="10,10">  
44.                 <Ellipse.OpacityMask>  
45.                     <ImageBrush ImageSource="/Spinner.png" Stretch="Uniform"/>  
46.                 </Ellipse.OpacityMask>  
47.                 <Ellipse.RenderTransform>  
48.                     <RotateTransform x:Name="SpinningRotateTransform"  
49.                          CenterX="25"  
50.                          CenterY="25" />  
51.                 </Ellipse.RenderTransform>  
52.             </Ellipse>  
53.               
54.      
55.   
56.             <Button Content="Start Animation" Click="btnStart_Click"/>  
57.             <Button Content="Stop Animation" Click="btnStop_Click"/>  
58.         </StackPanel>  
59.   
60.        </Grid>  
61.   
62. </phone:PhoneApplicationPage>  

MainPage.xaml.cs

[csharp]  view plain copy print ?

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Net;  
5. using System.Windows;  
6. using System.Windows.Controls;  
7. using System.Windows.Navigation;  
8. using Microsoft.Phone.Controls;  
9. using Microsoft.Phone.Shell;  
10. using SpinningProgressBar.Resources;  
11.   
12. namespace SpinningProgressBar  
13. {  
14.     public partial class MainPage : PhoneApplicationPage  
15.     {  
16.         // Constructor  
17.         public MainPage()  
18.         {  
19.             InitializeComponent();  
20.         }  
21.   
22.         private void btnStart_Click(object sender, RoutedEventArgs e)  
23.         {  
24.             this.SpinningAnimation.Begin();  
25.         }  
26.   
27.         private void btnStop_Click(object sender, RoutedEventArgs e)  
28.         {  
29.             this.SpinningAnimation.Stop();  
30.         }  
31.     }  
32. }  

源代码可以在这里下载： http://www.windowsphonegeek.com/upload/articles/SpinningAnimation.zip