iOS 自定义弹出过渡 - 就像在 snapchat 故事上向下滑动

Posted 2023-03-13

【中文标题】iOS 自定义弹出过渡 - 就像在 snapchat 故事上向下滑动

【英文标题】：iOS Custom pop transition - like swiping down on snapchat story

【发布时间】：2016-01-25 04:50:15

【问题描述】：

我正在尝试创建类似于 snapchat 的自定义弹出过渡，当您向下滑动故事时，视图开始缩小，并且可以在背景中看到前一个视图控制器。

我不需要它那么花哨，我想要的只是一个缩小的圆圈。我已经设法创建了一个自定义推送转换，可以“缩小”要推送的视图控制器，可以这么说，从this tutorial。要流行，我基本上只是想扭转它。我的自定义推送动画代码基本上是这样的：

  func animateTransition(transitionContext: UIViewControllerContextTransitioning) 

  //1
  self.transitionContext = transitionContext

  //2
  var containerView = transitionContext.containerView()
  var fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) as! ViewController
  var toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey) as! ViewController
  var button = fromViewController.button

  //3
  containerView.addSubview(toViewController.view)

  //4
  var circleMaskPathInitial = UIBezierPath(ovalInRect: button.frame)
  var extremePoint = CGPoint(x: button.center.x - 0, y: button.center.y - CGRectGetHeight(toViewController.view.bounds))
  var radius = sqrt((extremePoint.x*extremePoint.x) + (extremePoint.y*extremePoint.y))
  var circleMaskPathFinal = UIBezierPath(ovalInRect: CGRectInset(button.frame, -radius, -radius))

  //5
  var maskLayer = CAShapeLayer()
  maskLayer.path = circleMaskPathFinal.CGPath
  toViewController.view.layer.mask = maskLayer

  //6
  var maskLayerAnimation = CABasicAnimation(keyPath: "path")
  maskLayerAnimation.fromValue = circleMaskPathInitial.CGPath
  maskLayerAnimation.toValue = circleMaskPathFinal.CGPath
  maskLayerAnimation.duration = self.transitionDuration(transitionContext)
  maskLayerAnimation.delegate = self
  maskLayer.addAnimation(maskLayerAnimation, forKey: "path")

我也可以以同样的方式弹出，但我想要一个放大而不是缩小的遮罩圈...

到目前为止，我已尝试反转掩码，类似于此（*** /questions/14411765/ios-invert-mask-in-drawrect）和此（*** /questions/16512761/calayer-with-transparent-hole- in-it)，但我一辈子都无法让它正常工作。

Thisgithub 项目似乎有我想要的东西，但我无法重现他所做的。这个星球大战项目（github /Yalantis/StarWars.iOS）似乎也做了一些类似于我想要的事情（从 Darth Vader 回到 Anakin），但我认为它使用的屏幕截图并不是我真正想做的。

另外，如果我可以让过渡跟随用户的手指并且无论他们从哪里抬起过渡都会继续，而不是仅仅跳到完成，这就是 raywenderlich 的示例所做的。

对不起，奇怪的链接，我还没有足够的声誉来放置超过 2 个链接。

非常感谢任何人的帮助或意见！！！

tl;dr：当您在快照故事上向下滑动时，类似于 snapchat 的弹出过渡。

【参考方案1】：

我刚刚创建了一个示例项目，用于使用圆形遮罩以交互方式向下拖动以关闭视图控制器。检查此github 以获取示例项目。

【讨论】：

哇，太酷了，谢谢！我最终让它以类似的方式工作，尽管我喜欢你的随着它的缩小而褪色