WPF如何仿制QQ2013登錄窗口的關閉效果

昨天，有位朋友問我，WPF能做出像QQ2013窗口在關閉時那個貌似透明過渡的動畫嗎？我就歪着臉跟他說："只有你想不到的，沒有WPF做不到的"。

他又接着說："我知道肯定會用到動畫來控制畫刷，但是那個透明的'淡出'怎么弄呢？"

我就給他演示了一個類似的效果。

大家有沒有注意到System.Windows.UIElement.OpacityMask這個屬性，它是一個Brush類型，也就是說，你可以使用任意Brush的類來充當。這個屬性只提取賦給它的Brush中的所有顏色的A值。即ARGB中的A值，其他通道將忽略，然后用這些不透明值來替目標可視化元素中的不透明值。具體大家可參考MSDN。

其實原理非常簡單，就以下兩個條件：一是把窗口變成透明，這個不介紹，大家可以看我后面貼的代碼。第二就是OpacityMask屬性用漸變畫刷，只有這樣才能做到漸變透明的效果。然后我們就對這個漸變畫刷中各顏色點的Offset進行動畫處理就可以了。

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

原理很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>

 

然后是少量的處理代碼。

    public partial class MainWindow : Window
    {
        System.Windows.Media.Animation.Storyboard std = null;
        public MainWindow()
        {
            InitializeComponent();
            std = (System.Windows.Media.Animation.Storyboard)layoutroot.Resources["std"];
            std.Completed += (t, r) => this.Close();
            this.layoutroot.Loaded += (sd, ee) => {
                // 設置Grid的圓形剪輯的圓心和半徑
                EllipseGeometry eg = (EllipseGeometry)this.layoutroot.Clip;
                double dx = layoutroot.ActualWidth /2d;
                double dy=layoutroot.ActualHeight/2d;
                eg.Center = new Point(dx, dy);
                eg.RadiusX = dx;
                eg.RadiusY = dy;
            };

        }


        private void OnClick(object sender, RoutedEventArgs e)
        {
            if (std != null)
            {
                std.Begin();
            }
        }
    }

OK，完事，88。