解决探探app左划右划图片浏览器无法实现无缝循环的技术方案

1.目前以仿探探app为例的一种左滑右滑查看图片的浏览器被各大app借鉴使用，流畅新颖的操作方式深受用户的喜爱

2.现有技术的缺点

2.1 我发现网上诸多的例子中都没有实现浏览器查看到底部的时候，无缝切换到第一张图片循环浏览的效果。

2.2 在研究他们的实现方式的时候，发现他们在重用机制上有一定的缺陷，虽然能够实现效果，但是无法实现iOS提倡的性能流畅和资源重用的设计理念

3. 我的实现思路

3.1技术逻辑问题

多准备一张隐形图片，放到浏览器最下层，用来作为中间图片，其余三张图片用来展示，实现无缝切换的效果和重用机制。

3.2 详细阐述

 

3.2.1 实现的方式是对这个照片浏览器进行封装成一个单独的view（以下简称为photoScannerView），暴露的的接口类似UITableView：初始化方法，刷新重制方法（reloadData），点击事件图片样式等代理方法；

 

3.2.2 实现四个图片view的UI，（如果数据源中小于三张图片，那么数据源有几个就做几个图片view），每个图片view上添加平移手势，设置好他们frame叠放显示 如图：（其中第四张图片的frame与第三张相同，透明度为0）：

 

3.2.3 数据赋值：在viewController中进行，代理方法中根据当前是第几层view和数据源数组，实现图片view的的样式展示以及数据刷新赋值。

3.2.3 手势方法实现方式：

1) 获取手指在屏幕上移动的坐标以及改变的x,y的坐标，最上层的图片view，做相应的位置变化，这里我用的是transform属性，相对于他的上一次做形变；

2) 手势结束的时候，判断当前图片位置距离手指一动之前的距离没有超过屏幕1/2则认为用户不想做操作，将图片view重新放到原来的位置，反之，认为用户想要查看下一张图片，需要将这张图片view移除屏幕，轨迹与图片view坐标变化的x，y的偏移量比例一致。

最重要的：

1.在手指一动图片view的同时，除了第一张图片的frame移动之外，其他三张图片需要根据手指移动的距离与屏幕总长度的比例，依次的移动frame，规则就是：第二张图片移动到第一张图片原始位置，第三张图片移动到第二张图片的位置，第四张图片移动到第三张图片的位置，与此同时，第三张图片透明度也会根据比例从0到1。

2.移除屏幕之外的情况还需要做的操作：这时候需要将移除屏幕之外的这张图片透明度设置为0之后，重新放到图片浏览器的最下层；

附上demo：https://github.com/liudawan/DWPhotoScanner.git