開始使用:動畫

Applies to Windows and Windows Phone

新增動畫

在 iOS 中,您以程式設計的方式來建立動畫效果。您可以使用區塊型 UIView 類別的 animateWithDuration 方法或舊版非區塊型方法所提供的動畫。或者,您可以明確使用 CALayer 類別將圖層製作成動畫。Windows 市集應用程式中的動畫也可以透過程式設計的方式完成,但是也可以透過在 Extensible Application Markup Language (XAML) 進行宣告來完成。您可以使用 Microsoft Visual Studio 直接編輯 XAML 程式碼。此外,Visual Studio 隨附一個稱為 Blend for Microsoft Visual Studio 2013 的工具,當您在設計工具中處理動畫時,它可以在背景為您編輯 XAML 程式碼。事實上,Blend 甚至能讓您開啟、設計、建置以及執行完整的 Visual Studio 專案。下列逐步解說可讓您嘗試一下。

讓我們來試試看。建立一個新專案 (針對平台或通用),並為其命名為 "SimpleAnimation" 之類的名稱。在這個專案中,我們要移動一個矩形,將它淡出,然後再帶回檢視中。XAML 中的動畫是以「腳本」 (非供搭配 iOS 腳本使用) 的概念為基礎。腳本使用「主要畫面格」產生屬性變更的動畫效果。Windows 市集應用程式中沒有隱性動畫,但如您所見是用直接的方式產生屬性的動畫效果。

在專案開啟的時候,於 [方案總管] 中,按住專案名稱,然後點選 [在 Blend 中開啟],如下圖中所示。Visual Studio 會繼續在背景執行。

[在 Blend 中開啟] 功能表命令

Blend 啟動之後,您應該會看到和下圖類似的畫面。

Blend 開發環境

接下來,點選 [工具] 視窗中的 [矩形] 來選取它,然後在 [設計檢視] 中繪製一個矩形,如下圖中所示。

將矩形新增到設計檢視

若要讓矩形填滿綠色,請在 [屬性] 視窗的 [筆刷] 區域中,點選 [單色筆刷] 按鈕,點選 [色彩滴管] 圖示,然後點選綠色色調區段任一處。

若要開始建立矩形的動畫效果,在 [物件與時間軸] 視窗中,點選加號 ([新增]) 按鈕,如下圖中所示,然後點選 [確定]

新增腳本

[物件與時間軸] 視窗中就會顯示腳本。[設計檢視] 會顯示變更,以顯示 [Storyboard1 時間軸錄製中]。若要捕捉矩形的目前狀態,請在 [物件與時間軸] 視窗中,點選黃色箭頭正上方的 [錄製主要畫面格] 按鈕,如下圖中所示。

錄製主要畫面格

現在我們要移動矩形並讓它淡出。若要這樣做,將黃色箭頭拖曳到 2 秒的位置,然後將矩形向右拖曳一點點。接下來,在 [屬性] 視窗的 [外觀] 區域中,將 [不透明度] 屬性變更為 [0],如下圖中所示。若要預覽動畫,點選 [播放] 按鈕,也就是下圖中圈起來的部分。

[屬性] 視窗及 [播放] 按鈕

接下來,我們將矩形帶回檢視中。在 [物件與時間軸] 視窗中,點選 [Storyboard1]。然後,在 [屬性] 視窗的 [通用] 區域中,點選 [AutoReverse],如下圖中所示。

選取腳本

最後,點選 [播放] 按鈕看看發生了什麼事。

點選 [專案] 功能表上的 [執行專案] (或直接按 F5),就可以執行專案。如果這樣做,會看到綠色矩形,但是這個矩形不會有動畫效果。若要開始動畫,則需要在專案新增一行程式碼。方法如下。

在 Blend 中,點選 [檔案] 功能表上的 [儲存],然後返回到 Visual Studio。如果 Visual Studio 顯示一個對話方塊,詢問您是否要重新載入已修改過的檔案,請點選 [是]。開啟 MainPage.xaml.cs 檔案,然後新增下列程式碼。


protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Add the following line of code.
    Storyboard1.Begin();
}

重新執行專案,看看矩形的動畫效果。

如果開啟 MainPage.xaml 檔案,在 [XAML] 檢視中,您會看到當您在設計工具中工作時 Blend 為您新增的 XAML 程式碼。請特別看看 <Storyboard><Rectangle> 元素中的程式碼。下列程式碼顯示一個範例。橢圓形表示為簡潔而省略的不相關程式碼;為了便於閱讀程式碼,我們加入了斷行符號。


...
<Storyboard 
        x:Name="Storyboard1" 
        AutoReverse="True">
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="185.075"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="2.985"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.Opacity)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="1"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2"
                Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
...
<Rectangle 
        x:Name="rectangle" 
        Fill="#FF00FF63" 
        HorizontalAlignment="Left" 
        Height="122" 
        Margin="151,312,0,0" 
        Stroke="Black" 
        VerticalAlignment="Top" 
        Width="239" 
        RenderTransformOrigin="0.5,0.5">
    <Rectangle.RenderTransform>
        <CompositeTransform/>
    </Rectangle.RenderTransform>
</Rectangle>
...

如需動畫的詳細資訊,請參閱讓 UI 產生動畫效果

附註  如需使用 JavaScript 和 HTML 之 Windows 市集應用程式中動畫的詳細資訊,請參閱讓 UI 產生動畫效果 (HTML)

下一步

開始使用:後續動作?

 

 

顯示:
© 2014 Microsoft