iOS自定义流行转换 - 就像在浏览Snapchat故事一样

时间:2016-01-25 04:50:16

标签: ios swift uiviewcontroller snapchat

我正在尝试创建一个类似于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")
}

我也可以用同样的方式弹出,但我想要一个放大的遮蔽圆,而不是... ...

到目前为止,我试图反转掩码,类似于此(stackoverflow / questions / 14411765 / ios-invert-mask-in-drawrect)和this(stackoverflow / questions / 16512761 / calayer-with-transparent-hole- in-it),但我不能为我的生活让它正常工作。

This github项目似乎有类似我想要的东西,但我无法重现他的所作所为。这个星球大战项目(github /Yalantis/StarWars.iOS)似乎也做了类似于我想要的事情(从Darth Vader回到Anakin),但我认为它使用截图并不是我想要做的。< / p>

此外,如果我能够按照用户的手指进行转换并且无论他们在何处举起过渡继续而不是仅仅跳转到完成,那将是非常酷的,这就是来自raywenderlich的例子。

很抱歉这些奇怪的链接,我还没有足够的声誉来放置超过2个链接。

我非常感谢任何人的帮助或输入!!!

tl; dr:当您在快照故事中向下滑动时,类似于类似于流行音乐的过渡。

1 个答案:

答案 0 :(得分:4)

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

enter image description here