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

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

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

下面说说实现过程：

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

   

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

 <phone:PhoneApplicationPage.Resources>
     <Storyboard x:Name="SpinningAnimation">
         <DoubleAnimation AutoReverse="False"
                    Duration="0:0:3"
                    From="0"
                    RepeatBehavior="Forever"
                    Storyboard.TargetName="SpinningRotateTransform"
                    Storyboard.TargetProperty="Angle"
                    To="360" />
     </Storyboard>
 </phone:PhoneApplicationPage.Resources>

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

 <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="Red">
     <Image
     Margin="10,10"
     Height="50"
     Width="50"
     Source="/Spinner.png"
     Stretch="Uniform">
         <Image.RenderTransform>
             <RotateTransform x:Name="SpinningRotateTransform"
              CenterX="25"
              CenterY="25" />
         </Image.RenderTransform>
     </Image>
 </StackPanel>

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

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

 private void btnStart_Click(object sender, RoutedEventArgs e)
 {
     this.SpinningAnimation.Begin();
 }

 private void btnStop_Click(object sender, RoutedEventArgs e)
 {
     this.SpinningAnimation.Stop();
 }

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

 <Ellipse Fill="{StaticResource PhoneForegroundBrush}" Height="50" Width="50" Margin="10,10">
     <Ellipse.OpacityMask>
         <ImageBrush ImageSource="/Spinner.png" Stretch="Uniform"/>
     </Ellipse.OpacityMask>
     <Ellipse.RenderTransform>
         <RotateTransform x:Name="SpinningRotateTransform"
              CenterX="25"
              CenterY="25" />
     </Ellipse.RenderTransform>
 </Ellipse>

最终全部代码如下：

MainPage.xaml:

 <phone:PhoneApplicationPage
     x:Class="SpinningProgressBar.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     FontFamily="{StaticResource PhoneFontFamilyNormal}"
     FontSize="{StaticResource PhoneFontSizeNormal}"
     Foreground="{StaticResource PhoneForegroundBrush}"
     SupportedOrientations="Portrait" Orientation="Portrait"
     shell:SystemTray.IsVisible="True">
     <phone:PhoneApplicationPage.Resources>
         <Storyboard x:Name="SpinningAnimation">
             <DoubleAnimation AutoReverse="False"
                        Duration="0:0:3"
                        From="0"
                        RepeatBehavior="Forever"
                        Storyboard.TargetName="SpinningRotateTransform"
                        Storyboard.TargetProperty="Angle"
                        To="360" />
         </Storyboard>
     </phone:PhoneApplicationPage.Resources>

     <!--LayoutRoot is the root grid where all page content is placed-->
     <Grid x:Name="LayoutRoot" Background="Transparent">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>


         <!--TitlePanel contains the name of the application and page title-->
         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
             <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
             <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
         </StackPanel>

         <!--ContentPanel - place additional content here-->
         <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" >
             <Ellipse Fill="{StaticResource PhoneForegroundBrush}" Height="50" Width="50" Margin="10,10">
                 <Ellipse.OpacityMask>
                     <ImageBrush ImageSource="/Spinner.png" Stretch="Uniform"/>
                 </Ellipse.OpacityMask>
                 <Ellipse.RenderTransform>
                     <RotateTransform x:Name="SpinningRotateTransform"
                          CenterX="25"
                          CenterY="25" />
                 </Ellipse.RenderTransform>
             </Ellipse>



             <Button Content="Start Animation" Click="btnStart_Click"/>
             <Button Content="Stop Animation" Click="btnStop_Click"/>
         </StackPanel>

        </Grid>

 </phone:PhoneApplicationPage>

MainPage.xaml.cs

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Net;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Navigation;
 using Microsoft.Phone.Controls;
 using Microsoft.Phone.Shell;
 using SpinningProgressBar.Resources;

 namespace SpinningProgressBar
 {
     public partial class MainPage : PhoneApplicationPage
     {
         // Constructor
         public MainPage()
         {
             InitializeComponent();
         }

         private void btnStart_Click(object sender, RoutedEventArgs e)
         {
             this.SpinningAnimation.Begin();
         }

         private void btnStop_Click(object sender, RoutedEventArgs e)
         {
             this.SpinningAnimation.Stop();
         }
     }
 }

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