WPF如何仿制QQ2013登录窗口的关闭效果

转载 2013年12月02日 18:03:04

http://www.cnblogs.com/tcjiaan/p/3450797.html

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

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

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

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

原理很easy,我就放XAML了。

复制代码
 1 <Window x:Class="WpfApplication1.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="MainWindow" Height="300" Width="300"
 5         AllowsTransparency="True" Background="Transparent" WindowStyle="None"
 6         WindowStartupLocation="CenterScreen">
 7     <Grid x:Name="layoutroot">
 8         <Grid.OpacityMask>
 9             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
10                 <GradientStop Color="#FF000000" Offset="0"/>
11                 <GradientStop Color="#FF000000" Offset="1"/>
12                 <GradientStop Color="#FF000000" Offset="1"/>
13             </LinearGradientBrush>
14         </Grid.OpacityMask>
15         <Grid.Clip>
16             <EllipseGeometry Center="150 150" RadiusX="150" RadiusY="150"/>
17         </Grid.Clip>
18         <Grid.Background>
19             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
20                 <GradientStop Color="#FF4141A6" Offset="0.003"/>
21                 <GradientStop Color="#FF5E5ED4" Offset="1"/>
22                 <GradientStop Color="#FFDCDCFD" Offset="0.38"/>
23                 <GradientStop Color="#FF161674" Offset="0.84"/>
24             </LinearGradientBrush>
25         </Grid.Background>
26         <Button Content="关闭" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="20" Background="#FFF70D0D" Foreground="White" BorderBrush="#FFD8A00A" FontSize="28" Click="OnClick">
27             <Button.Template>
28                 <ControlTemplate TargetType="{x:Type Button}">
29                     <Grid>
30                         <Ellipse x:Name="bg" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" />
31                         <Ellipse x:Name="fr" Opacity="0" >
32                             <Ellipse.Fill>
33                                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
34                                     <GradientStop Color="#CCFFFFFF" Offset="0"/>
35                                     <GradientStop Offset="1"/>
36                                     <GradientStop Color="#7FFFFFFF" Offset="0.392"/>
37                                 </LinearGradientBrush>
38                             </Ellipse.Fill>
39                         </Ellipse>
40                         <ContentPresenter x:Name="ContentPresenter" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
41                     </Grid>
42                     <ControlTemplate.Triggers>
43                         <Trigger Property="UIElement.IsMouseOver" Value="True" >
44                             <Setter TargetName="fr" Property="Opacity" Value="1"/>
45                         </Trigger>
46                     </ControlTemplate.Triggers>
47                 </ControlTemplate>
48             </Button.Template>
49         </Button>
50         <Grid.Resources>
51             <Storyboard x:Key="std">
52                 <DoubleAnimation From="1" To="0" Duration="0:0:6"
53                                  Storyboard.TargetName="layoutroot"
54                                  Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].Offset"/>
55                 <DoubleAnimation Duration="0:0:4.5" BeginTime="0:0:1.5" From="1" To="0"
56                                  Storyboard.TargetName="layoutroot"
57                                  Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[2].Offset"/>
58                 <ColorAnimation Duration="0" To="#00000000" Storyboard.TargetName="layoutroot"
59                                  Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[2].Color"/>
60             </Storyboard>
61         </Grid.Resources>
62     </Grid>
63 </Window>
复制代码

 

然后是少量的处理代码。

复制代码
 1     public partial class MainWindow : Window
 2     {
 3         System.Windows.Media.Animation.Storyboard std = null;
 4         public MainWindow()
 5         {
 6             InitializeComponent();
 7             std = (System.Windows.Media.Animation.Storyboard)layoutroot.Resources["std"];
 8             std.Completed += (t, r) => this.Close();
 9             this.layoutroot.Loaded += (sd, ee) => {
10                 // 设置Grid的圆形剪辑的圆心和半径
11                 EllipseGeometry eg = (EllipseGeometry)this.layoutroot.Clip;
12                 double dx = layoutroot.ActualWidth /2d;
13                 double dy=layoutroot.ActualHeight/2d;
14                 eg.Center = new Point(dx, dy);
15                 eg.RadiusX = dx;
16                 eg.RadiusY = dy;
17             };
18 
19         }
20 
21 
22         private void OnClick(object sender, RoutedEventArgs e)
23         {
24             if (std != null)
25             {
26                 std.Begin();
27             }
28         }
29     }
复制代码

OK,完事,88。

相关文章推荐

WPF仿QQ聊天窗口

  • 2012年08月10日 17:58
  • 177KB
  • 下载

.net WPF实现MDI窗口效果示例

  • 2012年01月13日 11:33
  • 29KB
  • 下载

WPF窗口控件动态模糊效果

不知道各位在设计程序UI时是否碰到过动态渐变动画实现的困扰,本文将讲解如何通过WPF内置的blureffect效果和Animation动画实现动态高斯模糊效果。 最终效果: 通过Animati...
  • lpc1290
  • lpc1290
  • 2017年02月12日 11:17
  • 403

WPF仿QQ聊天窗口

  • 2013年03月19日 18:03
  • 2.88MB
  • 下载

MFC仿QQ窗口靠边自动收缩隐藏效果(附源代码)

/*在原创的基础上做了*/ 一、【观察】 模仿前最重要的一步就是观察,经过半天对QQ的摆弄和摸索,总结出了以下一些特点: 1、窗口开始粘附时,检测的是鼠标坐标与桌面边界的距离,特别地,粘附在下...

QQ2013窗口透明度设置

  • 2013年01月28日 09:18
  • 94KB
  • 下载

使用swiper插件实现qq聊天窗口按钮滑动效果

1、下载好swiper插件所需的js和CSS文件; 2、在页面引用CSS和js文件; 3、DOM结构...

小窗口界面类QQ效果

  • 2011年06月17日 11:47
  • 651KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WPF如何仿制QQ2013登录窗口的关闭效果
举报原因:
原因补充:

(最多只允许输入30个字)