ios – Find out how to Precisely Replicate Instagram’s Customized Transition in UIKit

I got here throughout this article by Instagram and tried to recreate their fluid navigation transition utilizing UIViewControllerAnimatedTransitioning. I’ve learn varied examples and have grasp of how customized transitions typically function.

The Problem

To make clear, let’s check with the next screenshots from Instagram:

Keyframe 1	Keyframe 2	Keyframe 3

The objective is to have the sq. picture from fromVC overlay onto the imageView in toVC, aligning the 2 photos precisely. Observe that it ought to work whatever the side ratio of toVC.imageView. On the identical time, windowView ought to increase, revealing toVC till it reaches its closing body, leading to a pleasant fluid transition.

My Try

My preliminary try did not obtain the specified impact—toVC neither scales nor expands from the middle (which is apparent as a result of I did not implement any dealing with for such circumstances). It simply slides in from the appropriate. This difficulty appears associated to the auto format of the snapshot view, which I have never resolved.

My Code

non-public func performPresentTransition(utilizing context: UIViewControllerContextTransitioning) {
    let containerView = context.containerView
    guard let fromVC = context.viewController(forKey: .from) as? ViewController,
          let originFrame,
          let toVC = context.viewController(forKey: .to) as? UINavigationController,
          let detailVC = toVC.topViewController as? PhotoDetailViewController
    else {
        return
    }
    guard let snapshot = toVC.view.snapshotView(afterScreenUpdates: true)
    else {
        return
    }

    let finalFrame = context.finalFrame(for: toVC)

    let windowView = UIView()
    containerView.addSubview(windowView)
    windowView.backgroundColor = .crimson
    windowView.layer.cornerRadius = 0
    windowView.clipsToBounds = true
    windowView.body = originFrame

    windowView.addSubview(snapshot)
    snapshot.snp.makeConstraints { make in
        make.edges.equalToSuperview()
    }

    containerView.addSubview(toVC.view)
    toVC.view.isHidden = true

    snapshot.alpha = 0

    UIView.animate(withDuration: transitionDuration(utilizing: context)) {
        snapshot.alpha = 1
        windowView.body = finalFrame
        windowView.layer.cornerRadius = 30
    } completion: { _ in
        toVC.view.isHidden = false
        windowView.removeFromSuperview()
        context.completeTransition(!context.transitionWasCancelled)
    }

}

I would wish to know the way to set the constraints to exactly mimic the habits in the actual app.

Additionally, any recommendations for replicating this Instagram animation are welcome. I would favor to not use third-party libraries.