WPF案例(二)模拟Apple OS 界面前后180度反转

简介: 原文:WPF案例(二)模拟Apple OS 界面前后180度反转    我们在设计应用程序界面的时候,为了充分利用界面空间,住住需要灵活的界面布局方式,比如可以在界面正面空间上定义一个Chart,背面空间上定义一个GridView,通过在Chart上鼠标双击,控件180度旋转后向用户显示出界面背面...
原文: WPF案例(二)模拟Apple OS 界面前后180度反转

    我们在设计应用程序界面的时候,为了充分利用界面空间,住住需要灵活的界面布局方式,比如可以在界面正面空间上定义一个Chart,背面空间上定义一个GridView,通过在Chart上鼠标双击,控件180度旋转后向用户显示出界面背面的GridView,通过在GridView上双击鼠标,控件再一次平滑的180度旋转向用户显示正面的Chart

   这个例子就是使用Wpf模拟Apple OS 实现一个包含正反面元素的控件以Y轴为坐标前后180翻转的动画效果,在这里为方便示例,在正反面各以一个Image来表示,在每一面的Image上双击鼠标,Image将180度反转,显示出背面的另一幅Image,下面是示例界面的缩略图,有兴趣的朋友可以下载源码

    

   在这个示例中主要采用了GeometryModel3D和VisualBrush这两个元素,GeometryModel3D用来在3D场景中建立几何模型,在Wpf中,任何复杂的3D模型最终都是由多个基本基元组成的,最小的基本基元被定义为由三个顶点连线组成的三角形,几何模型的每一面就是由多个这样的三角形的三维基元组合而成的。

   在Wpf中通过

img_405b18b4b6584ae338e0f6ecaf736533.gif GeomertyModel3D的定义
 1    < GeometryModel3D >
 2             < GeometryModel3D.Geometry >
 3                   < MeshGeometry3D  TriangleIndices ="0,1,2 2,3,0"  TextureCoordinates ="0,1 1,1 1,0 0,0"  
 4                           Positions ="-0.5,-0.5,0 0.5,-0.5,0 0.5,0.5,0 -0.5,0.5,0"   />
 5             </ GeometryModel3D.Geometry >
 6              < GeometryModel3D.Material >
 7                  < DiffuseMaterial >
 8                      < DiffuseMaterial.Brush >
 9                             < VisualBrush  Visual =" {Binding ElementName=frontHost} "   />
10                       </ DiffuseMaterial.Brush >
11                   </ DiffuseMaterial >
12               </ GeometryModel3D.Material >
13                < GeometryModel3D.BackMaterial >
14                    < DiffuseMaterial >
15                         < DiffuseMaterial.Brush >
16                              < VisualBrush  Visual =" {Binding ElementName=backHost} " >
17                                    < VisualBrush.RelativeTransform >
18                                          < ScaleTransform  ScaleX ="-1"  CenterX ="0.5"   />
19                                    </ VisualBrush.RelativeTransform >
20                                           </ VisualBrush >
21                               </ DiffuseMaterial.Brush >
22                     </ DiffuseMaterial >
23               </ GeometryModel3D.BackMaterial >
24                < GeometryModel3D.Transform >
25                     < RotateTransform3D >
26                           < RotateTransform3D.Rotation >
27                                  < AxisAngleRotation3D  x:Name ="rotate"  Axis ="0,1,0"  Angle ="0"   />
28                            </ RotateTransform3D.Rotation >
29                      </ RotateTransform3D >
30                 </ GeometryModel3D.Transform >
31     </ GeometryModel3D >

    对GometryModel3D的前后反转定义动画,在Wpf中,Viewport2DVisual3D用来在3D场景中宿主2D控件,因此只要把Image宿主在Viewport2DVisual3D中,就可以在直接在3D场景中反转Image,但这不是一个好的方法,因为如果宿主一个比较复杂,比较"重"的2D控件到Viewport2DVisual3D,并在3D场景中对它应用动画,将使动画的画面出现停顿,因此一个好的解决方法是用VisualBrush将2D控件的实时图像刷新到GometryModel3D的表面Material上,这样可使2D控件不用直接参于到3D场景中去,通过显示隐藏相关元素一样可以实现反转界面的动画效果

img_405b18b4b6584ae338e0f6ecaf736533.gif Storyboard的定义
 1  < Storyboard  x:Key ="FrontClick" >
 2               < ObjectAnimationUsingKeyFrames  Storyboard.TargetName ="Viewport3D"  
 3                           Storyboard.TargetProperty ="Visibility" >
 4                   < DiscreteObjectKeyFrame  KeyTime ="0:0:0"  Value =" {x:Static Visibility.Visible} "   />
 5                   < DiscreteObjectKeyFrame  KeyTime ="0:0:1.1"  Value =" {x:Static Visibility.Hidden} "   />
 6               </ ObjectAnimationUsingKeyFrames >
 7               < ObjectAnimationUsingKeyFrames  Storyboard.TargetName ="backWrapper"  
 8                         Storyboard.TargetProperty ="Visibility" >
 9                   < DiscreteObjectKeyFrame  KeyTime ="0:0:1"  Value =" {x:Static Visibility.Visible} " />
