使用Swift 3 in在iOS中制作自己的360˚Product Viewer

要制作360˚产品查看器，您需要从不同角度拍摄一系列产品照片。 我不会完成这些镜头的创建过程，但是，如果您想了解它，可以访问https://www.ecwid.com/blog/guide-to-360-product-photography.html

导入图像

拍摄完这些照片后，将那些照片拖到图像资产中。 不要忘了以递增的数字顺序命名它们。

设置视图

现在我们有了图片，现在让我们切换到情节提要，然后从ViewController中的Object Library中拖动ImageView。 向您的ImageView添加必要的约束。 我希望ImageView是整个宽度的正方形，并位于屏幕中央。 因此，我将在视图中添加“前导”，“尾随”和“垂直居中”约束，并在“ ImageView”中添加“ 1：1纵横比”约束。 您可以按照设计要求设置约束。

还将Pan Gesture Recognizer从对象库拖到ImageView。 要使Pan Gesture正常工作，必须为ImageView启用User Interaction。 要启用它，请转到“属性检查器”，然后在“交互”属性中检查“启用用户交互”属性。

编码！！

现在我们已经为360产品查看器设置了视图，让我们通过创建ImageView的Outlet和Pan Gesture Recognizer的动作开始编码。 

  @IBOutlet弱var imageView：UIImageView！ 
  @IBAction功能手势（_发送者：UIPanGestureRecognizer）{ 
  }

定义一些变量。 currentIndex将保存图像的当前索引， images将保存产品图像数组 将会显示的内容， lastPoint将保存最后一个触摸点的坐标，而灵敏度则定义了查看器的拖动灵敏度。 

  var currentIndex：Int = 0 
  var images：[UIImage] = [UIImage]（） 
  var lastPoint：CGPoint = CGPoint.zero 
 让敏感性：CGFloat = 5.0

现在，让我们在手势动作中编写一个逻辑，该逻辑将在拖动时更改imageView图像。 逻辑很简单。 当用户在imageView上拖动时，我们获得imageView上触摸点的坐标并将其设置为currentPoint 。 然后，我们检查拖动是刚刚开始还是已经开始。 如果拖动刚刚开始，则仅将lastPoint设置为currentPoint 。 否则，我们将获得拖动的速度并将其设置为速度变量，以了解用户是从左向右拖动还是从右向左拖动。 当用户从左向右拖动时，当用户从右向左拖动时，我们得到正速度和负速度 。 我们还要检查currentPoint的x位置是否平滑且不那么敏感。 如果速度为正，并且currentPoint大于lastPoint x位置加灵敏度 ，则将currentIndex递减1到0，当currentIndex达到0时，将其设置回最后一个索引（即images.count -1 ）。 通过这样做，我们实现了无限滚动。 类似地，如果速度为负并且currentPoint小于lastPoint x位置减去灵敏度 ，则将currentIndex递增到最后一个索引（即images.count -1 ），当currentIndex到达最后一个索引时，将其设置回0。两种情况下，我们都将lastPoint设置为currentPoint 。 

 让currentPoint = sender.location（in：imageView） 
 如果sender.state == .be { 
  lastPoint = currentPoint 
  }否则，如果sender.state == .changed { 
 设速度= sender.velocity（in：imageView） 
 如果velocity.x> 0 && currentPoint.x> lastPoint.x +灵敏度{ 
  currentIndex = currentIndex> 0吗？  currentIndex-1：images.count-1 
  lastPoint = currentPoint 
  }其他{ 
 如果currentPoint.x <lastPoint.x-敏感性{ 
  currentIndex = currentIndex <images.count-1吗？  currentIndex + 1：0 
  lastPoint = currentPoint 
  } 
  } 
  }

每次currentIndex更改时，我们需要更新imageView图像。 我想在currentIndex didSet方法中做到这一点。 因此，每当currentIndex值更改时，我们就更新imageView的图像。 

  var currentIndex：Int = 0 { 
  didSet { 
  imageView.image = images [currentIndex] 
  } 
  }

初始化

我们快完成了。 现在我们必须通过在图像数组上添加图像并设置初始currentIndex来初始化360产品查看器。 对于本教程，图像源是图像资产，但您也可以从网络获取并将其设置为图像数组。 

 为我在2 ... 65 { 
  images.append（UIImage（named：“ \（i）”）！） 
  } 
  currentIndex = 0

谢谢！！ 😉

希望您喜欢本教程。 如果您有任何疑问，我将很乐意为您提供帮助，如果您有任何反馈，我将不胜感激。 再次感谢您的阅读。 🙂

完整项目：https://github.com/aatish-rajkarnikar/360productview

Interesting Posts