WPF案例 (三) 模拟QQ“快速换装"界面

原文:WPF案例 (三) 模拟QQ“快速换装"界面

   这个小程序使用Wpf模拟QQ快速换装页面的动画特效,通过使用组合快捷键Ctrl+Left或Ctrl+Right,可实现Image平滑的向左或者向右滑动,页面如下,有兴趣的朋友可以下载源码

    

   在构建这个示例的3D场景时,使用了ModelVisual3D和Model3DGroup元素,ModelVisual3D是一个3D容器类,用来包含3D元素,在这里使用Model3DGroup打包了3个GeometryModel3D,每个GeometryModel3D的Materia各填充了一幅Image,将设置为的,使用RotateTransform3D和TranslateTransform3D对Model3DGroup集合中的每个GeometryModel3D应用模型变换,最终出现图示的效果

3D场景

 1         <Viewport3D x:Name="viewPort3D" RenderOptions.EdgeMode="Aliased" ClipToBounds="False">
 2             <Viewport3D.Camera>
 3                 <PerspectiveCamera Position="0,0,8"  />
 4             </Viewport3D.Camera>
 5             <ModelVisual3D>
 6                 <ModelVisual3D.Content>
 7                     <AmbientLight Color="White"/>
 8                 </ModelVisual3D.Content>
 9             </ModelVisual3D>
10             <ModelVisual3D >
11                 <ModelVisual3D.Content>
12                     <Model3DGroup x:Name="model3DGroup">
13                         <Model3DGroup.Children>
14                             <GeometryModel3D x:Name="center" Geometry="{StaticResource Geometry}" >
15                                 <GeometryModel3D.Transform>
16                                     <Transform3DGroup>
17                                         <RotateTransform3D>
18                                             <RotateTransform3D.Rotation>
19                                                 <AxisAngleRotation3D Axis="0,1,0" Angle="0"/>
20                                             </RotateTransform3D.Rotation>
21                                         </RotateTransform3D>
22                                         <TranslateTransform3D OffsetX="0" OffsetY="0" OffsetZ="0.5" />
23                                     </Transform3DGroup>
24                                 </GeometryModel3D.Transform>
25                                 <GeometryModel3D.Material>
26                                     <DiffuseMaterial>
27                                         <DiffuseMaterial.Brush>
28                                             <ImageBrush ImageSource="Images\051123Webshots05.jpg"/>
30                                         </DiffuseMaterial.Brush>
31                                     </DiffuseMaterial>
32                                 </GeometryModel3D.Material>
33                             </GeometryModel3D>
34                             <GeometryModel3D x:Name="right" Geometry="{StaticResource Geometry}"  >
35                                 <GeometryModel3D.Transform>
36                                     <Transform3DGroup>
37                                         <RotateTransform3D>
38                                             <RotateTransform3D.Rotation>
39                                                 <AxisAngleRotation3D Axis="0,1,0" Angle="-45"/>
40                                             </RotateTransform3D.Rotation>
41                                         </RotateTransform3D>
42                                         <TranslateTransform3D OffsetX="1.8" OffsetY="0" OffsetZ="-2.5" />
43                                     </Transform3DGroup>
44                                 </GeometryModel3D.Transform>
45                                 <GeometryModel3D.Material>
46                                     <DiffuseMaterial>
47                                         <DiffuseMaterial.Brush>
48                                             <ImageBrush ImageSource="Images\051027nature02.jpg"/>
49                                         </DiffuseMaterial.Brush>
50                                     </DiffuseMaterial>
51                                 </GeometryModel3D.Material>
52                             </GeometryModel3D>
53                             <GeometryModel3D x:Name="left" Geometry="{StaticResource Geometry}" >
54                                 <GeometryModel3D.Transform>
55                                     <Transform3DGroup>
56                                         <RotateTransform3D>
57                                             <RotateTransform3D.Rotation>
58                                                 <AxisAngleRotation3D Axis="0,1,0" Angle="45"/>
59                                             </RotateTransform3D.Rotation>
60                                         </RotateTransform3D>
61                                         <TranslateTransform3D OffsetX="-1.8" OffsetY="0" OffsetZ="-2.5" />
62                                     </Transform3DGroup>
63                                 </GeometryModel3D.Transform>
64                                 <GeometryModel3D.Material>
65                                     <DiffuseMaterial>
66                                         <DiffuseMaterial.Brush>
67                                            <ImageBrush ImageSource="Images\051027nature01.jpg"/>
68                                         </DiffuseMaterial.Brush>
69                                     </DiffuseMaterial>
70                                 </GeometryModel3D.Material>
71                             </GeometryModel3D>
72                         </Model3DGroup.Children>
73                     </Model3DGroup>
74                 </ModelVisual3D.Content>
75             </ModelVisual3D>
76         </Viewport3D>

    对3D场景使用动画其实就是对3D场景中的基本基元的依赖项属性使用动画,这些依赖项属性中最常用的就是跟3D模型变换相关的三个元素TranslateTransform3D、 和 最后定义快捷键,按下组合键Ctrl+Left或者Ctrl+Right,界面中的Image将平滑的向左或者向右切换

定义快捷键

private void Window_KeyDown(object sender, KeyEventArgs e)
  {
     if (e.KeyStates == Keyboard.GetKeyStates(Key.Left) && Keyboard.Modifiers == ModifierKeys.Control)
         {
           //向左滑动图片
            this.MoveCurrentToPrevious();
         }
     else if (e.KeyStates == Keyboard.GetKeyStates(Key.Right) && Keyboard.Modifiers == ModifierKeys.Control)
        {
           //向右滑动图片
            this.MoveCurrentToNext();
        }
 }

