[新手向][WPF]简单利用Blend辅助设计WPF动画

[开发环境为Blend for Visual Studio 2019,Windows10 22H2,WPF by .NET Framework 4.7.2]

如果使用Visual Studio硬写动画的话，那么你的XAML技术应该十分强大。本期内容是我个人的经验分享，目的是让更多WPF新手能够快速上手WPF的Storyboard效果，所以大佬请绕道。

 

图1是我搭建好的一个界面，大概就是两个容器，左边的命名为leftView，右边的主视图命名为homeView；图2是我们要实现的动画：让leftView在鼠标进入时展开，鼠标离开时收回，并且动画整体衔接流畅。

Blend设计动画

1.点击"对象和时间线"下方的加号，输入自己的动画名创建Storyboard动画资源。我这里将其命名为leftView_show。

2.创建完成之后，你的编辑器视图四周会有一条红线，这代表已经开始动画编辑模式。此时你更改任何属性值都会被记录为关键帧，如果想取消记录，那么点击视图上方的红色按钮即可取消录制。

3.这里我选中了leftView，然后在开头处打了一帧关键帧

4.接着我将时间轴移到了0.3秒处，然后将leftView的width设置为了200

 

此时我们会发现右边的homeView会和leftView重叠。我们可以用相同的方法为homeView也打上关键帧，或者直接换用StackPanel进行布局，我这里选择第一种方法。

5.这是完成后的动画效果

我们也可以点击指定关键帧然后更改动画过渡的效果。

6.做好展开动画后，我们可以相应的把收回动画做出来。

我们可以通过右键动画，选择"重复"→"反转"→"重命名"来快速制作相反的动画效果。

触发器调用动画(vs新版已弃用)

7.都做完之后，我们可以在左上角的“触发器”中来设置播放动画的事件。

（注：新版Visual Studio的触发器好像已经被砍了，可以用C#来控制动画，下文会讲到）

这是动画效果，这时候问题就出来了：这个动画看起来不是连续的，就是没有打断效果。这是因为我们在每个动画的首帧都打了一个关键帧，每次播放这个动画时控件的属性会先同步首帧关键帧，而我们展开动画还没播放完就开始播放收回动画了，这就导致属性的突变使动画看起来不衔接。

8.我们可以删除每个动画的首帧来实现打断的效果

现在再来看看是不是就没问题了

C#调用动画

9.首先在开头引用这个命名空间：

using System.Windows.Media.Animation;

10.然后在事件里面写以下代码：

var an = (Storyboard)FindResource("你的动画名"); //大概来说就是找到动画
an.Begin(); //播放动画
Lobster AI

这样动画也就能够正常播放了。