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

简介: 原文:WPF案例 (三) 模拟QQ“快速换装"界面   这个小程序使用Wpf模拟QQ快速换装页面的动画特效,通过使用组合快捷键Ctrl+Left或Ctrl+Right,可实现Image平滑的向左或者向右滑动,页面如下,有兴趣的朋友可以下载源码         在构建这个示例的3D场景时,使用...
原文: 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应用模型变换,最终出现图示的效果

img_405b18b4b6584ae338e0f6ecaf736533.gif 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将平滑的向左或者向右切换

img_405b18b4b6584ae338e0f6ecaf736533.gif 定义快捷键
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();
        }
 }
目录
相关文章
|
5月前
|
C#
WPF使用Blazor的快速案例
WPF使用Blazor的快速案例
66 0
WPF使用Blazor的快速案例
|
7月前
|
前端开发 算法 JavaScript
走进WPF之MVVM完整案例
走进WPF之MVVM完整案例
123 0
|
7月前
|
C#
WPF界面无法正常显示(资源引用,如转换器),但程序正常运行
WPF界面无法正常显示(资源引用,如转换器),但程序正常运行
WPF界面无法正常显示(资源引用,如转换器),但程序正常运行
|
前端开发 C#
WPF MVVM 如何在 ViewModel 中关闭界面窗口
WPF MVVM 如何在 ViewModel 中关闭界面窗口
WPF界面异常:未将对象引用设置到对象实例
WPF界面异常:未将对象引用设置到对象实例
|
C#
WPF实现三星手机充电界面
原文:WPF实现三星手机充电界面 GitHub地址:https://github.com/ptddqr/wpf-samsung-phone-s5-charging-ui/tree/master 先上效果图 这个效果来自于三星S5的充电界面,版权归三星所有,这里仅仅是技术实现.
1648 0
|
C#
Wix 安装部署教程(十) --来,用WPF做个漂亮的安装界面
原文:Wix 安装部署教程(十) --来,用WPF做个漂亮的安装界面        在上一篇中曾留下两个问题,.Net捆绑安装不触发以及路径选择的问题现在都已经解决,这段时间花的最多的地方还是WPF调样式上面,奈何WPF功力不够,暂时还是没有达到自己想要的效果。
1494 0
|
XML C# 数据格式
Wix 安装部署教程(九) --用WPF做安装界面
原文:Wix 安装部署教程(九) --用WPF做安装界面       经常安装PC端的应用,特别是重装系统之后,大致分为两类。一类像QQ,搜狗输入法这样的。分三步走的:第一个页面可以自定义安装路径和软件许可。
1539 0
|
C#
wpf中防止界面卡死的写法
原文:wpf中防止界面卡死的写法 View Code this.button1.Content = "正在计算"; Action action = new Action(() => { System.
2019 0