[Windows 8 App]動畫特效-----3D旋轉與Storyboard結合

2014-01-05

這裡我們將剛剛練習的3D旋轉與Storyboard做個結合

透過PlaneProjection元素的RotationX屬性值

介面中的圖片將會在立體空間中沿著X軸不停旋轉

我們來時做個範例

首先，新增一個專案【3DRotationAnimation】

開啟【MainPage.xaml】，在【MainPage.xaml】中輸入以下程式碼：

<Page
    x:Class="_3DAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:_3DAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Gray">
        <StackPanel Width="300" Height="300" Background="Yellow">
            <Image Source="image/LOGO.jpg" Width="300" Height="300" PointerPressed="RotationX_Click">
                <Image.Projection>
                    <PlaneProjection x:Name="PlaneProjectionRotation" />
                </Image.Projection>
            </Image>
            <StackPanel.Resources>
                <Storyboard x:Name="storyboard">
                    <DoubleAnimation Duration="0:0:4" Storyboard.TargetName="PlaneProjectionRotation" Storyboard.TargetProperty="RotationX" From="0" To="360" RepeatBehavior="Forever" />
                </Storyboard>
            </StackPanel.Resources>
        </StackPanel>        
    </Grid>
</Page>

以上程式碼中，在StackPanel元素中添加一個Image元素

設定圖片的位址路徑，並為元素的PointerPressed事件定義名為"RotationX_Click"的事件處理方法

用來控制動畫的播放

接著在Image.Projection元素中添加一個名稱為"PlaneProjectionRotation"的PlaneProjection元素

PlaneProjection元素可以定義圖片透過透視轉換後在介面中呈現的方式

然後在StackPanel元素的StackPanel.Resources中添加一個作為動畫資源的Storyboard元素，並命名為storyboard

Storyboard元素中添加了一個DoubleAnimation動畫，用來將圖片的3D特效與storyboard做結合

同時指定Storyboard的TargetName和TargetProperty屬性值

設置Duration屬性值來指定動畫週期，動畫週期越小，圖片速度就越快，這裡設置4秒

RepeatBehavior設置Forever，表示動畫會一直循環播放

接著開起【MainPage.xaml.cs】的Rotation_Click的事件下輸入storyboard執行方法

private void RotationX_Click(object sender, PointerRoutedEventArgs e)
{
   storyboard.Begin();
}

這是專案執行的影片：

回首頁