[Windows 8 App]動畫特效-----Y軸的旋轉與Z軸的旋轉與Storyboard結合

2014-01-05

我們示範過X軸的旋轉特效後，那Y軸與Z軸的旋轉特效怎麼變化

這是【MainPage.xaml】的程式碼：

我們將RotationX的部分換成RotationY就可以變成Y軸旋轉了!!


<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="RotationY_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="RotationY" From="0" To="360" RepeatBehavior="Forever" />
                </Storyboard>
            </StackPanel.Resources>
        </StackPanel>        
    </Grid>
</Page>

這是【MainPage.xaml.cs】的完整程式碼：


using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 空白頁項目範本已記錄在 http://go.microsoft.com/fwlink/?LinkId=234238

namespace _3DAnimation
{
    /// <summary>
    /// 可以在本身使用或巡覽至框架內的空白頁面。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// 在此頁面即將顯示在框架中時叫用。
        /// </summary>
        /// <param name="e">描述如何到達此頁面的事件資料。Parameter
        /// 屬性通常用來設定頁面。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

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

Y軸的執行畫面：

那如果是Z軸的旋轉特效呢，一樣的方式

將RotationX的部分換成RotationZ就可以變成Z軸旋轉了!!

底下是Z軸的【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="RotationZ_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="RotationZ" From="0" To="360" RepeatBehavior="Forever" />
                </Storyboard>
            </StackPanel.Resources>
        </StackPanel>        
    </Grid>
</Page>

這是Z軸的【MainPage.xaml.cs】的完整程式碼：


using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 空白頁項目範本已記錄在 http://go.microsoft.com/fwlink/?LinkId=234238

namespace _3DAnimation
{
    /// <summary>
    /// 可以在本身使用或巡覽至框架內的空白頁面。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// 在此頁面即將顯示在框架中時叫用。
        /// </summary>
        /// <param name="e">描述如何到達此頁面的事件資料。Parameter
        /// 屬性通常用來設定頁面。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

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

Z軸的動畫影片：

回首頁