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

原文: WPF實作3D翻轉的動畫效果

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/

，謝謝！