iOS查看3D效果的手势交互

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

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

1、左右滑

 

下面看一下代码实现，先来个投机版的：

素材：50张图片

 

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

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

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

 1 - (void)viewDidLoad {
 2     [super viewDidLoad];
 3     UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 100, 300, 200)];
 4    imageView.image = [UIImage imageNamed:@"st01"];
 5     [self.view addSubview:imageView];
 6     self.imageView = imageView;
 7     
 8     UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
 9     scrollView.delegate = self;
10     scrollView.contentSize = CGSizeMake(10000000000, self.view.bounds.size.height);
11     scrollView.showsHorizontalScrollIndicator = NO;
12     scrollView.contentOffset = CGPointMake(10000000000 / 2, 0);
13     [self.view addSubview:scrollView];
14     self.scrollView = scrollView;
15 }

 

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

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

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

2、上下滑

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

 1 - (void)viewDidLoad {
 2     [super viewDidLoad];
 3     
 4     UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
 5     imageView.image = [UIImage imageNamed:@"toilet0001"];
 6     [self.view addSubview:imageView];
 7     self.imageView = imageView;
 8     
 9     UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
10     scrollView.delegate = self;
11     scrollView.contentSize = CGSizeMake(self.view.bounds.size.width, self.view.bounds.size.height + 80);
12     scrollView.showsHorizontalScrollIndicator = NO;
13     scrollView.showsVerticalScrollIndicator = NO;
14     [self.view addSubview:scrollView];
15     self.scrollview = scrollView;
16 }
17 
18 - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
19     int pianyi = (int)(scrollView.contentOffset.y );
20     if (pianyi < 0) {
21         pianyi = 0;
22     }
23     if (pianyi > 80) {
24         pianyi = 80;
25     }
26     self.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@%04d",@"toilet",pianyi]];
27 }

 

3、不偷懒的方法

待续。。。 

 

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

转载于:https://www.cnblogs.com/alan12138/p/5646843.html