公司项目中用到的,仿的人家厂子的效果,看起来还是挺高大上的,其实实现起来很简单,是一种伪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. JS请求服务器并使页面跳转(转)

    前段时间在项目中用到了前台框架EasyUI,各种组件都是差不多都是用js来渲染的,这样一些页面请求就必须用js代码来写. 但是js请求就不和html请求的玩法不怎么相同,比如我要向服务器发送一个请求然 ...

  2. iOS在线更新framework,使用NSBundle动态读取

    官方文档:https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/LoadingCode/Tasks/Loadin ...

  3. [nRF51822] 13、浅谈nRF51822和NRF24LE1/NRF24LU1/NRF24L01经典2.4G模块无线通信配置与流程

    前言:  nRF51可以支持基于2.4G的互相通信.与NRF24LE1的通信.与NRF24LU1的通信.与NRF24L01的通信. 一.nRF51822基于2.4G和nRF51822通信 其中nRF5 ...

  4. Hystrix框架1--入门

    介绍 在开发应用中或多或少会依赖各种外界的服务,利用各个服务来完成自己的业务需求,现在流行的微服务架构更是离不开各个服务之间的调用,这就导致整体应用的可用性依赖于各个依赖服务的可用性. 比如一个依赖3 ...

  5. [Linux]Linux下安装和配置solr/tomcat/IK分词器 详细实例一.

    在这里一下讲解着三个的安装和配置, 是因为solr需要使用tomcat和IK分词器, 这里会通过图文教程的形式来详解它们的安装和使用.注: 本文属于原创文章, 如若转载,请注明出处, 谢谢.关于设置I ...

  6. PowerDesigner成功生成PDM进行check model后的错误提示解决途径

    1.existence of reference join------->缺少主键; 2.constraint name uniquesness-------->关联约束重名(refere ...

  7. 用SQL语句创建四个表并完成相关题目-10月18日更新

    1. 查询Student表中的所有记录的Sname.Ssex和Class列. 2. 查询教师所有的单位即不重复的Depart列. 3. 查询Student表的所有记录. 4. 查询Score表中成绩在 ...

  8. Windows中搭建Redis集群

    从 http://rubyinstaller.org/downloads/ 下载Ruby2.2.5(x64)并安装,安装时勾选添加至路径变量中 命令行中执行gem source -a http://g ...

  9. Sql Server系列:通用表表达式CTE

    1 CTE语法WITH关键字 通用表表达式(Common Table Express, CTE),将派生表定义在查询的最前面.要使用CTE开始创建一个查询,可以使用WITH关键字. CTE语法: WI ...

  10. javascript运动系列第四篇——抖动

    × 目录 [1]原理介绍 [2]代码实现 [3]实例应用 前面的话 在运动系列中,前面分别介绍了匀速运动.变速运动和曲线运动.下面介绍一种特殊的运动形式——抖动 原理介绍 抖动其实是往复运动的一种特殊 ...