WPF實現3D翻轉的動畫效果

標籤：style   blog   http   io   color   ar   os   sp   for   

1、前端代碼實現

1.1 原理見代碼注析

<Grid MouseDown="Grid_MouseDown">    <Viewport3D>        <Viewport3D.Camera>            <!-- Position屬性指定3D空間中攝像機的位置，LookDirection屬性為攝像機方向 -->            <PerspectiveCamera Position="0 0 500" LookDirection="0 0 -1" />        </Viewport3D.Camera>        <Viewport3D.Children>            <ContainerUIElement3D>                <Viewport2DVisual3D>                    <Viewport2DVisual3D.Geometry>                        <!-- Positions屬性工作表示繪製對象的點集合，TriangleIndices屬性工作表示對象的正反面（WPF通過逆時針環繞表示正面），TextureCoordinates屬性工作表示2D紋理映射到3D對象 -->                        <!-- 一般通過3D建模工具推導得出 -->                        <MeshGeometry3D Positions="-200 200 0  -200 -200 0  200 -200 0  200 200 0" TriangleIndices="0 1 2  0 2 3" TextureCoordinates="0 0  0 1  1 1  1 0"/>                    </Viewport2DVisual3D.Geometry>                    <Viewport2DVisual3D.Material>                        <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>                    </Viewport2DVisual3D.Material>                    <Viewport2DVisual3D.Visual>                        <!-- 放置正面自訂使用者控制項 -->                        <Page:Win1 Width="400" Height="400"/>                    </Viewport2DVisual3D.Visual>                </Viewport2DVisual3D>                <Viewport2DVisual3D>                    <Viewport2DVisual3D.Geometry>                        <MeshGeometry3D Positions="200 200 0  200 -200 0  -200 -200 0  -200 200 0" TriangleIndices="0 1 2  0 2 3" TextureCoordinates="0 0  0 1  1 1  1 0"/>                    </Viewport2DVisual3D.Geometry>                    <Viewport2DVisual3D.Material>                        <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>                    </Viewport2DVisual3D.Material>                    <Viewport2DVisual3D.Visual>                        <!-- 放置反面自訂使用者控制項 -->                        <Page:Win2 Width="400" Height="400"/>                    </Viewport2DVisual3D.Visual>                </Viewport2DVisual3D>                <ContainerUIElement3D.Transform>                    <RotateTransform3D>                        <RotateTransform3D.Rotation>                            <!-- 設定旋轉軸為對齊座標系統的Y軸 -->                            <AxisAngleRotation3D x:Name="aar" Angle="0" Axis="0 1 0"/>                        </RotateTransform3D.Rotation>                    </RotateTransform3D>                </ContainerUIElement3D.Transform>            </ContainerUIElement3D>            <ModelVisual3D>                <ModelVisual3D.Content>                    <!-- 設定指定方向傳播的平行光線填充情境 -->                    <DirectionalLight Color="Transparent"/>                </ModelVisual3D.Content>            </ModelVisual3D>        </Viewport3D.Children>    </Viewport3D></Grid>

2、後端代碼實現

2.1 通過按一下滑鼠翻轉動畫180度顯示對象反面，滑鼠雙擊翻轉動畫0度顯示對象正面。

private void Grid_MouseDown(object sender, MouseButtonEventArgs e){    DoubleAnimation da = new DoubleAnimation();    da.Duration = new Duration(TimeSpan.FromSeconds(1));    if (e.ClickCount == 2)        da.To = 0d;    else        da.To = 180d;    AxisAngleRotation3D aar = Application.Current.MainWindow.FindName("aar") as AxisAngleRotation3D;    aar.BeginAnimation(AxisAngleRotation3D.AngleProperty, da);  }

3、運行效果

3.1 如下

歡迎轉載，但請註明出處：http://www.cnblogs.com/julyweb/，謝謝！

WPF實現3D翻轉的動畫效果