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 中的几种应用。但愿你们喜欢！

好啦！

下次见！