WPF翻转动画

在WPF中要翻转对象，估计是得用三维变换，所以我用到了AxisAngleRotation3D，让图形绕着Z轴来旋转。

先看看效果。

是的，就是这样的效果，在XAML中，由于涉及三维图形，我先做了两个用户控件，作为正面和背面，然后让它旋转。

设计完用户控件后，就在主窗口上放一个Viewport3D控件，这个是必须的，它是三维模型的容器，如果不用就不知道怎么弄出三维图形来了。具体请看下面的XAML：

1. <Window x:Class="翻转.MainWindow"
2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4. Title="MainWindow" Height="420" Width="650"
5. xmlns:local="clr-namespace:翻转"
6. WindowStyle="None"
7. ResizeMode="NoResize"
8. AllowsTransparency="True"
9. Background="Transparent"
10. WindowStartupLocation="CenterScreen">
11. <Grid>
12. <Grid.RowDefinitions>
13. <RowDefinition Height="*"/>
14. <RowDefinition Height="auto"/>
15. </Grid.RowDefinitions>
16. <Viewport3D Grid.Row="0" Margin="3">
17. <Viewport3D.Camera>
18. <PerspectiveCamera Position="0 0 800" LookDirection="0 0 -1" NearPlaneDistance="100"/>
19. </Viewport3D.Camera>
20. <Viewport3D.Children>
21. <ContainerUIElement3D>
22. <Viewport2DVisual3D>
23. <Viewport2DVisual3D.Geometry>
24. <MeshGeometry3D Positions="-200 150 0  -200 -150 0  200 -150 0  200 150 0" TriangleIndices="0 1 2  0 2 3" TextureCoordinates="0 0  0 1  1 1  1 0"/>
25. </Viewport2DVisual3D.Geometry>
26. <Viewport2DVisual3D.Material>
27. <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>
28. </Viewport2DVisual3D.Material>
29. <Viewport2DVisual3D.Visual>
30. <local:UcSample1 Width="400" Height="300"/>
31. </Viewport2DVisual3D.Visual>
32. </Viewport2DVisual3D>
33. <Viewport2DVisual3D>
34. <Viewport2DVisual3D.Geometry>
35. <MeshGeometry3D Positions="200 150 0  200 -150 0  -200 -150 0  -200 150 0" TriangleIndices="0 1 2  0 2 3" TextureCoordinates="0 0  0 1  1 1  1 0"/>
36. </Viewport2DVisual3D.Geometry>
37. <Viewport2DVisual3D.Material>
38. <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>
39. </Viewport2DVisual3D.Material>
40. <Viewport2DVisual3D.Visual>
41. <local:UcSample2 Width="400" Height="300"/>
42. </Viewport2DVisual3D.Visual>
43. </Viewport2DVisual3D>
44. <!-- 三维变换 -->
45. <ContainerUIElement3D.Transform>
46. <RotateTransform3D CenterX="0.5" CenterY="0.5" CenterZ="0.5">
47. <RotateTransform3D.Rotation>
48. <AxisAngleRotation3D x:Name="axr" Angle="0" Axis="0 1 0"/>
49. </RotateTransform3D.Rotation>
50. </RotateTransform3D>
51. </ContainerUIElement3D.Transform>
52. </ContainerUIElement3D>
53. <ModelVisual3D>
54. <ModelVisual3D.Content>
55. <DirectionalLight Color="Transparent"/>
56. </ModelVisual3D.Content>
57. </ModelVisual3D>
58. </Viewport3D.Children>
59. </Viewport3D>
60. <StackPanel Grid.Row="1" Margin="0,5,0,6" Orientation="Horizontal" HorizontalAlignment="Center">
61. <Button Padding="25,5" Content="向前" Click="OnClick"/>
62. <Button Padding="25,5" Content="向后" Click="OnClick" Margin="12,0,0,0"/>
63. <Button Padding="25,5" Content="关闭" Click="OnClick" Margin="12,0,0,0"/>
64. </StackPanel>
65. </Grid>
66. </Window>

里面还有几个按钮，我是通过单击按钮来控制动画的，所以，后面还要写必要的处理代码，生成动画。

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Text;
5. using System.Threading.Tasks;
6. using System.Windows;
7. using System.Windows.Controls;
8. using System.Windows.Data;
9. using System.Windows.Documents;
10. using System.Windows.Input;
11. using System.Windows.Media;
12. using System.Windows.Media.Imaging;
13. using System.Windows.Navigation;
14. using System.Windows.Shapes;
15. using System.Windows.Media.Media3D;
16. using System.Windows.Media.Animation;
17. namespace 翻转
18. {
19. /// <summary>
20. /// MainWindow.xaml 的交互逻辑
21. /// </summary>
22. public partial class MainWindow : Window
23. {
24. public MainWindow()
25. {
26. InitializeComponent();
27. }
28. private void OnClick(object sender, RoutedEventArgs e)
29. {
30. Button btn = e.OriginalSource as Button;
31. if (btn != null)
32. {
33. string s = btn.Content.ToString();
34. if (s == "关闭")
35. {
36. this.Close();
37. }
38. DoubleAnimation da = new DoubleAnimation();
39. da.Duration = new Duration(TimeSpan.FromSeconds(1));
40. if (s == "向前")
41. {
42. da.To = 0d;
43. }
44. else if (s == "向后")
45. {
46. da.To = 180d;
47. }
48. this.axr.BeginAnimation(AxisAngleRotation3D.AngleProperty, da);
49. }
50. }
51. }
52. }

当图形绕Z轴转0度，就表示是正面，如果为180度，就转到反面。我们在声明Viewport2DVisual3D.Geometry的坐标模型，即三角型叠加模型，要注意点逆时针方向顺序来定义，如果弄反了，那么图形就跑到模型的背面去了。因此，正面图形和背面图形的点的方向是刚好相反的。

三维的东西不太好解释，所以我稍后把代码上传，以供参考。