公司项目中用到的,仿的人家厂子的效果,看起来还是挺高大上的,其实实现起来很简单,是一种伪3D;用手势滑动查看一个商品的3D展示。

在手机上手指左右滑动可以360°无死角查看这个商品,有兴趣的可以下demo运行看一下,虽然很简单但还是有一些问题的,就当做一个记录吧,有时间再深入优化一下。

1、左右滑

下面看一下代码实现,先来个投机版的:

素材:50张图片

一开始你可能会想用滑动手势去实现,但是这个东西滑动是要求有惯性的,这样会显得比较流畅酷炫

所以我想到了scrollView,初始化代码很简单,添加一个imageView用来显示图片,再添加一个scrollView,并把他的contentSize弄得超大,初识位置放在中间,也就是contentOffset / 2,

去掉滑动条,这样用户除非没完没了在那滑很久,不然不可能发现原来不是无限滚动的(这么大的数用户发现的几率几乎为0,嫌小还可以再大点)

 - (void)viewDidLoad {
[super viewDidLoad];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(, , , )];
imageView.image = [UIImage imageNamed:@"st01"];
[self.view addSubview:imageView];
self.imageView = imageView; UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
scrollView.delegate = self;
scrollView.contentSize = CGSizeMake(, self.view.bounds.size.height);
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.contentOffset = CGPointMake( / , );
[self.view addSubview:scrollView];
self.scrollView = scrollView;
}

接下来就是scrollView的代理方法了:(我的变量名是不是定义的有点随便了。/3的意思是让它不要太灵敏,不然转的会很快)

 - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
int pianyi = (int)(scrollView.contentOffset.x / ) % ;
self.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@%02d",@"st",pianyi]];
}

好了,代码就是这么点,基本功能算是实现出来了,不过我用了个偷懒的方法。但是我爸这里存在的问题说一下,首先用这种方法是不优雅的,所以我试过把10000000000改成MAXFLOAT,但是当把(MAXFLOAT/2)放在contentOffset的时候图片就不显示了,还有我把10000000000 / 2 中的“/2”去掉之后图片也不显示了,不知道为什么,猜测可能不能超过一个过大的值吧,但是它和图片的显示又有什么影响呢?还没搞懂,暂时记录下来了。也试过用无限轮播的思路搞一下,试了一下没搞成,以后有时间再试试。留下这两个问题,哪位大牛看到其中问题请一定赐教,哈哈。

2、上下滑

原理跟上边差不多但还是有点区别的,就不多说了,直接上代码:(80代表的是一共八十张图,运行看一下demo基本就应该明白了)

 - (void)viewDidLoad {
[super viewDidLoad]; UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
imageView.image = [UIImage imageNamed:@"toilet0001"];
[self.view addSubview:imageView];
self.imageView = imageView; UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
scrollView.delegate = self;
scrollView.contentSize = CGSizeMake(self.view.bounds.size.width, self.view.bounds.size.height + );
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;
[self.view addSubview:scrollView];
self.scrollview = scrollView;
} - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
int pianyi = (int)(scrollView.contentOffset.y );
if (pianyi < ) {
pianyi = ;
}
if (pianyi > ) {
pianyi = ;
}
self.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@%04d",@"toilet",pianyi]];
}

3、不偷懒的方法

待续。。。

demo:https://github.com/alan12138/somethingInteresting/tree/master/3D

