wpf 模拟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

时间: 2024-09-13 12:50:46

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

Android仿微信发朋友圈浏览图片效果_Android

先看一下效果吧: 下面就来说一下具体怎么实现的: 实现思路 1.首先我们要获取数据源,数据源就是我们的每条说说(包括姓名.标题.图片数组) 2.自定义适配器(ListView嵌套着GridView) 3.图片点击浏览图片(Fragment+ViewPager) 具体实现 1.初始化数据源,设置适配器,看一下代码: public class MyActivity extends Activity { /*图片显示列表*/ private ListView listView; /*图片URL数组*/

Android仿微信发朋友圈浏览图片效果

先看一下效果吧: 下面就来说一下具体怎么实现的: 实现思路 1.首先我们要获取数据源,数据源就是我们的每条说说(包括姓名.标题.图片数组) 2.自定义适配器(ListView嵌套着GridView) 3.图片点击浏览图片(Fragment+ViewPager) 具体实现 1.初始化数据源,设置适配器,看一下代码: public class MyActivity extends Activity { /*图片显示列表*/ private ListView listView; /*图片URL数组*/

基于Jquery制作图片文字排版预览效果附源码下载_jquery

基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示     源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscre

你可能用到的百度地图效果(附源码)

原文:你可能用到的百度地图效果(附源码)      这段时间需要实现百度地图的一些展示效果,虽然最终效果做出来了,可是这中间也走了很多的弯路,希望有用到的可以直接拿来用,少走一些弯路.百度地图为开发者提供了一系列的接口,点百度接口去百度接口.本文主要用到了以下几个效果: 1.热力图显示 2.自定义图标的聚合显示 3.云麻点显示       热力图显示       百度地图热力图是通过设置热力图半径.颜色.透明度等参数直观展示数据分布情况,而我这段时间所做的,就是通过一段时间内的订单数量,再结合经

Jquery插件之Fancybox丰富的弹出层效果附源码下载_jquery

Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片.图片集.Ajax数据,还能加载SWF影片,iframe页面等等. 效果演示     源码下载 fancybox 特点: 可以支持图片.html 文本.flash 动画.iframe 以及 ajax 的支持: 可以自定义播放器的 css 样式: 可以以组的形式进行播放: 如果将鼠标滚动插件(mous

太赞了!超炫的页面切换动画效果【附源码下载】

原文:太赞了!超炫的页面切换动画效果[附源码下载] 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果.虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了视角(Perspective)和 3D 转换(3D Transforms)来创造一些立体动感的效果.   立即下载      在线演示   温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中

基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)_jquery

内容滑动切换应用非常广,常见的有幻灯片焦点图.画廊切换等.随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程. 先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示: 效果展示      源码下载 本次教程分三个部分: 1.使用jQuery开发基本的内容滑动切换效果, 2.支持移动端触控自适应的内容滑动切换效果, 3.封装内容滑动切换效果jQuery插件. 本文讲解第一部分,

jQuery拖拽排序插件制作拖拽排序效果(附源码下载)_jquery

使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示         源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><

基于JavaScript实现添加到购物车效果附源码下载_javascript技巧

我们有很多种方法实现将商品添加到购物车,通常的做法是点击"添加到购物车"按钮,会跳转到购物车,在购物车里可以点击"结算"按钮进行结算.而今天我给大家介绍一个更友好的解决方案. 查看演示 下载源码 默认情况下,购物车是隐藏不可见的,当用户点击添加到购物车按钮后,商品信息会添加到购物车,购物车会以按钮的形式出现在页面右下角,点击按钮则会展开购物车,显示购物车中的商品信息,同时也可以对购物车中的商品进行删除或者结算等操作.用户也可以暂时关闭购物车继续购物. HTML结构