WPF淡出淡入动画效果

这个效果运用OpacityMask属性，用于改变对象区域的不透明度的画笔。可以使元素的特定区域透明或部分透明，从而实现比较新颖的效果。

   通过事件触发器触发Loaded事件实现，所以可以仅用前端XAML语言实现。

代码：

渐变淡出的动画和画刷资源

<Window.Resources>

        <!--淡出淡入动画-->

        <Storyboard x:Key="ClosedStoryboard" Storyboard.TargetName="mainPanel">

            <DoubleAnimation From="1" To="0" Duration="0:0:1" Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[1].Offset"/>

            <DoubleAnimation From="1" To="0" Duration="0:0:0.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="ClosedBrush" StartPoint="0.5,0" EndPoint="0.5,1">

            <GradientStop Color="#FF000000" Offset="0"/>

            <GradientStop Color="#FF000000" Offset="1"/>

            <GradientStop Color="#FF000000" Offset="1"/>

        </LinearGradientBrush>

</Window.Resources>

 

设置对象的OpacityMask属性 

<Grid x:Name="mainPanel" >

        <Grid.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>

        </Grid.OpacityMask>

在设置对象的事件触发器

        <Grid.Triggers>

            <EventTrigger RoutedEvent="Loaded">

                <EventTrigger.Actions>

                    <BeginStoryboard>

                        <Storyboard>

                            <DoubleAnimation From="1" To="0" Duration="0:0:1" Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[1].Offset"/>

                            <DoubleAnimation From="1" To="0" Duration="0:0:0.5" 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>

        </Grid.Triggers>

    </Grid>

通过绑定按钮的Click事件实现（Click="btn_Cancel_Click"）

<Button   Name="btn_Cancel" Content="退出"  Height="33"  Width="76"  FontSize="19"                   Foreground="Black"  Background="SkyBlue"  HorizontalAlignment="Left" VerticalAlignment="Top" 

Cursor="Hand" FontFamily="Vivaldi" Margin="188,243,0,0"   Click="btn_Cancel_Click">

</Button>

后台代码

        private void btn_Cancel_Click(object sender, RoutedEventArgs e)

        {

            MessageBoxResult dt = MessageBox.Show("是否退出界面？", "系统提示", MessageBoxButton.YesNo,

                MessageBoxImage.Question);

            if (dt == MessageBoxResult.Yes)

            {

                this.IsEnabled = false;

                mainPanel.OpacityMask = this.Resources["ClosedBrush"] as LinearGradientBrush;

                Storyboard std = this.Resources["ClosedStoryboard"] as Storyboard;

                std.Completed += delegate { this.Close(); };

                std.Begin();

            }

效果图：