WPF实现3D翻转的动画效果

简介: 原文:WPF实现3D翻转的动画效果1、前端代码实现 1.1 原理见代码注析 ...
原文: 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/,谢谢!
目录
相关文章
|
4月前
|
C#
WPF中动画教程(DoubleAnimation的基本使用)
WPF中动画教程(DoubleAnimation的基本使用)
85 0
|
3月前
|
算法 C# Windows
不可不知的WPF动画(Animation)
【9月更文挑战第19天】在 WPF(Windows Presentation Foundation)中,动画能为应用程序增添生动性和交互性。主要类型包括线性动画和关键帧动画,可针对依赖属性和自定义属性操作。触发方式有事件触发和自动触发,支持暂停、恢复及停止控制。合理使用这些功能并注意性能优化,可创建引人入胜的用户界面。
|
4月前
|
C# UED 开发者
WPF与性能优化:掌握这些核心技巧,让你的应用从卡顿到丝滑,彻底告别延迟,实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法,详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈,如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着,通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画,从而有效提升应用性能。通过这些优化措施,WPF应用将更加流畅,用户体验也将得到显著改善。
320 1
|
4月前
|
C# UED 开发者
WPF动画大揭秘:掌握动画技巧,让你的界面动起来,告别枯燥与乏味!
【8月更文挑战第31天】在WPF应用开发中,动画能显著提升用户体验,使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法,包括平移、缩放、旋转等常见类型,并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外,还将介绍动画触发器的使用,帮助开发者更好地控制动画效果,提升应用的吸引力。
245 0
|
4月前
|
存储 C# 数据格式
WPF动画教程(PointAnimationUsingPath的使用)
WPF动画教程(PointAnimationUsingPath的使用)
57 0
|
7月前
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放,可沿X或Y轴调整。在故事板中,通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性,并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时,EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后,展示了如何将动画集成到自定义按钮样式中。
193 0
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
228 0
|
IDE C# 开发工具
WPF钟表效果实现
中WPF中的RotateTransform实现UI元素的旋转,并模拟钟表的秒针、分针和时针。
1204 0
WPF钟表效果实现
|
IDE 编译器 C#
WPF实现强大的动态公式计算
数据库可以定义表不同列之间的计算公式,进行自动公式计算,但如何实现行上的动态公式计算呢?行由于可以动态扩展,在某些应用场景下将能很好的解决实际问题。本文就探讨一下如何在WPF中实现一种基于行字段的动态公式计算。
1087 0
WPF实现强大的动态公式计算
|
网络协议 C# 移动开发
C# WPF上位机实现和下位机TCP通讯
C# WPF上位机实现和下位机TCP通讯下位机使用北京大华程控电源DH1766-1,上位机使用WPF。实现了电压电流实时采集,曲线显示。上午在公司调试成功,手头没有程控电源,使用TCP服务端模拟。昨天写的TCP服务端正好排上用场。
2416 0