iOS查看3D效果的手势交互的更多相关文章

  1. 如何让IOS中的文本实现3D效果

    本转载至 http://bbs.aliyun.com/read/181991.html?spm=5176.7114037.1996646101.25.p0So7c&pos=9       zh ...

  2. iOS火焰动画效果、图文混排框架、StackView效果、偏好设置、底部手势等源码

    iOS精选源码 高性能图文混排框架,构架顺滑的iOS应用. 使用OpenGLE覆盖阿尔法通道视频动画播放器视图. 可选最大日期截至当日日期的日期轮选器ChooseDatePicker 简单轻量的图片浏 ...

  3. (转)iOS Wow体验 - 第六章 - 交互模型与创新的产品概念(1)

    本文是<iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad>第六章译文精选,其余章节将陆续放出.上一篇:Wow ...

  4. 【转载】IOS之禁用UIWebView的默认交互行为

    原文地址 :IOS之禁用UIWebView的默认交互行为 http://my.oschina.net/hmj/blog/111344 UIKit提供UIWebView组件,允许开发者在App中嵌入We ...

  5. 如何创建一个非常酷的3D效果菜单

    http://www.cocoachina.com/ios/20150603/11992.html 原文地址在这里.原文 去年,读者们投票选出了Top5的iOS7最佳动画,当然也很想看到有关这些动画如 ...

  6. 视频特效制作:如何给视频添加边框、水印、动画以及3D效果

    2014-12-08 09:47 编辑: suiling 分类:iOS开发 来源:叶孤城的blog 招聘信息: iOS手机软件开发工程师 iOS工程师 Web后端高级开发工程师 iOS软件工程师 ja ...

  7. 手势交互之GestureDetector

    GsetureDetector 一.交互过程 触屏的一刹那,触发MotionEvent事件 被OnTouchListener监听,在onTouch()中获得MotionEvent对象 GestureD ...

  8. 火狐的打开3D效果

    最近研究网页的时候,想看看一个页面中盒子的层次问题,点击右键查看元素的后,没有发现3D效果的按钮. 在网上百度后说要什么显卡支持,以为是公司的电脑用的是集显,就没有这个功能.回去用自己的笔记本后,发现 ...

  9. 基于meanshift的手势跟踪与电脑鼠标控制(手势交互系统)

    基于meanshift的手势跟踪与电脑鼠标控制(手势交互系统) zouxy09@qq.com http://blog.csdn.net/zouxy09 一年多前开始接触计算机视觉这个领域的时候,年幼无 ...

随机推荐

  1. 为什么要重写hashcode() 方法

    Java中的集合(Collection)有两类,一类是List,再有一类是Set. 前者集合内的元素是有序的,元素可以重复:后者元素无序,但元素不可重复. 那么我们怎么判断两个元素是否重复呢? 这就是 ...

  2. 使用Akka.net开发第一个分布式应用

    系列主题:基于消息的软件架构模型演变 既然这个系列的主题是"基于消息的架构模型演变",少不了说说Actor模型.Akka.net是一个基于Actor模型的分布式框架.如果你对分布式 ...

  3. 【整理】待毕业.Net码农就业求职储备

    声明:本文题目来源于互联网,仅供即将从学校毕业的.Net码农(当然,我本人也是菜逼一个)学习之用.当然,学习了这些题目不一定会拿到offer,但是针对就业求职做些针对性的准备也是不错的.此外,除了技术 ...

  4. 程序员眼中的 SQL Server-执行计划教会我如何创建索引?

    先说点废话 以前有 DBA 在身边的时候,从来不曾考虑过数据库性能的问题,但是,当一个应用程序从头到脚都由自己完成,而且数据库面对的是接近百万的数据,看着一个页面加载速度像乌龟一样,自己心里真是有种挫 ...

  5. Self Host模式下的ASP. NET Web API是如何进行请求的监听与处理的?

    构成ASP.NET Web API核心框架的消息处理管道既不关心请求消息来源于何处,也不需要考虑响应消息归于何方.当我们采用Web Host模式将一个ASP.NET应用作为目标Web API的宿主时, ...

  6. Service基础使用

    Service基础使用 之前的文章一直介绍Activity的使用,很多知识和用法单一的配合Activity使用,这次将总结Android四大组件之二--Service. 本文将要介绍以下内容: Ser ...

  7. Clang Format

    1,最近项目代码要求规范化,在网上找了个Xcode插件:Clang Format ,下载地址:https://github.com/travisjeffery/ClangFormat-Xcode 2, ...

  8. javaScript 基础知识

    一.三个对话框 1.alert("提示信息") 弹出只带有一个确定按钮的对话框2.confirm("提示信息") 弹出有确定和取消按钮的对话框3.prompt( ...

  9. easyui datagrid cell title换行

    " " title="' +row.TaskName + "

  10. Angular $watch

    如果想在某个属性发生变化的时候执行某些操作,那么scope.$watch是最佳选择 https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$w ...