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 中的几种应用。希望大家喜欢！

好啦！

下次见！