I am trying to create a custom pop transition similar to what snapchat has where when you swipe down on a story the view begins to shrink and the previous view controller can be seen in the background.
I don't need it to be that fancy, a shrinking circle is all I want. I have managed to create a custom push transition that "zooms out" the view controller to be pushed, so to speak, from this tutorial. And to pop I basically just want to reverse it. My code for the custom push animation is essentially this:
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")
}
I can also pop in the same way, but I want a masking circle that zooms in, not out...
So far I have tried to invert the mask, similar to this (stackoverflow /questions/14411765/ios-invert-mask-in-drawrect) and this (stackoverflow /questions/16512761/calayer-with-transparent-hole-in-it), but I cannot for the life of me get it to work right.
This github project seems to have something like what I want, but I haven't been able to recreate what he did. This star wars project (github /Yalantis/StarWars.iOS) also seems to do something similar to what I want (going from Darth Vader back to Anakin) but I think it uses screenshots which isn't really what I want to do.
Also, it would be super cool if I could get the transition to follow the user's finger and regardless of where they lift up the transition continues instead of just jumping to complete, which is what the example from raywenderlich does.
Sorry for the weird links, I don't have enough reputation yet to put more than 2 links in.
I would greatly appreciate anyone's help or input!!!
tl;dr: snapchat-like pop transition when you swipe down on a snap story.
