WPF自学—模仿QQ窗体载入和关闭动画
2014-11-29 11:28
621 查看
这两天把《WPF编程宝典》这本书的动画相关章节看完了,于是想写个小程序练练手,但是不知道写什么好。看书的时候虽然也把上面的案例照着敲了一遍,但是它们毕竟和实际应用有很大差别,想用到日常项目里也不知道从何下手。
刚好看到了一位网友 youngytj 分享的模仿QQ载入和关闭动画的文章,我就跟着学习模仿了一遍,下面来讲讲具体如何实现的。
首先分析下我想实现的效果:第一,我打开程序后它从上到下滚动逐渐显示出来。第二,我点击窗口的关闭按钮后,窗体由下而上滚动逐渐消失。
为了实现这种效果我们要把窗体的WindowStyle设为None,因为用默认窗体风格的话,动画是运行在一个带有边框的框架里面的,远不是我们想要的效果,如下图:
![](http://img.my.csdn.net/uploads/201411/29/1417266878_3632.gif)
从上面还可以看到窗体动画运行的时候,未填充的部分显示黑色,这是因为窗体的AllowsTransparency属性为false的缘故。我们把AllowsTransparency设为true以后,窗体的工作区支持透明了,就不会有黑色出现了。
接下来我们要给窗体设置一个背景,这样运行才能看到效果,我设的背景是一个渐变画刷,上面是浅蓝色,下面是白色,代码如下:
建议:为了规范点,我创建了一个资源字典MainResourceDictionary:本示例的所有样式是放在这里面的。
背景添加完以后我们需要给窗体添加一个透明掩码和展开、合并的动画,这也是本示例的关键部分。动画改变的就是这个透明掩码的偏移值和偏移的颜色。透明掩码如下:
这个透明掩码也是一个渐变画刷组成的,它实现的是从上到下的垂直渐变。我自己测试之后发现,这个渐变画刷最关键的部分是指定第一个颜色为透明色,至于后面一种颜色设置成什么都无所谓,不知道为什么会这样。(因为是新手,我现在还只是“知其然”的阶段,如果哪位大神知道原因还请不吝赐教。)
动画的代码如下:
动画添加完以后我们需要在事件触发器里调用它们,具体是哪两个事件呢?
我一开始想的是在Window.Loaded调用展开动画,在Button.Click事件里调用关闭动画,但是在展开的时候有一个问题。那就是Window.Loaded事件是加载完以后才执行的,这时候才调用动画给人的感觉就是窗体先弹出来,然后再回头由上而下逐渐滚动显示出来,这就有点凌乱了。
所以还是按照youngytj的方法,在窗体的构造函数里调用,这样就实现了从无到有逐渐显示的效果,代码如下:
关闭动画我们还是在Xaml里调用,代码如下:
现在基本上就实现了我们要的效果了,如下图:
![](http://img.my.csdn.net/uploads/201411/29/1417266922_2929.gif)
以上就是全部的实现了,整体来说也没有什么难点。但我觉得对于我们新手来说最大的问题不是如何实现出这样的动画,而是大脑当中如何设计出这样的动画。比如我是看了youngytj 的文章才知道这个动画的原理,如果凭空让我设计其他动画的话我还是不知道如何下手,这是最头疼的,还是继续努力学习吧,争取早点脱离这种“只知其然而不知其所以然”的阶段。
源码已经上传,感兴趣的朋友可以去下载:
http://download.csdn.net/detail/u011014032/8207279
刚好看到了一位网友 youngytj 分享的模仿QQ载入和关闭动画的文章,我就跟着学习模仿了一遍,下面来讲讲具体如何实现的。
首先分析下我想实现的效果:第一,我打开程序后它从上到下滚动逐渐显示出来。第二,我点击窗口的关闭按钮后,窗体由下而上滚动逐渐消失。
为了实现这种效果我们要把窗体的WindowStyle设为None,因为用默认窗体风格的话,动画是运行在一个带有边框的框架里面的,远不是我们想要的效果,如下图:
![](http://img.my.csdn.net/uploads/201411/29/1417266878_3632.gif)
从上面还可以看到窗体动画运行的时候,未填充的部分显示黑色,这是因为窗体的AllowsTransparency属性为false的缘故。我们把AllowsTransparency设为true以后,窗体的工作区支持透明了,就不会有黑色出现了。
接下来我们要给窗体设置一个背景,这样运行才能看到效果,我设的背景是一个渐变画刷,上面是浅蓝色,下面是白色,代码如下:
<Style TargetType="Window" x:Key="MyWindowStyle"> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#428AC7" Offset="0"/> <GradientStop Color="White" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> </Style>
建议:为了规范点,我创建了一个资源字典MainResourceDictionary:本示例的所有样式是放在这里面的。
背景添加完以后我们需要给窗体添加一个透明掩码和展开、合并的动画,这也是本示例的关键部分。动画改变的就是这个透明掩码的偏移值和偏移的颜色。透明掩码如下:
<Window.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="Transparent"></GradientStop> <GradientStop Offset="0" Color="Yellow"></GradientS 4000 top> </LinearGradientBrush> </Window.OpacityMask>
这个透明掩码也是一个渐变画刷组成的,它实现的是从上到下的垂直渐变。我自己测试之后发现,这个渐变画刷最关键的部分是指定第一个颜色为透明色,至于后面一种颜色设置成什么都无所谓,不知道为什么会这样。(因为是新手,我现在还只是“知其然”的阶段,如果哪位大神知道原因还请不吝赐教。)
动画的代码如下:
<Window.Resources> <Storyboard x:Key="zhankai"> <DoubleAnimation From="0" To="1" Duration="0:0:0.5" Storyboard.TargetName="MyWindow" Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].Offset"/> <DoubleAnimation From="0" To="1" BeginTime="0:0:0.1" Duration="0:0:0.4" Storyboard.TargetName="MyWindow" Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].Offset"/> <ColorAnimation BeginTime="0:0:0.5" Duration="0:0:0" From="Transparent" To="Yellow" Storyboard.TargetName="MyWindow" Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].Color"/> </Storyboard> <Storyboard x:Key="hebing" Completed="Storyboard_Completed"> <DoubleAnimation From="1" To="0" Duration="0:0:0.4" Storyboard.TargetName="MyWindow" Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].Offset"/> <DoubleAnimation Duration="0:0:.3" BeginTime="0:0:0.1" From="1" To="0" Storyboard.TargetName="MyWindow" Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].Offset"/> <ColorAnimation Duration="0" From="Yellow" To="Transparent" Storyboard.TargetName="MyWindow" Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].Color"/> </Storyboard> </Window.Resources>
动画添加完以后我们需要在事件触发器里调用它们,具体是哪两个事件呢?
我一开始想的是在Window.Loaded调用展开动画,在Button.Click事件里调用关闭动画,但是在展开的时候有一个问题。那就是Window.Loaded事件是加载完以后才执行的,这时候才调用动画给人的感觉就是窗体先弹出来,然后再回头由上而下逐渐滚动显示出来,这就有点凌乱了。
所以还是按照youngytj的方法,在窗体的构造函数里调用,这样就实现了从无到有逐渐显示的效果,代码如下:
Storyboard storyBoard =(System.Windows.Media.Animation.Storyboard)MyWindow.Resources["zhankai"]; if (storyBoard != null) { storyBoard.Begin(); }
关闭动画我们还是在Xaml里调用,代码如下:
<Window.Triggers> <EventTrigger RoutedEvent="Button.Click"> <BeginStoryboard Storyboard="{StaticResource hebing}"></BeginStoryboard> </EventTrigger> </Window.Triggers>
现在基本上就实现了我们要的效果了,如下图:
![](http://img.my.csdn.net/uploads/201411/29/1417266922_2929.gif)
以上就是全部的实现了,整体来说也没有什么难点。但我觉得对于我们新手来说最大的问题不是如何实现出这样的动画,而是大脑当中如何设计出这样的动画。比如我是看了youngytj 的文章才知道这个动画的原理,如果凭空让我设计其他动画的话我还是不知道如何下手,这是最头疼的,还是继续努力学习吧,争取早点脱离这种“只知其然而不知其所以然”的阶段。
源码已经上传,感兴趣的朋友可以去下载:
http://download.csdn.net/detail/u011014032/8207279
相关文章推荐
- WPF窗体动画显示和关闭
- .net (vb) wpf 模仿QQ 吸附窗体
- android窗体动画:activity启动从底部向上滑动出现,关闭的时候从顶部向下滑动消失的动画实现
- WPF异步载入图片,附带载入中动画
- WPF关闭当前程序(全部窗体并退出程序)
- android窗体动画:activity启动从底部向上滑动出现,关闭的时候从顶部向下滑动消失,并解决activity跳转的时候出现短暂的黑屏
- 贴边隐藏、图形窗体等效果的实现:一个模仿QQ界面的MSN界面
- MvvmCross for WPF 支持子窗体显示、关闭、传参
- 使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
- WPF动画: 窗体上下方向同时拉伸
- WPF 制作子窗体的弹出动画效果
- WPF 作出窗体旋转动画
- WinForm程序或WPF程序只能打开一个子窗体 解决窗口关闭不能再打开的BUG
- 模仿qq屏幕四周隐藏窗体
- android窗体动画:activity启动从底部向上滑动出现,关闭的时候从顶部向下滑动消失的动画实现
- 【转】以动画形式显示窗体,以及关闭窗体的效果
- wpf利用线程制作初始界面和关闭窗体特效
- 【WPF】关闭非装窗体以外所有窗体
- android窗体动画:activity启动从底部向上滑动出现,关闭的时候从顶部向下滑动消失的动画实现
- iOS 模仿QQ侧滑菜单和UITabBar拖动动画