原文: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();
}
}