wpf 模拟3D效果(和手机浏览图片效果相似)(附源码)

简介: 原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依赖属性也不介绍。

原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码)

pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依赖属性也不介绍。),个人认为,依赖属性这个东西,有百分之五十是为了3D而存在。
(自己写的类似于demo的东西)
先上图,无图无真相

这是demo的整个效果图,可以用鼠标移动,触摸屏也可以手指滑动,图片会移动,然后移动结束,会有一个回弹的判断。

复制代码
<Window x:Class="_3Dshow.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Demo" Height="441" Width="702" Background="LightGray" xmlns:System="clr-namespace:System;assembly=mscorlib"> <Grid PreviewMouseDown="_view_mousedown" PreviewMouseMove="_view_mousemove" PreviewMouseUp="_view_mouseup" > <Border Background="LightGray" Padding="2" Margin="0,-41,0,-40"> <Viewport3D x:Name="_view" > </Viewport3D> </Border> </Grid> </Window>
复制代码

xmal,很简单 一个viewport3D,还有就是鼠标事件,这里如果你深入研究,会发现比较有意思的事情,路由事件!
从grid 路由到viewground,如果外面再嵌套一个canvas,会更清晰。
个人认为路由事件比较扯淡的是,我想让grid处理不让viewport3d处理,或者又想让grid处理又想让viewport3d处理,这是很有意思的事情。
好,这里不多啰嗦,上代码

复制代码
       #region 全局函数
        // Queue<double>[,] sum_queue;
        double[,] sum_queue = new double[5, 2]; PerspectiveCamera _camera = null; bool ismousedown = false; // TimeSpan timspan;  Point startPoint, currentPoint, endPoint; string[] fileList; double[,] sum_list; int _b = 0; DispatcherTimer sub_time = new DispatcherTimer(); DispatcherTimer sub_time1 = new DispatcherTimer(); private static DependencyProperty TranslatePosProperty = DependencyProperty.Register( "TranslatePos", typeof(double), typeof(Window1), new PropertyMetadata((double)0, new PropertyChangedCallback(DragPosChanged))); #endregion
复制代码

一个依赖属性,两个dispatchertimer,一个用于控制拖拽动画,一个用于托抓完毕后的回弹效果,通过animation来改变依赖属性,进一步达到控制整个页面的效果。
依赖属性的回测事件(我自己把这种回传事件称之为回测事件,个人喜好)

复制代码
        #region temp
        double _pos = 0;

        void PosChanged(double pos) { double delta = pos - _pos; _pos = pos; GetTran(delta); } #endregion
复制代码

 



下面是核心代码,我用一个数组存放了所有的图片,图片的位置,图片的偏转角度,图片的缩放大小,图片在左边还是在右边的一个标识位,最后通过设置Transform 来改变图片,其实不能说是图片了,因为他是一个个元素,viewport的元素,这些元素自身有Transform 这个属性,所以直接用这个设置,我还没有找到用动画或者故事板控制的方法。

