UWP 開發中階 Chapter 2 - 經過 KeyFrame 實現更復雜的 Storyboard Animation

上篇回顧

距離上一篇已經有些時日了，上一篇中咱們講到了一種簡單的動畫 —— Storyboard Animation。這種動畫的侷限性在於，它自身頗有可能出現掉幀的可能，由於它是同軟件的 UI 在同一線程上運行的。上篇講過了最基礎的使用，可是這顯然在平常開發中是遠遠不夠的。好比咱們想讓正方形在平行水平移動的時候，不是一直從左到右移動，而是左邊一段，右邊一段。這時候咱們就須要引入本篇的內容 —— KeyFrame。

本篇正文

什麼是 KeyFrame ？

KeyFrame 簡單來說就是時間上的關鍵點。舉個例子，咱們有一個正方形，原點在橫座標 0 的位置，咱們須要它在第三秒的時候移動到橫座標 200 的位置，而第五秒的時候移動到橫座標 100 的位置，最後咱們須要在第八秒的時候移動到橫座標 250 的位置。這個例子中，一些關鍵的時間點好比第三秒、第五秒和第八秒就是所說的 KeyFrame

簡單語法與使用

咱們來嘗試去實現上面那個例子，基本語法和上文類似。完整代碼以下：

<Storyboard x:Name="Translation">
<DoubleAnimationUsingKeyFrames
		Storyboard.TargetName="TestBorder"
		Storyboard.TargetProperty="(Canvas.Left)"
		Duration="0:0:8">
	<LinearDoubleKeyFrame KeyTime="0:0:3" Value="200"/>
	<LinearDoubleKeyFrame KeyTime="0:0:5" Value="100"/>
	<LinearDoubleKeyFrame KeyTime="0:0:8" Value="250"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
複製代碼

解釋： 其中最外面用 DoubleAnimationUsingKeyFrames 進行包裹，而後填入要動畫的對象與其屬性，還有動畫進行的總共時長。而後在其中寫入三個 LinearDoubleKeyFrame ，其中 KeyTime 就是關鍵點的時間，Value 就是這個關鍵點上對應的值。與 LinearDoubleKeyFrame 相併列的還有多個，如 DiscreteDoubleKeyFrame 等，下面會單獨講。

• 檢查一下效果，動圖以下：

  

多種 KeyFrame 的形式

1. LinearDoubleKeyFrame 這就是咱們剛纔使用到的。名字很直觀，就是線性的。那麼什麼是線形的？就是你設定完相應的 KeyFrame 後，中間空出來沒有詳細設定的部分，將會進行勻速運動。正如上面的動圖所展現的。
2. DiscreteDoubleKeyFrame 若是使用這個的話，那你的正方形便會在設定的時間，忽然變到設定的位置。中間空出爲設定的時間，你的物體是不會產生變化的。
3. SplineDoubleKeyFrame
4. EasingDoubleKeyFrame

上述的 三、4 兩種都是屬於變速的，而其中第四個能夠根據不一樣的函數進行變速，這裏暫時不細講啦。

DoubleAnimationUsingKeyFrames 的經常使用屬性

1. AutoReverse 默認爲 False ，若是設定爲 True 的話，那當你完成第一次動畫後，會自動幫你作一次反向的動畫，結束後便中止了。
2. RepeatBehavior 這裏面你能夠設置爲 Forever 或者設置次數，或者設置時間間隔。設置爲 Forever 的話，那這個動畫就會一直進行。若是你設置爲次數（int），那麼這個動畫就會執行相應的次數。若是你設置爲時間間隔（0:0:10 的格式），那麼將會在執行完相應的時間後中止。

本篇結語

前文除了 DoubleAnimation，還講到了其餘的動畫，不知你是否還記得。在這篇 KeyFrame 中前文提到的幾種動畫也都是能夠的，方法相似，所以再也不贅述。本篇的基本知識仍是很簡單的，不過也有不少值得深刻的地方，實現漂亮的動畫徹底是可能的！看大家的創造力啦！

好啦！咱們下篇見！