原文:
WPF案例 (三) 模拟QQ“快速换装"界面
3D场景
定义快捷键
这个小程序使用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 >
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();
}
}
{
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();
}
}
