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