带有NSLayoutConstraint的iOS动画，采用Swift 4和Xcode 10

大家好，我已经在Swift 4中使用NSLayoutConstraint尝试了一些简单的iOS动画。这是动画，

您可以在此处找到视频教程-Swift Dynamics

让我们进入代码。 请从此处下载入门应用程序。 入门应用程序在中心包含两个UIView和一个imageView。

首先，我将打开Main.storyboard并为Main.storyboard添加height和width约束。 之后，添加horizontal和vertical约束。

现在，我们将为top Orange view添加约束。 我在0处添加了前导，尾随和顶部约束。

将bottom约束添加到imageView's垂直间距。

现在，为第二个视图添加行trailing和bottom约束。

将顶部约束添加到imageView's垂直间距。

打开assistant Editor并为imageView创建一个引用。

为imageView的vertical约束创建一个引用。

打开ViewController.swift并创建另外两个变量

  var minHeight：CGFloat = 0.0 
  var viewCenter：CGFloat = 0.0 

minHeight是我们可以垂直滚动到的最大值（顶部或底部）。 viewCenter是视图的中心。

这里的要点是限制平移手势只能在垂直方向上移动。 因此，我将编写UIPanGestureRecognizer的扩展。在UIPanGestureRecognizer ，我们将覆盖touchsMoved(_ touches: _ event: )函数。 每次我们拖动imageView时都会调用此方法。 在此函数内，我们必须计算阻力的velocity 。 从速度中我们可以检查运动是horizontal运动还是vertical运动。 如果velocity.x值大于velocity.y值，那么我们将取消运动。 这是最终代码，

 类PanDirectionGestureRecognizer：UIPanGestureRecognizer { 


  init（目标：AnyObject，操作：选择器）{ 
  super.init（target：target，action：action） 
  } 

 覆盖func touchesMoved（_ touches：Set ，事件：UIEvent）{ 
  super.touchesMoved（触摸，带有：事件） 
 如果状态==。开始{ 
 令vel =速度（in：view） 
 如果abs（vel.x）> abs（vel.y）{ 
 状态=取消 
  } 
  } 
  } 
  } 

现在，我将创建一个panGesture对象并添加到panGesture 。

  let pangest = PanDirectionGestureRecognizer（target：self，action：#selector（ViewController.panAction（panrecogniser :)）） 

  imageViewButton.addGestureRecognizer（pangest） 

我们必须计算minHeight和viewCenter值。

  viewCenter = self.view.frame.height / 2 
  minHeight = viewCenter-60 

让我们运行该应用程序，看看惊人的动画。

在此处找到完整的代码-github 。 如果您喜欢我的帖子并想获取将来的更新，请单击👏👏👏，在中 和 此处关注我。 快乐编码 💪