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

这个小程序使用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();
        }
}