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 一年多前开始接触计算机视觉这个领域的时候,年幼无 ...
随机推荐
- MVC学习-http://www.w3school.com.cn/
连接字符串: <add name="MovieDBContext" connectionString="Data Source=|DataDirectory|\Mo ...
- Eclipse中自动提示的方法参数都是arg0,arg1的解决方法
Eclipse中自动提示的方法参数都是arg0,arg1,就不能根据参数名来推断参数的含义,非常不方便. 解决方法:Preferences->Java->Installed JREs,发现 ...
- Jexus 支持PHP的三种方式
Jexus不仅支持ASP.NET,而且能够通个自带的PHP-FCGI服务以及PHP-FPM等方式灵活支持PHP而且还可以以.NET(Phalanger)方式支持PHP. PHP-FCGI服务支持PHP ...
- 剑指Offer面试题:11.打印1到最大的n位数
一.题目:打印1到最大的n位数 题目:输入数字n,按顺序打印出从1最大的n位十进制数.比如输入3,则打印出1.2.3一直到最大的3位数即999. 二.不同的解法 2.1 不假思索的解法 最容易想到的办 ...
- .NET支持多平台后的一点拙见
我们目前对.NET的理解大部分可以归纳为:起初它是Java平台(注意是平台,不要跟Java语言搞混淆)的一个克隆品,后来慢慢演变,有了自己的特性.由于Java平台最显著的特点就是“平台独立性”(或者说 ...
- Base 64 编码
原创地址:http://www.cnblogs.com/jfzhu/p/4020097.html 转载请注明出处 (一)Encoding VS. Encryption 很多人都以为编码(Encodin ...
- div非弹出框半透明遮罩实现全屏幕遮盖css实现
IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...
- 【Win10应用开发】自适应磁贴中的分组
老周在上一篇文章中介绍过了自适应磁贴的基本结构,以及给大家演示了一些例子. 本文老周给大伙伴们说说自适应磁贴的另一个特点——分组呈现. 当磁贴的内容被分组后,每个组中的内容就会被视为一个整体.比如某磁 ...
- 实战MEF(1):一种不错的扩展方式
在过去,我们完成一套应用程序后,如果后面对其功能进行了扩展或修整,往往需要重新编译代码生成新的应用程序,然后再覆盖原来的程序.这样的扩展方式对于较小的或者不经常扩展和更新的应用程序来说是可以接受的,而 ...
- OpenCASCADE Root-Finding Algorithm
OpenCASCADE Root-Finding Algorithm eryar@163.com Abstract. A root-finding algorithm is a numerical m ...