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.LeftCanvas.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。其他支持的还有 PointAnimationColorAnimation。在上图的 DoubleAnimationStoryboard.TargetName 就是我们刚才建立的那个 Border 的名字。Storyboard.TargetProperty 就是我们要改变的属性,其中我加了一个括号是因为涉及到 .Left 这种的需要将属性用括号包裹起来,不然会有错误。FromTo 就是分别表示从一个值到另一个值,像这个例子中,我们的 Border 本身就位于 x 轴 50 的这个位置,那么我们可以将这个 From 省去。最后的 Duration 表示着整个动画完成的时间。其中用分号隔开的三个数分别表示小时、分钟、秒。这三个数都是 double 类型的。

  • 然后,我们建立一个按钮,用于点击开始我们的动画。这里代码就不赘述了。

  • 然后,我们来到上面一步按钮定义的事件处,写以下代码:

    Translation.Begin();
    
  • 最后的效果如下:

尝试多个动画同时作用

  • 如果我们不仅仅想要它水平平移,而同时想要它垂直方向也平移。其实很简单,在刚才的 Storyboard 中再添加一个 DoubleAnimation 即可。如下:

  • 运行一下,效果如下:

尝试改变透明度

  • 如果我们想改变 BorderOpacity 呢?其实也很简单,我们新建一个 Storyboard,并在里面添加一个 DoubleAnimation。如下图:

  • 然后新建一个按钮来触发事件。

  • 然后在按钮事件处写下

    ChangeOpacity.Begin();
    
  • 效果如下:

尝试改变颜色

  • 这时候,如果我们想要改变它的背景颜色,也很简单。这时候我们就需要用上 ColorAnimation,代码如下:

    解释:这里面的 Storyboard.TargetProperty 内不能直接写 Background 了。理由很简单其实,之前说属性的类型是什么,就用什么动画。比如要改变 double 的,就用 DoubleAnimation。然而这里我们用的是 ColorAnimationBackground 的值的类型实际为 Brush,而非 Color。因此,我们通过我写的这一串,定位到了类型为 Color 的值。

  • 接下来的操作和之前的十分相似,就不多讲了

  • 效果如下:

结语

本篇的篇幅可能稍微有些长,但是内容并不是很难理解的。我相信也有很多朋友想要了解动画的实现了。今天我们简单介绍了 Storyboard Animation 中的几种应用。希望大家喜欢!

好啦!

下次见!


© TotoroQ 2018. All rights reserved.

Powered by Hydejack v8.0.0