10               </ ObjectAnimationUsingKeyFrames >
11               < ObjectAnimationUsingKeyFrames  Storyboard.TargetName ="frontWrapper"  
12                         Storyboard.TargetProperty ="Visibility" >
13                   < DiscreteObjectKeyFrame  KeyTime ="0:0:0.05"  Value =" {x:Static Visibility.Hidden} "   />
14               </ ObjectAnimationUsingKeyFrames >
15               < DoubleAnimation  To ="0"  Duration ="0:0:0.05"  Storyboard.TargetName ="frontWrapper"  
16                        Storyboard.TargetProperty ="Opacity"   />
17               < DoubleAnimation  BeginTime ="0:0:1.05"  Duration ="0:0:0.05"  To ="1"  
18                        Storyboard.TargetName ="backWrapper"  Storyboard.TargetProperty ="Opacity"   />
19               < Point3DAnimation  To ="0,0,1.1"  From ="0,0,0.5"  BeginTime ="0:0:0.05"  Duration ="0:0:0.5"  
20                            AutoReverse ="True"  DecelerationRatio ="0.3"  Storyboard.TargetName ="camera"  
21                       Storyboard.TargetProperty ="(PerspectiveCamera.Position)"   />
22               < DoubleAnimation  From ="0"  To ="180"  AccelerationRatio ="0.3"  DecelerationRatio ="0.3"  
23                      BeginTime ="0:0:0.05"  Duration ="0:0:1"  Storyboard.TargetName ="rotate"  Storyboard.TargetProperty ="Angle"   />
24           </ Storyboard >
25           < Storyboard  x:Key ="BackClick"   >
26               < ObjectAnimationUsingKeyFrames  Storyboard.TargetName ="Viewport3D"
27                       Storyboard.TargetProperty ="Visibility" >
28                   < DiscreteObjectKeyFrame  KeyTime ="0:0:0"  Value =" {x:Static Visibility.Visible} "   />
29                   < DiscreteObjectKeyFrame  KeyTime ="0:0:1.1"  Value =" {x:Static Visibility.Hidden} "   />
30               </ ObjectAnimationUsingKeyFrames >
31               < ObjectAnimationUsingKeyFrames  Storyboard.TargetName ="frontWrapper"  
32                       Storyboard.TargetProperty ="Visibility" >
33                   < DiscreteObjectKeyFrame  KeyTime ="0:0:1"  Value =" {x:Static Visibility.Visible} " />
34               </ ObjectAnimationUsingKeyFrames >
35               < ObjectAnimationUsingKeyFrames  Storyboard.TargetName ="backWrapper"  
36                         Storyboard.TargetProperty ="Visibility" >
37                   < DiscreteObjectKeyFrame  KeyTime ="0:0:0.05"  Value =" {x:Static Visibility.Hidden} "   />
38               </ ObjectAnimationUsingKeyFrames >
39               < DoubleAnimation  To ="0"  Duration ="0:0:0.05"  Storyboard.TargetName ="backWrapper"
40                          Storyboard.TargetProperty ="Opacity"   />
41               < DoubleAnimation  BeginTime ="0:0:1.05"  Duration ="0:0:0.05"  
42                          Storyboard.TargetName ="frontWrapper"  Storyboard.TargetProperty ="Opacity"   />
43               < Point3DAnimation  To ="0,0,1.1"  From ="0,0,0.5"  BeginTime ="0:0:0.05"  
44                           Duration ="0:0:0.5"  AutoReverse ="True"  DecelerationRatio ="0.3"  Storyboard.TargetName ="camera"   
                            oryboard.TargetProperty ="(PerspectiveCamera.Position)"   />
45               < DoubleAnimation  From ="180"  To ="360"  AccelerationRatio ="0.3"  
46                            DecelerationRatio ="0.3"  BeginTime ="0:0:0.05"  Duration ="0:0:1"  
47                            Storyboard.TargetName ="rotate"  Storyboard.TargetProperty ="Angle"   />
48  </ Storyboard >
目录
相关文章
|
5月前
|
C#
WPF使用Blazor的快速案例
WPF使用Blazor的快速案例
66 0
WPF使用Blazor的快速案例
|
7月前
|
前端开发 算法 JavaScript
走进WPF之MVVM完整案例
走进WPF之MVVM完整案例
123 0
|
7月前
|
C#
WPF界面无法正常显示(资源引用,如转换器),但程序正常运行
WPF界面无法正常显示(资源引用,如转换器),但程序正常运行
WPF界面无法正常显示(资源引用,如转换器),但程序正常运行
|
前端开发 C#
WPF MVVM 如何在 ViewModel 中关闭界面窗口
WPF MVVM 如何在 ViewModel 中关闭界面窗口
WPF界面异常:未将对象引用设置到对象实例
WPF界面异常:未将对象引用设置到对象实例
|
C#
WPF实现三星手机充电界面
原文:WPF实现三星手机充电界面 GitHub地址:https://github.com/ptddqr/wpf-samsung-phone-s5-charging-ui/tree/master 先上效果图 这个效果来自于三星S5的充电界面,版权归三星所有,这里仅仅是技术实现.
1648 0
|
C#
Wix 安装部署教程(十) --来,用WPF做个漂亮的安装界面
原文:Wix 安装部署教程(十) --来,用WPF做个漂亮的安装界面        在上一篇中曾留下两个问题,.Net捆绑安装不触发以及路径选择的问题现在都已经解决,这段时间花的最多的地方还是WPF调样式上面,奈何WPF功力不够,暂时还是没有达到自己想要的效果。
1494 0
|
XML C# 数据格式
Wix 安装部署教程(九) --用WPF做安装界面
原文:Wix 安装部署教程(九) --用WPF做安装界面       经常安装PC端的应用,特别是重装系统之后,大致分为两类。一类像QQ,搜狗输入法这样的。分三步走的:第一个页面可以自定义安装路径和软件许可。
1539 0
|
C#
wpf中防止界面卡死的写法
原文:wpf中防止界面卡死的写法 View Code this.button1.Content = "正在计算"; Action action = new Action(() => { System.
2019 0