在WPF中仿制QQ2013登录窗口的关闭效果

昨天，有位朋友问我，WPF能做出像QQ2013窗口在关闭时那个貌似透明过渡的动画吗？我就歪着脸跟他说："只有你想不到的，没有WPF做不到的"。

他又接着说："我知道肯定会用到动画来控制画刷，但是那个透明的'淡出'怎么弄呢？"

我就给他演示了一个类似的效果。

大家有没有注意到System.Windows.UIElement.OpacityMask这个属性，它是一个Brush类型，也就是说，你可以使用任意Brush的类来充当。这个属性只提取赋给它的Brush中的所有颜色的A值。即ARGB中的A值，其他通道将忽略，然后用这些不透明值来替目标可视化元素中的不透明值。具体大家可参考MSDN。

其实原理非常简单，就以下两个条件：一是把窗口变成透明，这个不介绍，大家可以看我后面贴的代码。第二就是OpacityMask属性用渐变画刷，只有这样才能做到渐变透明的效果。然后我们就对这个渐变画刷中各颜色点的Offset进行动画处理就可以了。

先看看最终效果，看看像不像，呵呵。

查看本栏目更多精彩内容：http://www.bianceng.cnhttp://www.bianceng.cn/Programming/net/

原理很easy，我就放XAML了。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="300"
        AllowsTransparency="True" Background="Transparent" WindowStyle="None"
        WindowStartupLocation="CenterScreen">
    <Grid x:Name="layoutroot">
        <Grid.OpacityMask>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF000000" Offset="0" />
                <GradientStop Color="#FF000000" Offset="1" />
                <GradientStop Color="#FF000000" Offset="1" />
            </LinearGradientBrush>
        </Grid.OpacityMask>
        <Grid.Clip>
            <EllipseGeometry Center="150 150" RadiusX="150" RadiusY="150" />
        </Grid.Clip>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF4141A6" Offset="0.003" />
                <GradientStop Color="#FF5E5ED4" Offset="1" />
                <GradientStop Color="#FFDCDCFD" Offset="0.38" />
                <GradientStop Color="#FF161674" Offset="0.84" />
            </LinearGradientBrush>
        </Grid.Background>
        <Button Content="关闭" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="20" Background="#FFF70D0D" Foreground="White" BorderBrush="#FFD8A00A" FontSize="28" Click="OnClick">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Ellipse x:Name="bg" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2"  />
                        <Ellipse x:Name="fr" Opacity="0" >
                            <Ellipse.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#CCFFFFFF" Offset="0" />
                                    <GradientStop Offset="1" />
                                    <GradientStop Color="#7FFFFFFF" Offset="0.392" />
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <ContentPresenter x:Name="ContentPresenter" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="UIElement.IsMouseOver" Value="True" >
                            <Setter TargetName="fr" Property="Opacity" Value="1" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>
        <Grid.Resources>
            <Storyboard x:Key="std">
                <DoubleAnimation From="1" To="0" Duration="0:0:6"
                                 Storyboard.TargetName="layoutroot"
                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].Offset" />
                <DoubleAnimation Duration="0:0:4.5" BeginTime="0:0:1.5" From="1" To="0"
                                 Storyboard.TargetName="layoutroot"
                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[2].Offset" />
                <ColorAnimation Duration="0" To="#00000000" Storyboard.TargetName="layoutroot"
                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[2].Color" />
            </Storyboard>
        </Grid.Resources>
    </Grid>
</Window>

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索动画
， 透明
， 属性
， 窗口
， 效果
， WPF 背景透明
Brush
wpf qq聊天窗口、wpf qq聊天窗口样式、wpf窗口动画效果、wpf 窗口打开效果、qq窗口毛玻璃效果，以便于您获取更多的相关知识。