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轴方向旋转的面板-->
            <DoubleAnimation Storyboard.TargetName="planeProjection"
                             Storyboard.TargetProperty="RotationY"
                             From="0" To="360" Duration="0:0:5" />
        </Storyboard>
        <Storyboard x:Name="rotateZ"><!--沿Z轴方向旋转的面板-->
            <DoubleAnimation Storyboard.TargetName="planeProjection"
                             Storyboard.TargetProperty="RotationZ"
                             From="0" To="360" Duration="0:0:5" />
        </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 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="*" />
                <ColumnDefinition Width="*" />
                <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();
        }
    }
}