WPF页面动画效果切换

我先介绍我当时的目的，最开始的时候，我主要是想做一个窗口，这个窗口大概有三个界面，为提高逼格，突发奇想到这三个界面能不能动态切换，于是便有了这篇文章。

在WPF中，动画是通过故事板（Storyboard）创建的。定义动画的最好方法是使用Expression Blend这样的设计器。但我，对，就是我，只用了短短几行代码就实现了动画的切换效果。当然这效果是比较简单的淡入淡出。如果想做一个完美的动画，建议移步Expression Blend。因为前几个页面有写见不得人的东西，所以就不放出来了，就放一个动画效果吧。。。。

实现动画效果要用到一个非常重要的对象就是Storyboard。在Storyboard对象中包含一个非常重要的时间线（Timeline），时间线可让应用程序的任何元素中类型为Double，Point，或Color的属性产生动画。本动画效果就是基于这个理论的。

要实现页面逐渐消失或逐渐呈现，主要改变的是Opacity的属性，令Opacity由1.0-0.0或0.0-1.0逐渐改变就可以实现。基于这种思想，就可以很容易实现了。

我主要使用的是时间线控件——DoubleAnimation（因为Opacity的属性是Double），其他更多控件，详见https://docs.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/ms614242%28v%3dvs.95%29其中已经给出了详细用法，定义时间线可以用代码或XMAL来实现，因为我主张代码逻辑与界面应该能分开就分开，所以我用的是XAML，代码实现见上链接。

首先，创建一个wpf项目，然后往解决方案添加三个Page（页面）。好，这是第一步，准备好之后就可以实现动画了，每一个Page都可以做一个动画，本文就只拿一个Page做演示，打开Page的XAML如下：

往下添加如下代码

加上上面代码后界面变成这样，然后你自己拖个button进去，待会要用到

然后就到高潮了，动画的制作添加如下代码（x:Key="LastPageClose"是唯一标识，等会按键触发要用到，Storyboard.TargetName="page1"：设置对象，这里要把对象设为这个Page，就是这个page的名字 Storyboard.TargetProperty="Opacity"：要变化的属性 Duration="00:00:1.5" ：时间线，表示从0秒到1.5秒   From="1.0" To="0.0"：from....to...是变化范围，表示从1变到0.

接下来就是触发动画了

        private void button_Click(object sender, RoutedEventArgs e)
        {
           BeginStoryboard(Resources["LastPageClose"] as System.Windows.Media.Animation.Storyboard);//引用前面定义的资源（Resources），触发故事板
        }

 

接下来你就可以看到最开始的动画了。

如果你觉得有用，点个赞给个关注呗，不懂得可以问哦，嘤嘤