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