iOS查看3D效果的手势交互
2016-07-06 15:55
411 查看
公司项目中用到的,仿的人家厂子的效果,看起来还是挺高大上的,其实实现起来很简单,是一种伪3D;用手势滑动查看一个商品的3D展示。
在手机上手指左右滑动可以360°无死角查看这个商品,有兴趣的可以下demo运行看一下,虽然很简单但还是有一些问题的,就当做一个记录吧,有时间再深入优化一下。
下面看一下代码实现,先来个投机版的:
素材:50张图片
一开始你可能会想用滑动手势去实现,但是这个东西滑动是要求有惯性的,这样会显得比较流畅酷炫
所以我想到了scrollView,初始化代码很简单,添加一个imageView用来显示图片,再添加一个scrollView,并把他的contentSize弄得超大,初识位置放在中间,也就是contentOffset / 2,
去掉滑动条,这样用户除非没完没了在那滑很久,不然不可能发现原来不是无限滚动的(这么大的数用户发现的几率几乎为0,嫌小还可以再大点)
接下来就是scrollView的代理方法了:(我的变量名是不是定义的有点随便了。/3的意思是让它不要太灵敏,不然转的会很快)
好了,代码就是这么点,基本功能算是实现出来了,不过我用了个偷懒的方法。但是我爸这里存在的问题说一下,首先用这种方法是不优雅的,所以我试过把10000000000改成MAXFLOAT,但是当把(MAXFLOAT/2)放在contentOffset的时候图片就不显示了,还有我把10000000000 / 2 中的“/2”去掉之后图片也不显示了,不知道为什么,猜测可能不能超过一个过大的值吧,但是它和图片的显示又有什么影响呢?还没搞懂,暂时记录下来了。也试过用无限轮播的思路搞一下,试了一下没搞成,以后有时间再试试。留下这两个问题,哪位大牛看到其中问题请一定赐教,哈哈。
demo:https://github.com/alan12138/somethingInteresting/tree/master/3D
在手机上手指左右滑动可以360°无死角查看这个商品,有兴趣的可以下demo运行看一下,虽然很简单但还是有一些问题的,就当做一个记录吧,有时间再深入优化一下。
1、左右滑
下面看一下代码实现,先来个投机版的:
素材:50张图片
一开始你可能会想用滑动手势去实现,但是这个东西滑动是要求有惯性的,这样会显得比较流畅酷炫
所以我想到了scrollView,初始化代码很简单,添加一个imageView用来显示图片,再添加一个scrollView,并把他的contentSize弄得超大,初识位置放在中间,也就是contentOffset / 2,
去掉滑动条,这样用户除非没完没了在那滑很久,不然不可能发现原来不是无限滚动的(这么大的数用户发现的几率几乎为0,嫌小还可以再大点)
- (void)viewDidLoad { [super viewDidLoad]; UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 100, 300, 200)]; 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(10000000000, self.view.bounds.size.height); scrollView.showsHorizontalScrollIndicator = NO; scrollView.contentOffset = CGPointMake(10000000000 / 2, 0); [self.view addSubview:scrollView]; self.scrollView = scrollView; }
接下来就是scrollView的代理方法了:(我的变量名是不是定义的有点随便了。/3的意思是让它不要太灵敏,不然转的会很快)
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { int pianyi = (int)(scrollView.contentOffset.x / 3) % 50; 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 + 80); 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 < 0) { pianyi = 0; } if (pianyi > 80) { pianyi = 80; } self.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@%04d",@"toilet",pianyi]]; }
3、不偷懒的方法
待续。。。demo:https://github.com/alan12138/somethingInteresting/tree/master/3D
相关文章推荐
- iOS8区域定位CLVisit的了解
- iOS绘图二
- 实现类似美团的下拉分级式菜单
- iOS中电话号码中间每四位加一个空格
- 跳转到指定的控制器iOS
- iOS 变更史
- iOS9新特性 3DTouch 开发教程全解(含源码)
- ios导入静态库时报错:"_OBJC_CLASS_$_"
- iOS视频播放
- H含金量 iOS绘图及贝塞尔曲线关键知识
- iOS开发问题----去掉输入键盘上的自动联想部分,限制长度内容,以及禁止输入emoji表情等问题
- presentViewController跳转动画切换
- [iOS] iOS开发的22个奇葩技巧
- ios 健康HealthKit的数据采样
- iOS 截屏
- iOS图片压缩
- iOS开发——Watch开发环境设置
- iOS中图片压缩的常见方法
- IOS-抽屉效果
- iOS实现头像选取(照相或者图片库)、大小等比缩放、生成圆形头像 (转)