wpf做的3d滑动gallery

原文:wpf做的3d滑动gallery

wpf做的3d滑动gallery

随着iphone\ipad的流行及热捧,现在做移动产品不管是什么平台的,领导总想做成像ios系统的样子。自从微软发布了window8预览版之后,领导就想着把公司的移动产品移殖到window8上去了。公司的移动产品的主界面是做成3d gallery的立体画册效果的,如下图:

window8是不带这样的控件的,究竟有没有实现如此效果的控件我就不清楚了,我认为是没有的,因为我在vs上找不到,也不符合window8风格,我找遍了互联网也没有找到这样效果的第三方控件,所以只好自已去开发实现了。虽然我认为做这样的效果放上window8上比较搞笑,但领导想要如此就没办法了,领导说怎么做就怎么做!

window8的metro风格开发需要在window8平台上开发,虽然开发框架并不是wpf ,不过也是差不多的,就是xaml加c#(这个效果其实用silverlight来实现会更简单一些,因为它有将2d视图直接模拟3D动画的类), window8只在虚拟机上装了,所以就用wpf来研究了。

在互联网只找到一种模拟环绕滚动效果的开源代码,图片及滚动效果都有了(只是2D图效果),就拿它来开刀改造成我们要的效果。需要增加四个功能效果,一是让它支持用鼠标滑动控制,二是让图片有透视立体效果,三是当前图滑动到左右时能且有动画效果在正面与则面视角间转换,四是为每张图增加点击触发事件。

一、鼠标滑动控制功能

因为涉及到的功能比较复杂,具体同学们自已看源码研究了,这里主要是把入口代码告诉大家。只要实现控件的OnMouseMove事件去控制图片的滑动:

        private void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                IsPressed = true;
                tempi += 1;
                if (tempp.X > e.GetPosition(LayoutRoot).X)
                {
                    if (tempi > MOVE_DISTANCE)
                    {
                       //鼠标滑到一定距离后图片自动滑动到下一张
                        MoveRight();
                        tempi = 0;
                    }
                     _touch_move_distance += 1;

                }
                else if (tempp.X < e.GetPosition(LayoutRoot).X)
                {
                    if (tempi > MOVE_DISTANCE)
                    {
                         //鼠标滑到一定距离后图片自动滑动到下一张
                        MoveLeft();
                        tempi = 0;
                    }
                   _touch_move_distance -= 1;

                }
                tempp = e.GetPosition(LayoutRoot);

            }
            else if (e.LeftButton == MouseButtonState.Released)
            {
                IsPressed = false;
                tempi = 0;
                tempp = new Point(0, 0);
            }
            else
            {
                tempi = 0;
                tempp = new Point(0, 0);
            }
        }

二、让图片有透视立体效果,动画效果在正面与则面视角间转换

立体效果需要有控件或类支持才行,xaml提供了一种实现方法就是用Viewport3D类,首先自定义一个具有把2d图转3D的图片view控件,用xaml实现,涉及的代码较多这里不列出来了,只说一下转换的动画效果实现,以下只是其实一种

            GeometryModel3D current = this.contentView;
            var transform3DGroup = current.Transform as Transform3DGroup;
            var rotate = (transform3DGroup.Children[0] as RotateTransform3D).Rotation as AxisAngleRotation3D;
            AnimationVisualElement(rotate, 45);

AnimationVisualElement是自定义的实现动画效果的方法,只实现在立体旋转,其他如大小缩放也是需要的

        private void AnimationVisualElement(AxisAngleRotation3D rotate, double angel)
        {
            Duration duration = new Duration(TimeSpan.FromSeconds(.1));
            //对AxisAngleRotation3D的Angle属性应用动画
            DoubleAnimation animationAngel = new DoubleAnimation();
            animationAngel.To = angel;
            animationAngel.AccelerationRatio = 0.3;
            animationAngel.DecelerationRatio = 0.7;
            animationAngel.Duration = duration;
            rotate.BeginAnimation(AxisAngleRotation3D.AngleProperty, animationAngel);
        }