时间: 2024-10-31 12:23:12

WPF案例 (三) 模拟QQ“快速换装"界面的相关文章

WPF案例(三) 模拟QQ“快速换装"界面

这个小程序使用Wpf模拟QQ快速换装页面的动画特效,通过使用组合快捷键Ctrl+Left或Ctrl+Right,可实现Image平滑的向左或者向右 滑动,页面如下,有兴趣的朋友可以下载源码:http://files.cnblogs.com/5460600/Switch.rar 在构建这个示例的3D场景时,使用了ModelVisual3D和Model3DGroup元素,ModelVisual3D是一个3D容器类,用来包含 3D元素,在这里 使用Model3DGroup打包了3个GeometryMo

js实现仿QQ秀换装效果的方法_javascript技巧

本文实例讲述了js实现仿QQ秀换装效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3.org/1999/xhtml"> <he

WPF案例(二) 模拟Apple OS界面前后180度反转

我们在设计应用程序界面的时候,为了充分利用界面空间,住住需要灵活的界面布局方式, 比如可以在界面正面空间上定义一个Chart,背面空间上定义一个GridView,通过在Chart上鼠标 双击,控件180度旋转后向用户显示出界面背面的GridView,通过在GridView上双击鼠标,控件 再一次平滑的180度旋转向用户显示正面的Chart 这个例子就是使用Wpf模拟Apple OS 实现一个包含正反面元素的控件以Y轴为坐标前后180翻 转的动画效果,在这里为方便示例,在正反面各以一个Image来

WPF案例(一) 模拟Windows7 Win+Tab切换

一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序,使用快捷键Ctrl+Down或Ctrl+Up在 示例程序各个页面元素之间滑动导航,在本例中,使用 Viewport2DVisual3D宿主二维控件,在 这里为方便示例,二维控件仅简单的使用了一个Image,以下是界面缩略图,有兴趣的朋友可以 下载源码:http://files.cnblogs.com/5460600/Aero.rar 在建立本示例中的三维场景时,使用了 Viewport3D,PerspectiveCamera,A

WPF案例(四) 模拟Windows7桌面任务栏

这个程序模彷了Windows7的桌面任务栏,当在桌面上双击某个快捷方式时,将打开一个新的子界面,并且在任务栏里创建一个链接到此 界面的任务栏图标,将鼠标移动到任务栏上的图标时,将Popup出界面的实时图像缩略图,单击任务栏图标时,可让界面最大化或最小化, 界面如下所示,源码从这里(http://files.cnblogs.com/5460600/StatusBar.rar)下载 做这个任务栏界面缩略图时,使用VisualBrush将子界面的实时图像填充到Rectangle 1 Rectangle

WPF案例(-)模拟Windows7 Win+Tab切换

原文:WPF案例(-)模拟Windows7 Win+Tab切换     一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序,使用快捷键Ctrl+Down或Ctrl+Up在示例程序各个页面元素之间滑动导航,在本例中,使用Viewport2DVisual3D宿主二维控件,在这里为方便示例,二维控件仅简单的使用了一个Image,以下是界面缩略图,有兴趣的朋友可以下载源码       在建立本示例中的三维场景时,使用了Viewport3D,PerspectiveCamera,Ambien

WPF案例(二)模拟Apple OS 界面前后180度反转

原文:WPF案例(二)模拟Apple OS 界面前后180度反转     我们在设计应用程序界面的时候,为了充分利用界面空间,住住需要灵活的界面布局方式,比如可以在界面正面空间上定义一个Chart,背面空间上定义一个GridView,通过在Chart上鼠标双击,控件180度旋转后向用户显示出界面背面的GridView,通过在GridView上双击鼠标,控件再一次平滑的180度旋转向用户显示正面的Chart    这个例子就是使用Wpf模拟Apple OS 实现一个包含正反面元素的控件以Y轴为坐标

photoshop三种快速换白底方法分享

给各位photoshop软件的使用者们来详细的分享一下三种快速换白底的方法. 方法分享:   1 替换颜色   还是这个图,调出替换颜色,习惯吸取 背景颜色,然后调节容差范围,保证产品 全是黑色,背景是白色,并且界限分明, 然后最下面的明度调到最大值,然后,没 有然后了. 2 可选颜色   凡是无绝对,如果有的产品上有白色或者 浅色,再用上面替换颜色那种方法会出现不 管怎么调都无法产品全白,强行明度调白就 会再白色部位出现曝光过度,死白.这种情 况可以换用可选颜色.   可选颜色里白色,然后最后

Android插件化的思考——仿QQ一键换肤,思考比实现更重要!

Android插件化的思考--仿QQ一键换肤,思考比实现更重要! 今天群友希望写一个关于插件的Blog,思来想去,插件也不是很懂,只是用大致的思路看看能不能模拟一个,思路还是比较重要的,如果你有兴趣的话,也可以加群:555974449,你也可以说出你想看的Blog哦,嘿嘿!好的,不多说,我们进入正题: 关于QQ的换肤,他们的实现思路我不是很清楚,但是你可以看一下这张换肤的截图 我们想使用哪个主题就直接下载就好了,这一实现的过程我们大致的可以猜想: 首选是下载到本地指定文件夹,然后通过插件加载到我