To clone the closing effect of the QQ2013 login window in WPF

Yesterday, a friend asked me if WPF could make an animation that looks like a transparent transition when the QQ2013 window closes. I said to him with a crooked face: "There is nothing WPF can do that you can't imagine."

He went on to say: "I know I will use animation to control the brush, but the transparent ' fade out ' How to do it?" "

I showed him a similar effect.

Have you noticed System.Windows.UIElement.OpacityMask this attribute, it is a brush type, that is, you can use any brush class to act as. This property only extracts a value for all colors in the brush assigned to it. That is, the value of a in ARGB, the other channels are ignored, and these opacity values are used to visualize the opaque values in the element for the target. Please refer to MSDN for specific reference.

In fact, the principle is very simple, on the following two conditions: first, the window into a transparent, this does not introduce, you can see the code behind me. The second is the OpacityMask property with a gradient brush, only in this way to achieve the effect of gradual transparency. Then we can animate the offset of each color point in the gradient brush.

First look at the final effect, look like, hehe.

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/Programming/net/

The principle is easy, I put the 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=" 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"/> <gradientst Op color= "#FF000000" offset= "1"/> <gradientstop color= "#FF000000" offset= "1"/> < /lineargradientbrush> </Grid.OpacityMask> <Grid.Clip> <ellipsegeometry cente R= "radiusx=" "radiusy="/> </Grid.Clip> <Grid.Background> <l Ineargradientbrush 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> & lt;/grid.background> <button content= "off" horizontalalignment= "center" verticalalignment= "Center" Padding= "2 0 "background=" #FFF70D0D "foreground=" white "borderbrush=" #FFD8A00A "fontsize=" click= "OnClick" > <but ton.
                        Template> <controltemplate targettype= "{x:type Button}" > <Grid> <ellipse x:name= "bg" fill= "{templatebinding Background}" stroke= "{TemplateBinding BorderBrush}" Stroke thickness= "2"/> <ellipse x:name= "fr" opacity= "0" > <elli Pse.
       Fill>                         <lineargradientbrush endpoint= "0.5,1" startpoint= "0.5,0" > <gradientstop color= "#CCFFFFFF" offset= "0"/> <gradientstop offset= "1"/&G
                                    T
                            <gradientstop color= "#7FFFFFFF" offset= "0.392"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> &LT;CONTENTP Resenter x:name= "ContentPresenter" margin= "{templatebinding Padding}" horizontalalignment= "{TemplateBinding Horizontalcontentalignment} "verticalalignment=" {templatebinding verticalcontentalignment} "/> < /grid> <ControlTemplate.Triggers> <trigger property= "uielement.ism
   Ouseover "value=" True "> <setter targetname=" fr "property=" Opacity "value=" 1 "/>                     </Trigger> </ControlTemplate.Triggers> </controlte mplate> </Button.Template> </Button> <Grid.Resources> <sto
                                 Ryboard 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>