使用WPF动画实现登录面板的渐显渐隐效果

在将登录页面搭好后，我想试试能不能通过WPF强大的动画功能制作出登录面板的渐显渐隐效果，在上网查阅了相关资料后，我找到了一个能帮助我做出此效果的一个属性：UIElement.OpacityMask属性。

先来介绍一下UIElement.OpacityMask属性，它表示当前元素的不透明蒙版，该属性的值是Brush 类型，它能改变对象区域的不透明度的画笔，使元素的特定区域透明或部分透明，从而实现比较新颖的效果。值得一提的是，OpacityMask属性接受任何画刷，可利用LinearGradientBrush线性渐变画刷，通过对渐变画刷中各颜色点加以动画处理便能做出所需要的效果。

渐变浮现效果，实现步骤：(1)通过事件触发器触发Loaded(加载)事件实现，直接在页面中去定义即可。

(2)设置对象Border的OpacityMask属性：

<Border Grid.Row="1" Grid.Column="1" BorderThickness="5" CornerRadius="5" Name="CloseBorder" Opacity="0.9" Background="#f1f1f1">
<Border.OpacityMask>
                    <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
                        <GradientStop Color="#00000000" Offset="0"/>
                        <GradientStop Color="#00000000" Offset="1"/>
                        <GradientStop Color="#00000000" Offset="1"/>
                    LinearGradientBrush>
                Border.OpacityMask>
Border>

(3)设置控件触发器Triggers：

<Border.Triggers>
    <EventTrigger RoutedEvent="Loaded">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
            <DoubleAnimation From="1" To="0" Duration="0:0:1.5"             Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[1].Offset"/>
            <DoubleAnimation From="1" To="0" Duration="0:0:1" BeginTime="0:0:0.5"    Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Offset"/>
            <ColorAnimation To="#FF000000" Duration="0"     Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Color"/>
                Storyboard>
            BeginStoryboard>
        EventTrigger.Actions>
    EventTrigger>
Border.Triggers>

用户点击退出时，Border渐隐效果：(1)通过为退出Button绑定Click事件，再到后端使用C#代码去实现此效果;

(2)定义动画与画刷资源：

<Window.Resources>
      <Storyboard x:Key="ClosedStoryBoard" Storyboard.TargetName="CloseBorder">
      <DoubleAnimation From="1" To="0" Duration="0:0:2" Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[1].Offset"/>
      <DoubleAnimation From="1" To="0" Duration="0:0:1.5" BeginTime="0:0:0.5"
Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Offset"/>
      <ColorAnimation To="#00000000" Duration="0" Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Color"/>
Storyboard>
<LinearGradientBrush x:Key="CloseBrush" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="#FF000000" Offset="0">GradientStop>
            <GradientStop Color="#FF000000" Offset="1">GradientStop>
            <GradientStop Color="#FF000000" Offset="1">GradientStop>
LinearGradientBrush>
Window.Resources>

(3)后端通过绑定按钮的Click事件实现：

<Button Grid.Column="3" Content="退出" x:Name="btnClose" Margin="20,0" Click="btnClose_Click" Style="{StaticResource LoginBtn}" FontFamily="微软雅黑">

(4)C#后台事件代码：

 private void btnClose_Click(object sender, RoutedEventArgs e)
        {
            MessageBoxResult dr = MessageBox.Show("是否要退出系统?", "温馨提示",
            MessageBoxButton.OKCancel, MessageBoxImage.Question);
            //弹出确定对话框
            if (dr == MessageBoxResult.OK)
            {
                //执行动画并关闭窗口
                CloseBorder.OpacityMask = Resources["CloseBrush"] as LinearGradientBrush;
                Storyboard std = Resources["ClosedStoryBoard"] as Storyboard;
                std.Completed += delegate { Close(); };
                std.Begin();
            }
        }