三、为每张图增加点击触发事件

点击事件在添加子图片时添加进去

        public void AddImage(ImageSource bitmapImage)
        {
            Viewport3DControl image = new Viewport3DControl();
            image.SetImageSource(ref bitmapImage);
            image.Index = _images.Count;
            image.Width = ChildViewWidth;
            image.Height = ChildViewHeight;
            image.MouseDown += new MouseButtonEventHandler(image_MouseDown);
            LayoutRoot.Children.Add(image);
            posImage(image, _images.Count);
            _images.Add(image);
        }

        void image_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Viewport3DControl view = (Viewport3DControl)sender;
         // 用委托输出触发事件到主线程 ,需要注意的是,在引用此控件时必须实现此委托方法
            OnTouchDownEvent(view, view.Index);
        }
        public delegate void TouchDownHander(UIElement view, int index);
        public event TouchDownHander OnTouchDownEvent;

比较特别的是,此控件拥有滑动时会产生惯性滑动效果,实现此效果的关键代码是这部分

        void _timer_Tick(object sender, EventArgs e)
        {
            //还原位置
            if (IsPressed == false && _touch_move_distance != 0)
            {
                //回弹
                _touch_move_distance += (-_touch_move_distance) * SPRINESS;
            }
            for (int i = 0; i < _images.Count; i++)
            {
                Viewport3DControl image = _images[i];
                posImage(image, i);
            }
            if (Math.Abs(_target - _current) < CRITICAL_POINT && IsPressed == false) return;
//惯性滑动效果
            _current += (_target - _current) * SPRINESS;
        }

其实就是移动距离的变化算法实现的

此控件实现在效果跟ios或android上的gallery控件的效果是一模一样的。同学们学会制件此控件后,应该也就会对模拟自然物理动画效果的实现有些了解了,首先控件本身是自带计时器的,然后是需要相关效果的模拟效果数值算法。给同学们奉上全部源代码及demo, 还有一个gallery的变种,效果更复杂一些的,这里就不解说它的实现原理了,同学们自已研究。

gallery变种效果图:

该demo界面

全部代码下载,本项目用vs2010编绎

http://files.cnblogs.com/easywebfactory/3d_Gallery.rar

时间: 2024-10-05 11:19:07

wpf做的3d滑动gallery的相关文章

【小松教你手游开发】【系统模块开发】做一个3d旋转菜单