复制代码
        private void GetTran(double sum)
        {

            for (int i = 0; i < _view.Children.Count; i++) { #region point move #region 调整位置 sum_list[i, 1] += sum / 270; //angel if (sum > 0) { if (sum_list[i, 4] == -2) { sum_list[i, 3] += sum / 2000; } else if (sum_list[i, 4] == 0) { sum_list[i, 3] -= sum / 2000; } else if (sum_list[i, 4] == 2) { sum_list[i, 3] -= sum / 2000; } } else { if (sum_list[i, 4] == -2) { sum_list[i, 3] += sum / 2000; } else if (sum_list[i, 4] == 0) { sum_list[i, 3] += sum / 2000; } else if (sum_list[i, 4] == 2) { sum_list[i, 3] -= sum / 2000; } } if (sum > 0) { if (sum_list[i, 2] == 0) { sum_list[i, 4] = 2; } sum_list[i, 2] -= sum / 10; if (sum_list[i, 2] == 0) { sum_list[i, 4] = 0; } } else if (sum < 0) { if (sum_list[i, 2] == 0) { sum_list[i, 4] = -2; } sum_list[i, 2] -= sum / 10; if (sum_list[i, 2] == 0) { sum_list[i, 4] = 0; } } #endregion Transform3DGroup tg = new Transform3DGroup(); tg.Children.Add(new RotateTransform3D(new AxisAngleRotation3D(new Vector3D(0, 1, 0), sum_list[i, 2]))); tg.Children.Add(new ScaleTransform3D(sum_list[i, 3], sum_list[i, 3], sum_list[i, 3])); tg.Children.Add(new TranslateTransform3D(sum_list[i, 1], 0, sum_list[i, 0])); _view.Children[i].Transform = tg; #endregion } Volidating(); }
复制代码

最后会有一个校验,校验是让设置每个图片是否超标,以及设置他们到和初始相比较的状态

复制代码
 private void Volidating()
        {
            for (int i = 0; i < _view.Children.Count; i++) { if (sum_list[i, 3] >= 1) { sum_list[i, 1] = 0; sum_list[i, 3] = 1; sum_list[i, 2] = 0; sum_list[i, 4] = 0; int sum = 1; for (int j = i - 1; j >= 0; j--) { sum_list[j, 3] = 1 - (0.2) * sum; if (sum_list[j, 3] <= 0) { sum_list[j, 3] = 0; } sum_list[j, 2] = 40 * sum; sum_list[j, 1] = -1.5 * sum; sum++; } sum = 1; for (int j = i + 1; j < _view.Children.Count; j++) { sum_list[j, 3] = 1 - (0.2) * sum; if (sum_list[j, 3] <= 0) { sum_list[j, 3] = 0; } sum_list[j, 2] = 40 * sum * (-1); sum_list[j, 1] = 1.5 * sum; sum++; } break; } } }
复制代码



当鼠标点击时候,我记录下一个坐标,鼠标移动时,我记录下一个坐标,鼠标起来时,我记录一个坐标,鼠标移动时,触发第一个timer,鼠标起来时,触发第二个timer。
这些就是基本思路,写的很随性,思维不缜密,10年11月时候花了一周时间写的,我并不是说我怎么怎么样,nb或者sb,只是有些怀念。
那时候研究wpf,一心要涉足这个方向,对于动画一知半解,wpf相对于winform是一个全新的东西,现在看这些代码,或许觉得摇头或者觉得垃圾,但是很怀念那时候还年轻的时候,用最笨的方法实现想要的东西,为此而加班至深夜。
有时候为了找一些问题,google出来,千篇一律,copy是常见,稍微带源码的都要注册,积分,很不喜欢把程序商品化,共享讨论才能有改进,所以就把之前的代码发来讨论一下,如有兴趣,可以继续改进。
(我们是拉风的程序员,不是屌丝)
谨祝福'那时候终日不知疲倦,反复坐在电脑旁测试,看着自己写出的东西,在心里自己对自己说:看,这是我写出来的东西。'又奔波不已的所有程序员。
源码:
files.cnblogs.com/fish124423/3Dshow.rar

目录
相关文章
|
3月前
|
前端开发 JavaScript 搜索推荐
响应式企业网站模板推荐 | 适配PC/手机/平板| 1对1打造专属企业官网CMS源码
在移动互联网时代,响应式企业网站成为标配,可适配PC、平板、手机等多端设备,提升用户体验与SEO效果。本文详解响应式设计的技术原理(媒体查询、流式布局等)、主流模板推荐(WordPress、Bootstrap、Vue等)及CMS定制开发流程,助力企业高效构建专业官网。
|
5月前
|
API 数据安全/隐私保护 开发者
企业微信自动加好友软件,导入手机号批量添加微信好友,python版本源码分享
代码展示了企业微信官方API的合规使用方式,包括获取access_token、查询部门列表和创建用户等功能
|
5月前
|
数据安全/隐私保护 计算机视觉 Python
人脸识别图片眨眼生成器,手机制作人脸眨眼张嘴, 代替真人刷脸软件
代码实现了基于面部特征点的人脸动画生成,包括眨眼和张嘴动作。它使用dlib进行人脸检测和特征点定位
|
9月前
|
存储 机器学习/深度学习 人工智能
TaoAvatar:手机拍出电影级虚拟人!阿里3D高斯黑科技让动捕设备下岗
阿里巴巴最新推出的TaoAvatar技术,通过3D高斯溅射实现照片级虚拟人实时渲染,支持多信号驱动与90FPS流畅运行,将彻底改变电商直播与远程会议体验。
624 8
TaoAvatar:手机拍出电影级虚拟人!阿里3D高斯黑科技让动捕设备下岗
|
11月前
|
移动开发 HTML5
HTML5实现的手机验证抽奖领券效果源码
这是一款基于HTML5实现的手机验证抽奖领券效果源码。在输入框输入手机号码即可点击下方的按钮来进行抽奖游戏,中奖后还会弹出提示信息,是一款比较经典的抽奖游戏源码
332 9
|
移动开发 HTML5
HTML5熊猫弹跳手机小游戏源码
一款html5手机端小游戏源码,熊猫跳跃小游戏源码下载。熊猫脚底有弹簧,长按变化力度跳跃,计分游戏,html5手机熊猫也疯狂小游戏源代码。
326 5
|
移动开发 HTML5
HTML5实现手机端红包下落抢红包特效源码
HTML5实现手机端红包下落抢红包特效源码是一款手机移动端的抢红包小游戏源码下载。红包像下雪一样,点击抓我呀,可以抢红包,需要此款代码的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
252 4
Discuz! X3.5插件云诺-阿里云短信手机登录 会员登录后也无法查看附件图片的问题解决方法
Discuz! X3.5插件云诺-阿里云短信手机登录 会员登录后也无法查看附件图片的问题解决方法
251 2
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
215 1
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
3400 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机