開始使用:動畫Getting started: Animation

新增動畫Adding animations

在 iOS 中,您經常會以程式設計的方式來建立動畫效果。In iOS, you most often create animation effects programmatically. 例如,您可以使用區塊型 UIView 類別的 animateWithDuration 方法或舊版非區塊型方法所提供的動畫。For example, you might use animations provided by the block-based UIView class's animateWithDuration methods, or the older non-block based methods. 或者,您可以明確使用 CALayer 類別將圖層製作成動畫。Or, you might explicitly use the CALayer class to animate layers. Windows 應用程式中的動畫也可以透過程式設計的方式建立,但是也可以透過 Extensible Application Markup Language (XAML) 以宣告的方式進行定義。Animations in Windows apps can be created programmatically, but they can also be defined declaratively with Extensible Application Markup Language (XAML). 您可以使用 Microsoft Visual Studio 直接編輯 XAML 程式碼,但是 Visual Studio 另外隨附了一個稱為 Blend 的工具,當您在設計工具中處理動畫時,它可以為您建立 XAML 程式碼。You can use Microsoft Visual Studio to edit XAML code directly, but Visual Studio also comes with a tool called Blend, which creates XAML code for you as you work with animations in a designer. 事實上,Blend 讓您能夠以圖形方式開啟、設計、建置以及執行完整的 Visual Studio 專案。In fact, Blend allows you to open, design, build, and run complete Visual Studio projects, graphically. 下列逐步解說可讓您嘗試一下。The following walkthrough lets you try this out.

建立一個新的通用 Windows 平台(UWP) app,並將它命名為「SimpleAnimation」之類的名稱。Create a new Universal Windows Platform (UWP) app and name it something like "SimpleAnimation". 在這個專案中,我們會移動一個矩形,套用淡出效果,然後再將它帶回檢視中。In this project, we're going to move a rectangle, apply a fade effect, and then bring it back into view. XAML 中的動畫是以「腳本」(請勿與 iOS 腳本混淆) 的概念為基礎。Animations in XAML are based on the concept of storyboards (not to be confused with iOS storyboards). 腳本使用「主要畫面格」產生屬性變更的動畫效果。Storyboards use keyframes to animate property changes.

在專案開啟的時候,於 [方案總管] 中,以滑鼠右鍵按一下專案名稱,然後點取 [在 Blend 中開啟] 或 [在 Blend 中設計],如下圖中所示。With your project open, in Solution Explorer, right-click the project's name and then select Open in Blend or Design in Blend, as shown in the following figure. Visual Studio 會繼續在背景執行。Visual Studio continues to run in the background.

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

Blend 啟動之後,您應該會看到和下圖類似的畫面。After Blend starts, you should see something similar to the following figure.

Blend 開發環境

於左側的 [方案總管] 視窗中按兩下 MainPage.xamlDouble-click on MainPage.xaml in the Solution Explorer on the left hand side. 接下來,在中央邊緣的 [設計檢視] 的垂直帶狀工具中,選取 [矩形] 工具,然後在 [設計檢視] 中繪製一個矩形,如下圖中所示。Next, from the vertical strip of tools on the edge of the central Design View, select the Rectangle tool, and then draw a rectangle in Design View, as shown in the following figure.

將矩形新增到設計檢視

若要讓矩形填滿綠色,請看到 [屬性] 視窗的 [筆刷] 區域,按一下 [單色筆刷] 按鈕,然後按一下 [色彩滴管] 圖示。To make the rectangle green, look in the Properties window, and in the Brush area, click on the Solid color brush button, and then click the Color eyedropper icon. 按一下綠色色調區段的任意位置。Click somewhere in the green band of hues.

若要開始建立矩形的動畫效果,在 [物件與時間軸] 視窗中,點選加號 ([新增]) 按鈕,如下圖中所示,然後點選 [確定]。To begin animating the rectangle, in the Objects and Timeline window, tap the plus symbol (New) button as shown in the following figure, and then tap OK.

新增腳本

[物件與時間軸] 視窗中就會顯示腳本 (您可能需要調整檢視,才能正確看到腳本)。A storyboard appears in the Objects and Timeline window (you may need to resize the view to see it properly). [設計檢視] 會顯示變更,以顯示 [Storyboard1 時間軸錄製中]。The Design View display changes to show that Storyboard1 timeline recording is on. 若要捕捉矩形的目前狀態,請在 [物件與時間軸] 視窗中,點選黃色箭頭正上方的 [錄製主要畫面格] 按鈕,如下圖中所示。To capture the current state of the rectangle, in the Objects and Timeline window, tap the Record Keyframe button just above the yellow arrow, as shown in the following figure.

