Windows Phone 7 立體旋轉動畫的實作

Storyboard.TargetProperty表示擷取或設定應進行動畫處理的屬性的名稱。通過對Storyboard.TargetProperty屬性的設定可以很簡單地實作X軸、Y軸、Z軸的立體旋轉效果。

Storyboard.TargetProperty="RotationX"表示沿X軸旋轉

Storyboard.TargetProperty="RotationY"表示沿Y軸旋轉

Storyboard.TargetProperty="RotationZ"表示沿Z軸旋轉

下面是一個立體旋轉的執行個體：

<phone:PhoneApplicationPage   

    x:Class="PerspectiveRotation.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" d:DesignWidth="480" d:DesignHeight="768" 

    FontFamily="{StaticResource PhoneFontFamilyNormal}" 

    FontSize="{StaticResource PhoneFontSizeNormal}" 

    Foreground="{StaticResource PhoneForegroundBrush}" 

    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" 

    shell:SystemTray.IsVisible="True"> 

    <phone:PhoneApplicationPage.Resources> 

        <Storyboard x:Name="rotateX"><!--沿X軸方向旋轉的面闆--> 

            <DoubleAnimation Storyboard.TargetName="planeProjection" 

                             Storyboard.TargetProperty="RotationX" 

                             From="0" To="360" Duration="0:0:5" /> 

        </Storyboard> 

        <Storyboard x:Name="rotateY"><!--沿Y軸方向旋轉的面闆--> 

                             Storyboard.TargetProperty="RotationY" 

        <Storyboard x:Name="rotateZ"><!--沿Z軸方向旋轉的面闆--> 

                             Storyboard.TargetProperty="RotationZ" 

    </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 x:Name="ApplicationTitle" Text="立體旋轉" Style="{StaticResource PhoneTextNormalStyle}"/> 

        </StackPanel> 

        <!--ContentPanel - place additional content here--> 

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 

            <Grid.RowDefinitions> 

                <RowDefinition Height="*" /> 

                <RowDefinition Height="Auto" /> 

            </Grid.RowDefinitions> 

            <Grid.ColumnDefinitions> 

                <ColumnDefinition Width="*" /> 

            </Grid.ColumnDefinitions> 

            <TextBlock Name="txtblk" 

                       Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" 

                       Text="Oh，My God" 

                       FontSize="70" 

                       Foreground="{StaticResource PhoneAccentBrush}" 

                       HorizontalAlignment="Center" 

                       VerticalAlignment="Center"> 

                <TextBlock.Projection> 

                    <PlaneProjection x:Name="planeProjection" /> 

                </TextBlock.Projection> 

            </TextBlock> 

            <Button Grid.Row="1" Grid.Column="0" 

                    Content="旋轉-X軸" 

                    Click="RotateXClick" /> 

            <Button Grid.Row="1" Grid.Column="1" 

                    Content="旋轉-Y軸" 

                    Click="RotateYClick" /> 

            <Button Grid.Row="1" Grid.Column="2" 

                    Content="旋轉-Z軸" 

                    Click="RotateZClick" /> 

        </Grid> 

    </Grid> 

</phone:PhoneApplicationPage> 

using System;  

using System.Windows;  

using Microsoft.Phone.Controls;  

namespace PerspectiveRotation  

{  

    public partial class MainPage : PhoneApplicationPage  

    {  

        public MainPage()  

        {  

            InitializeComponent();  

        }  

        //沿X軸旋轉  

        void RotateXClick(object sender, RoutedEventArgs args)  

            rotateX.Begin();  

        //沿Y軸旋轉  

        void RotateYClick(object sender, RoutedEventArgs args)  

            rotateY.Begin();  

        //沿Z軸旋轉  

        void RotateZClick(object sender, RoutedEventArgs args)  

            rotateZ.Begin();  

    }  

} 

本文轉自linzheng 51CTO部落格，原文連結:http://blog.51cto.com/linzheng/1078708