這個小程序使用Wpf模擬QQ快速換裝頁面的動畫特效，通過使用組合快捷鍵Ctrl+Left或Ctrl+Right，可實現Image平滑的向左或者向右 滑動，頁面如下，有興趣的朋友可以下載源碼：http://files.cnblogs.com/5460600/Switch.rar
在構建這個示例的3D場景時，使用了ModelVisual3D和Model3DGroup元素，ModelVisual3D是一個3D容器類，用來包含 3D元素，在這裡 使用Model3DGroup打包了3個GeometryModel3D，每個GeometryModel3D的Materia各填充了一幅Image，將Model3DGroup設置為 ModelVisual3D的Content，使用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、ScaleTransform3D 和 RotateTransform3D，通過這三個元素的組合動畫，可讓3D場景非常活躍，向用戶呈現出 絢麗的界面和豐富的操作體驗，比如這個示例中的動畫就是通過對 GeometryModel3D應用了TranslateTransform3D和RotateTransform3D的 模型變換
C#動畫
1 public void MoveCurrentToNext()
2 {
3 //這裡是向右滑動，取位於中間位置的GeometryModel3D為當前的GeometryModel3D
4 var current = this.model3DGroup.Children[0] as GeometryModel3D;
5 var left = this.model3DGroup.Children[2] as GeometryModel3D;
6 var right = this.model3DGroup.Children[1] as GeometryModel3D;
7 this.model3DGroup.Children.RemoveAt(0);
8 this.model3DGroup.Children.Add(current);
9
10 //下面分別對GeometryModel3D的TranslateTransform3D，RotateTransform3D元素應用動畫
11 var transform3DGroup = right.Transform as Transform3DGroup;
12
13 var translate = transform3DGroup.Children[1] as TranslateTransform3D;
14 var rotate = (transform3DGroup.Children[0] as RotateTransform3D).Rotation
15 as AxisAngleRotation3D;
16 AnimationVisualElement(translate, rotate, 0, 0, 0, 0, true);
17
18
19 transform3DGroup = current.Transform as Transform3DGroup;
20
21 translate = transform3DGroup.Children[1] as TranslateTransform3D;
22 rotate = (transform3DGroup.Children[0] as RotateTransform3D).Rotation
23 as AxisAngleRotation3D;
24 AnimationVisualElement(translate, rotate, -1.8, 0, -2.5, 45, true);
25
26 transform3DGroup = left.Transform as Transform3DGroup;
27
28 translate = transform3DGroup.Children[1] as TranslateTransform3D;
29 rotate = (transform3DGroup.Children[0] as RotateTransform3D).Rotation
30 as AxisAngleRotation3D;
31 AnimationVisualElement(translate, rotate, 1.8, 0, -2.5, -45, true);
32
33 }
34
35 public void MoveCurrentToPrevious()
36 {
37 //向左滑動。取位於左邊位置的GeometryModel3D為當前的GeometryModel3D
38 var current = this.model3DGroup.Children[2] as GeometryModel3D;
39 var center = this.model3DGroup.Children[0] as GeometryModel3D;
40 var right = this.model3DGroup.Children[1] as GeometryModel3D;
41 this.model3DGroup.Children.RemoveAt(2);
42 this.model3DGroup.Children.Insert(0, current);
43
44 //下面分別對GeometryModel3D的TranslateTransform3D，RotateTransform3D元素應用動畫
45 var transform3DGroup = center.Transform as Transform3DGroup;
46
47 var translate = transform3DGroup.Children[1] as TranslateTransform3D;
48 var rotate = (transform3DGroup.Children[0] as RotateTransform3D).Rotation
49 as AxisAngleRotation3D;
50
51 AnimationVisualElement(translate, rotate, 1.8, 0, -2.5, -45, true);
52
53 transform3DGroup = current.Transform as Transform3DGroup;
54
55 translate = transform3DGroup.Children[1] as TranslateTransform3D;
56 rotate = (transform3DGroup.Children[0] as RotateTransform3D).Rotation
57 as AxisAngleRotation3D;
58 AnimationVisualElement(translate, rotate, 0, 0, 0, 0, true);
59
60 transform3DGroup = right.Transform as Transform3DGroup;
61
62 translate = transform3DGroup.Children[1] as TranslateTransform3D;
63 rotate = (transform3DGroup.Children[0] as RotateTransform3D).Rotation
64 as AxisAngleRotation3D;
65 AnimationVisualElement(translate, rotate, -1.8, 0, -2.5, 45, true);
66 }
67 private void AnimationVisualElement(TranslateTransform3D translate,
AxisAngleRotation3D rotate,
68 double targetX, double targetY, double targetZ, double angel, bool forward)
69 {
70 Duration duration = new Duration(TimeSpan.FromSeconds(.4));
71 //對TranslateTransform3D的OffsetX屬性應用動畫
72 DoubleAnimation animationX = new DoubleAnimation();
73 animationX.To = targetX;
74 animationX.Duration = duration;
75 animationX.AccelerationRatio = forward ? 0 : 1;
76 animationX.DecelerationRatio = forward ? 1 : 0;
77 translate.BeginAnimation(TranslateTransform3D.OffsetXProperty, animationX);
78 //對TranslateTransform3D的OffsetY屬性應用動畫
79 DoubleAnimation animationY = new DoubleAnimation();
80 animationX.To = targetY;
81 animationX.AccelerationRatio = forward ? 0.7 : 0.3;
82 animationX.DecelerationRatio = forward ? 0.3 : 0.7;
83 animationX.Duration = duration;
84 translate.BeginAnimation(TranslateTransform3D.OffsetYProperty, animationX);
85 //對TranslateTransform3D的OffsetZ屬性應用動畫
86 DoubleAnimation animationZ = new DoubleAnimation();
87 animationZ.To = targetZ;
88 animationZ.AccelerationRatio = forward ? 0.3 : 0.7;
89 animationZ.DecelerationRatio = forward ? 0.7 : 0.3;
90 animationZ.Duration = duration;
91 translate.BeginAnimation(TranslateTransform3D.OffsetZProperty, animationZ);
92 //對AxisAngleRotation3D的Angle屬性應用動畫
93 DoubleAnimation animationAngel = new DoubleAnimation();
94 animationAngel.To = angel;
95 animationAngel.AccelerationRatio = forward ? 0.3 : 0.7;
96 animationAngel.DecelerationRatio = forward ? 0.7 : 0.3;
97 animationAngel.Duration = duration;
98 rotate.BeginAnimation(AxisAngleRotation3D.AngleProperty, animationAngel);
99 }
最後定義快捷鍵，按下組合鍵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();
}
}