錄製主要畫面格

現在我們要移動矩形並讓它淡出。Now, let's move the rectangle and fade it away. 若要這樣做,將橘免/黃色箭頭拖曳到 2 秒的位置,然後將矩形向右移一點點。To do this, drag the orange/yellow arrow to the 2-second position, and then move your green rectangle slightly to the right. 接下來,在 [屬性] 視窗的 [外觀] 區域中,將 [不透明度] 屬性變更為 [0],如下圖中所示。Then, in the Properties window, in the Appearance area, change the Opacity property to 0, as shown in the following figure. 若要預覽動畫,請點選 [腳本] 面板中的 [播放] 按鈕。To preview the animation, tap the Play button in the Storyboard panel.

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

接下來,我們將矩形帶回檢視中。Next, let's bring the rectangle back into view. 在 [物件與時間軸] 視窗中,按兩下 [Storyboard1]。In the Objects and Timeline window, double-click Storyboard1. 然後,在 [屬性] 視窗的 [通用] 區域中,選取 [自動反轉],如下圖中所示。Then, in the Properties window, in the Common area, select AutoReverse, as shown in the following figure.

選取腳本

最後,按一下 [播放] 按鈕看看發生了什麼事。Finally, click on the Play button to see what happens.

您可以按一下視窗頂端的綠色執行按鈕 (或只按下 F5) 來建置和執行專案。You can build and run the project by clicking on the green run button at the top of the window (or just press F5). 如果您這樣做,您將看到您的專案會確實地建置和執行,但綠色矩形卻動也不動,就像在超市走道看到糖果賴著不走的小孩一樣。If you do this, you'll see your project will indeed build and run, but the green rectangle will stubbornly sit perfectly still, like a toddler denied candy in a supermarket aisle. 若要開始動畫,則需要在專案新增一行程式碼。To start the animation, you'll need to add a line of code to the project. 方法如下。Here's how.

開啟 [檔案] 功能表,然後選取 [儲存 MainPage.xaml] 來儲存專案。Save the project, by opening the File menu, and selecting Save MainPage.xaml. 返回 Visual Studio。Return to Visual Studio. 如果 Visual Studio 顯示一個對話方塊,詢問您是否要重新載入已修改過的檔案,請選取 []。If Visual Studio displays a dialog box asking whether you want to reload the modified file, select Yes. 按兩下隱藏在 MainPage.xaml 底下的 MainPage.xaml.cs 檔案以將它開啟,並在 public MainPage() 方法正上方加入下列程式碼:Double-click the MainPage.xaml.cs file, which is hidden under MainPage.xaml, to open it, and add the following code just above the public MainPage() method:

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

重新執行專案,看看矩形的動畫效果。Run the project again, and watch the rectangle animate. 萬歲!Hurrah!

如果開啟 MainPage.xaml 檔案,在 [XAML] 檢視中,您會看到當您在設計工具中工作時 Blend 為您新增的 XAML 程式碼。If you open the MainPage.xaml file, in XAML view, you'll see the XAML code that Blend added for you as you worked in the designer. 請特別看看 <Storyboard><Rectangle> 元素中的程式碼。In particular, look at the code in the <Storyboard> and <Rectangle> elements. 下列程式碼為範例。The following code shows an example. 橢圓形表示為簡潔而省略的不相關程式碼;為了便於閱讀程式碼,我們加入了斷行符號。Ellipses indicate unrelated code omitted for brevity, and line breaks have been added for code readability.)

...
<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>
...

您可以以手動方式編輯這個 XAML,或返回 Blend 以繼續處理工作。You can edit this XAML manually, or return to Blend to continue working on it there. Blend 會以好玩的方式建立有趣的使用者介面,而使用圖形工具來製作介面動畫的功能將會大幅縮短開發時間。Blend makes it fun to create interesting user interfaces, and the ability to animate them using a graphical tool can dramatically speed up development time. 如需動畫的詳細資訊,請參閱動畫概觀For more info about animations, see Animations overview.

注意   如需使用 JavaScript 和 html 進行 UWP 應用程式動畫的詳細資訊,請參閱以動畫顯示 UI (HTML) Note  For info about animations for UWP apps using JavaScript and HTML, see Animating your UI (HTML).

後續步驟Next step

開始使用:接下來該怎麼辦?Getting started: What next?