在unity做一个3d旋转菜单,像乱斗西游2的这种: 暂时有两种方法可以实现: 一.当做是2d界面,通过定义几个固定点的坐标.大小.透明度,还有每个点的panel depth大小,把数据存储下来,在手机滑动的过程中计算滑动划过的距离和这个panel大小的比值,乘以两个点之间的距离,获得坐标点移动的距离,通过改变x轴改变位置,同理改变大小和透明度. 这个方法我自己做2d游戏的时候实现过,做起来比较简单,没有什么可拓展性可言,并且会有很多限制,比如拖动过程中很难转变方向.要自己实现运动中的弹性(这里

ViewPager+Fragmet 实现3D滑动效果

ViewPager+Fragmet 实现3D滑动效果,下面给出程序运行截图: 本项目的目录截图如下: 核心代码如:fragments包里的碎片fragment,和util包里面的对ViewPager的一些定义. dome源码下载地址:(http://download.csdn.net/detail/qq_30000411/9582958) 本dome是基于as2.0下写的项目,下载后导入运行有可能会出现sdk版本问题,希望你能自习该版本bug,as的项目的apk路径 ViewPage+Fragm

使用Windows GDI 做一个3D”软引擎“-Part1

前: 最近几天一个很虎比的教程吸引了我的视线,原作者使用c# / JavaScript逐步实现了一个基本的3D软引擎. 我不懂上面提到的语言,所以,准备用我熟悉的C++和Win32实现重造这个轮子.:) 注意: 这不是一篇关于DirectX / OpenGL (GPU)的文章,本系列文章将实现一个软件(CPU)驱动的“DirectX”,很有趣吧,啊哈. 本文假设读者有一定的计算机图形学的基础,使用OpenGL / DirectX 写过程序. 本文假设读者有一定的Win32基础(不是MFC),最起

用WPF做了几个小游戏

最近看书看累了,参考别人的代码(其实差不多就是把代码重新打了一遍o(╯□╰)o),用wpf做了个<2048>小游戏,顺便在<Git教程>学习下git,也顺便把在<写让别人能读懂的代码>收获的插件用起来(和之前用的VisualAssist功能有重复调了半天(╯‵□′)╯︵┻━┻,不过整合之后真心好用).之后又用这个界面写了几个其他游戏,虽然逻辑都非常简单(不如2048复杂),不过也算举一反三吧……代码都在GitHub <2048> 别踩白块 找不同 MORE…

WPF特效-实现3D足球效果

原文:WPF特效-实现3D足球效果 WPF 实现 3D足球效果,效果图如下: ?每个面加载不同贴图. <UserControl x:Class="MediaBalll.Model3Ds.BuckyBall"? ? ? ? ? ? ?xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"? ? ? ? ? ? ?xmlns:x="http://schemas.microsoft

WPF中的3D Wireframe

原文:WPF中的3D Wireframe WPF不支持画三维线,但开发人员提供了ScreenSpaceLines3D 类用于实现这个功能.我已经在程序中实现并成功显示3D Wireframe,并能够进行3D Solid和3D Wireframe的切换. 我在熟悉这个类的基础上,自己定义了3D Wireframe xml文件的格式,用于保存3D Wireframe数据. 格式如下: <Wireframe>? <ScreenSpaceLines3D??? Form="Generic

Android 3D滑动菜单完全解析,实现推拉门式的立体特效

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/10471245 在上一篇文章中,我们学习了Camera的基本用法,并借助它们编写了一个例子,实现了类似于API Demos里的图片中轴旋转功能.不过那个例子的核心代码是来自于API Demos中带有的Rotate3dAnimation这个类,是它帮助我们完成了所有的三维旋转操作,所有Matrix和Camera相关的代码也是封装在这个类中. 这样说来的话,大家心里会不会痒痒的呢?虽然

Wix 安装部署教程(九) --用WPF做安装界面

经常安装PC端的应用,特别是重装系统之后,大致分为两类.一类像QQ,搜狗输入法这样的.分三步走的:第一个页面可以自定义安装路径和软件许可.第二个页面显示安装进度条,第三个页面推荐其他应用.先不管人家怎么实现的,我们先回顾一下. QQ:       再一个就是分六步或七步走的,如QQ影音:欢迎界面,用户许可,安装组件,安装目录,安装进度,安装完成,有七步的,一般会多一些软件推荐.当然还有其他的,比如是基于ClickOnce打包的,就一个界面,一个进度条.没有安装目录选择,这一般不是商业软件.先说第

Wix 安装部署教程(十) --来,用WPF做个漂亮的安装界面

在上一篇中曾留下两个问题,.Net捆绑安装不触发以及路径选择的问题现在都已经解决,这段时间花的最多的地方还是WPF调样式上面,奈何WPF功力不够,暂时还是没有达到自己想要的效果.另外ViewModel做了些调整,状态更加分明.安装效果是仿照搜狗输入法做的.先上效果图.   以上这只是四个基本的页面,更细化一些可以分出卸载的进度页面,卸载的完成页面,对修复同理,还有安装失败,用户取消提示页面,再就是能检测新版本并覆盖安装,这些都可以根据状态去添加页面.下面简单的说下思路和新的问题点. 关键流程 安