[Windows 8 App]動畫特效------偏移特效

2014-01-05

我們有介紹過旋轉中心的旋轉角度

[Windows 8 App]動畫特效-----旋轉中心

這裡我們將進一步地介紹如何對旋轉對象進行平移

這裡我們先介紹幾個屬性：

LocalOffsetX：沿旋轉對象平面的X軸平移

LocalOffsetY：沿旋轉對象平面的Y軸平移

LocalOffsetZ：沿旋轉對象平面的Z軸平移

GlobalOffsetX：沿著與屏幕對齊的X軸平移

GlobalOffsetY：沿著與屏幕對齊的Y軸平移

GlobalOffsetZ：沿著與屏幕對齊的Z軸平移

上述的這三個屬性LocalOffsetX、LocalOffsetY和LocalOffsetZ

可以使介面元素沿著X軸、Y軸與Z軸平移

如果在平移的同時還伴隨著旋轉，那麼會影響到元素平移的方向

而這三個屬性GlobalOffsetX、GlobalOffsetY和GlobalOffsetZ

即使元素在平移的同時還伴隨著旋轉

也不會影響到元素的平移方向

意思是說元素會在屏幕所在的平面進行平移

下面將透過範例來介紹偏移特效

首先，新增一個專案【Dynamic3DAnimation】

開啟【MainPage.xaml】，這是【MainPage.xaml】的完整程式碼：


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

    <Grid Background="Gray">
        <Grid.Resources>
            <Storyboard x:Name="storyboard">
                <DoubleAnimation Duration="0:0:5" Storyboard.TargetName="MyPlaneProjection" Storyboard.TargetProperty="RotationY" To="360" RepeatBehavior="forever" />
                <DoubleAnimation Duration="0:0:5" Storyboard.TargetName="MyPlaneProjection" Storyboard.TargetProperty="LocalOffsetX" To="120" RepeatBehavior="forever" />
            </Storyboard>
        </Grid.Resources>
        <StackPanel Width="400" Height="400" Background="Green" >
            <Image Width="400" Height="400" PointerPressed="StartAnimation_Click" Source="image/LOGO.jpg">
                <Image.Projection>
                    <PlaneProjection x:Name="MyPlaneProjection" />
                </Image.Projection>
            </Image>
        </StackPanel> 
    </Grid>
</Page>

上面的程式碼中，首先在Grid元素的Grid.Resources中添加一個Storyboard元素

接著在storyboard元素中添加兩個DoubleAnimation動畫

並分別設定這兩個DoubleAnimation動畫的屬性值為RotationY和LocalOffsetX

用來控制介面的旋轉與平移

同時設定這兩個DoubleAnimation動畫的動畫週期為3秒，並設置RepeatBehavior值為Forever

接著在Grid元素中添加一個StackPanel元素，然後定義此元素的StartAnimation_Click事件處理方法，用來控制動畫的播放

最後，開啟【MainPage.xaml.cs】來輸入StartAnimation_Click事件處理方法的程式碼：


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

執行專案，影片如下：

回首頁