iOS查看3D效果的手势交互
公司项目中用到的,仿的人家厂子的效果,看起来还是挺高大上的,其实实现起来很简单,是一种伪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效果的手势交互的更多相关文章
- 如何让IOS中的文本实现3D效果
本转载至 http://bbs.aliyun.com/read/181991.html?spm=5176.7114037.1996646101.25.p0So7c&pos=9 zh ...
- iOS火焰动画效果、图文混排框架、StackView效果、偏好设置、底部手势等源码
iOS精选源码 高性能图文混排框架,构架顺滑的iOS应用. 使用OpenGLE覆盖阿尔法通道视频动画播放器视图. 可选最大日期截至当日日期的日期轮选器ChooseDatePicker 简单轻量的图片浏 ...
- (转)iOS Wow体验 - 第六章 - 交互模型与创新的产品概念(1)
本文是<iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad>第六章译文精选,其余章节将陆续放出.上一篇:Wow ...
- 【转载】IOS之禁用UIWebView的默认交互行为
原文地址 :IOS之禁用UIWebView的默认交互行为 http://my.oschina.net/hmj/blog/111344 UIKit提供UIWebView组件,允许开发者在App中嵌入We ...
- 如何创建一个非常酷的3D效果菜单
http://www.cocoachina.com/ios/20150603/11992.html 原文地址在这里.原文 去年,读者们投票选出了Top5的iOS7最佳动画,当然也很想看到有关这些动画如 ...
- 视频特效制作:如何给视频添加边框、水印、动画以及3D效果
2014-12-08 09:47 编辑: suiling 分类:iOS开发 来源:叶孤城的blog 招聘信息: iOS手机软件开发工程师 iOS工程师 Web后端高级开发工程师 iOS软件工程师 ja ...
- 手势交互之GestureDetector
GsetureDetector 一.交互过程 触屏的一刹那,触发MotionEvent事件 被OnTouchListener监听,在onTouch()中获得MotionEvent对象 GestureD ...
- 火狐的打开3D效果
最近研究网页的时候,想看看一个页面中盒子的层次问题,点击右键查看元素的后,没有发现3D效果的按钮. 在网上百度后说要什么显卡支持,以为是公司的电脑用的是集显,就没有这个功能.回去用自己的笔记本后,发现 ...
- 基于meanshift的手势跟踪与电脑鼠标控制(手势交互系统)
基于meanshift的手势跟踪与电脑鼠标控制(手势交互系统) zouxy09@qq.com http://blog.csdn.net/zouxy09 一年多前开始接触计算机视觉这个领域的时候,年幼无 ...
随机推荐
- Android应用安全开发之浅谈网页打开APP
一.网页打开APP简介 Android有一个特性,可以通过点击网页内的某个链接打开APP,或者在其他APP中通过点击某个链接打开另外一个APP(AppLink),一些用户量比较大的APP,已经通过发布 ...
- 一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)
上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 ...
- 常用[js,css,jquery,html]
目录: 一.javascript事件和属性 二.jquery事件和方法 三.js 四.css 五.html 六.js操作cookies 七.插件 javascript事件和属性 事件 onblur ...
- 自己动手模拟开发一个简单的Web服务器
开篇:每当我们将开发好的ASP.NET网站部署到IIS服务器中,在浏览器正常浏览页面时,可曾想过Web服务器是怎么工作的,其原理是什么?“纸上得来终觉浅,绝知此事要躬行”,于是我们自己模拟一个简单的W ...
- 《CLR.via.C#第三版》第二部分第8,9章节读书笔记(四)
三种类型的构造方法: 实例构造器(引用类型):实例构造器永远不能被继承(所以方法前没有修饰符):如果类的修饰符为static(sealed和abstract),编译器根本不会在类的定义中生成一个默认构 ...
- 当MyEclipse突然异常关闭
今天的博文主要记录一个问题,就是当MyEclipse异常关闭后,再次开启环境,导致Tomcat无法启动的问题解决方案 问题描述:在MyEclipse启动或者是tomcat启动的时候出现:Address ...
- 如何创建一个RESTful WCF Service
原创地址:http://www.cnblogs.com/jfzhu/p/4044813.html 转载请注明出处 (一)web.config文件 要创建REST WCF Service,endpoin ...
- 《Entity Framework 6 Recipes》翻译系列 (3) -----第二章 实体数据建模基础之创建一个简单的模型
第二章 实体数据建模基础 很有可能,你才开始探索实体框架,你可能会问“我们怎么开始?”,如果你真是这样的话,那么本章就是一个很好的开始.如果不是,你已经建模,并在实体分裂和继承方面感觉良好,那么你可以 ...
- Ajax_05之跨域请求
1.跨域请求: Cross Domain Request:跨域名的HTTP请求,浏览器从某个域名下的资源访问了另一域名下的另一资源(协议.域名或是端口号不同): ①浏览器允许跨域请求的情形: < ...
- Python学习路径及练手项目合集
Python学习路径及练手项目合集 https://zhuanlan.zhihu.com/p/23561159