UWP 開發中階 Chapter 1 - 介紹 Storyboard Animation 的簡單應用

上階段回顧

初階的教程基本完結，我在初階裏面簡單涵蓋了在 UWP 開發過程當中的基本知識點。到目前爲止，你們其實已經能夠作出簡單的應用了。但固然，更多的技巧還涉及到更深層次的 C#，對 C# 不夠熟悉的朋友，可能在初階教程的基礎上依舊不能自行深刻。這部分不用擔憂，我有打算從此開一個番外篇，拓展 C# 的用法，幫助你們更好的深刻 UWP 開發。

本階段前言

本階段開始，咱們將更深一層次學習 UWP 開發。所謂更深一層次並非說更難，而是說對於軟件開發的追求更高。好比咱們在初階中簡單追求應用控件學會導航等等，中階課程則會從 UI 動畫入手，並涉及一些開發模型與簡單的第三方庫的應用，便於你們更深層次的理解 UWP。

本篇正文

UWP 中動畫的介紹

在 UWP 中動畫大體能夠分爲兩種：Storyboard Animation 和 Composition Animation （注意：二者並非徹底獨立，存在必定的重合部分）。其中 Composition Animation 中還能夠拆分一個 Implicit Animation 出來。

• Storyboard Animation

  Storyboard Animation 是經過 XAML 編寫的，這種類型的動畫是直接在 UI 上進行的，也就是說當你軟件的 UI 進程出現卡頓或者無響應的狀況是，你的動畫也會收到相應的影響。好比你的軟件須要處理一個很大的數據的同時和你本身的 UI 界面存在交互，而且進行平移的動畫，那頗有可能會出現顯著的掉幀等問題。

• Composition Animation

  Composition Animation 是經過 C# 編寫的。這種類型的動畫是獨立於 UI 進行處理的，是直接訪問 Visual Layer（我不是很清楚中文該怎麼翻譯）的。因此也就是說正常狀況下，這種類型的動畫是能夠保持 60 FPS 顯示的。因爲直接接觸了 Visual Layer，這種類型的動畫的應用是最多樣化的。

  • Implicit Animation

    這種動畫算是 Composition Animation 中的一部分，所以天然能夠經過 C# 編寫，可是因爲如今在 Windows Community Toolkit 中提供了庫，使得咱們能夠經過 XAML 編寫。能夠用於更方便、簡潔地調整一些 XAML 元素的屬性等。

注意：我前文提到 Storyboard Animation 和 Composition Animation 並非徹底獨立的兩個部分，這是由於在 Storyboard Animation 中也存在 Independent 和 dependent 之分。所謂的 Dependent 就是指依附於 UI 線程的動畫。而在一些特殊狀況下（官方文檔有說起），Storyboard Animation 則是 Independent 的，其實這時候，實質上也是一種 Composition Animation 的實現。

Storyboard Animation

今天咱們簡單介紹一下 Storyboard Animation，往後再講 Composition Animation 和 Implicit Animation。

基本語法之初步嘗試

• 首先建立一個 Border，待會兒咱們的動畫就應用在這個 Border 上。固然你願意也能夠創建起它的，好比 Rectangle 等等。詳細代碼以下：

  <Canvas>
  	<Border Background="Red" Width="30" Height="30"
      		x:Name="TestBorder"
              Canvas.Left="50"
              Canvas.Top="50"/>
  </Canvas>
  複製代碼

  解釋：應該注意到我在 Border 外面還包了一個 Canvas，也就是畫布。這樣的好處就是咱們能夠經過 Canvas.Left 和 Canvas.Top 兩個屬性來明確 Border 的位置了。Canvas.Left 就是橫向的 x 軸，越往左數值越大。Canvas.Top 就是縱向的 y 軸，越往下數值越大。其中，畫布的左上角爲座標原點。你們應該還注意到了，我這裏面寫的是 x:Name 而不是原來的 Name，這二者其實原本是存在必定區別的。原本是隻有 x:Name，用於代碼中對相應的控件進行引用的。後來爲了方便，便逐漸將 x:Name 簡化成了 Name，但依舊在一些特定狀況下，好比如今，咱們須要寫做 x:Name 才能起做用，而 Name 則不能夠。

• 接下來咱們聲明咱們的動畫。Storyboard Animation 屬於 Resource，所以咱們須要在 Page.Resource 內創建。具體代碼以下：

  

  解釋：這裏面我創建了一個名叫 Translation 的動畫，旨在將這個 Border 水平平移到 300 的位置。其中 DoubleAnimation 對應的是動畫的屬性的類型。好比這裏面要變化的屬性是 Canvas.Left，它接受的值是 Double 類型的，因而咱們使用 DoubleAnimation。其餘支持的還有 PointAnimation 和 ColorAnimation。在上圖的 DoubleAnimation 中 Storyboard.TargetName 就是咱們剛纔創建的那個 Border 的名字。Storyboard.TargetProperty 就是咱們要改變的屬性，其中我加了一個括號是由於涉及到 .Left 這種的須要將屬性用括號包裹起來，否則會有錯誤。From 和 To 就是分別表示從一個值到另外一個值，像這個例子中，咱們的 Border 自己就位於 x 軸 50 的這個位置，那麼咱們能夠將這個 From 省去。最後的 Duration 表示着整個動畫完成的時間。其中用分號隔開的三個數分別表示小時、分鐘、秒。這三個數都是 double 類型的。

• 而後，咱們創建一個按鈕，用於點擊開始咱們的動畫。這裏代碼就不贅述了。

• 而後，咱們來到上面一步按鈕定義的事件處，寫如下代碼：

  Translation.Begin();
  複製代碼

• 最後的效果以下：

  

嘗試多個動畫同時做用

• 若是咱們不只僅想要它水平平移，而同時想要它垂直方向也平移。其實很簡單，在剛纔的 Storyboard 中再添加一個 DoubleAnimation 便可。以下：

  

• 運行一下，效果以下：

  

嘗試改變透明度

• 若是咱們想改變 Border 的 Opacity 呢？其實也很簡單，咱們新建一個 Storyboard，並在裏面添加一個 DoubleAnimation。以下圖：

  

• 而後新建一個按鈕來觸發事件。

• 而後在按鈕事件處寫下

  ChangeOpacity.Begin();
  複製代碼

• 效果以下：

  

嘗試改變顏色

• 這時候，若是咱們想要改變它的背景顏色，也很簡單。這時候咱們就須要用上 ColorAnimation，代碼以下：

  

  解釋：這裏面的 Storyboard.TargetProperty 內不能直接寫 Background 了。理由很簡單其實，以前說屬性的類型是什麼，就用什麼動畫。好比要改變 double 的，就用 DoubleAnimation。然而這裏咱們用的是 ColorAnimation 而 Background 的值的類型實際爲 Brush，而非 Color。所以，咱們經過我寫的這一串，定位到了類型爲 Color 的值。

• 接下來的操做和以前的十分類似，就很少講了

• 效果以下：

  

結語

本篇的篇幅可能稍微有些長，可是內容並非很難理解的。我相信也有不少朋友想要了解動畫的實現了。今天咱們簡單介紹了 Storyboard Animation 中的幾種應用。但願你們喜歡！

好啦！

下次見！