How do I do custom transition like in the below example?

Question

Here is the example. example

I want to learn how logo in the example moves VC1 to VC2 here. Can you make a simple example? İt would be anything.

Please, do not recommend me third party.

Answer 1

I wrote a blog post some time ago about how to make custom transitions and animations although this is more like a guide for the App Store it could be used for any type of transition animation.

https://medium.com/@eric.dockery283/custom-view-transitions-like-the-new-app-store-a2a1181229b6

Things to look into would be UIViewControllerAnimatedTransitioning

In summary you will need 2 view controllers your login view controller and your end state view controller for the animation. You will use UIViewControllerAnimatedTransitioning to handle the transition from one view controller to another. My example is:

import UIKit
class TransitionAnimator: NSObject, UIViewControllerAnimatedTransitioning {
  let durationExpanding = 0.75
  let durationClosing = 0.5
  var presenting = true
  var originFrame = CGRect.zero
  var dismissCompletion: (()->Void)?
  func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
   if presenting {
    return durationExpanding
   }
   return durationClosing
  }
  func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
   let containerView = transitionContext.containerView
   guard let toView = transitionContext.view(forKey: .to), let detailView = presenting ? toView: transitionContext.view(forKey: .from) else {
      return
   }
   let initialFrame = presenting ? originFrame : detailView.frame
   let finalFrame = presenting ? detailView.frame : originFrame
   let xScaleFactor = presenting ? initialFrame.width / finalFrame.width : finalFrame.width / initialFrame.width
   let yScaleFactor = presenting ? initialFrame.height / finalFrame.height : finalFrame.height / initialFrame.height
   let scaleTransform = CGAffineTransform(scaleX: xScaleFactor,
y: yScaleFactor)
   if presenting {
     detailView.transform = scaleTransform
     detailView.center = CGPoint( x: initialFrame.midX, y: initialFrame.midY)
     detailView.clipsToBounds = true
   }
   containerView.addSubview(toView)
   containerView.bringSubview(toFront: detailView)
   if presenting {
    //update opening animation
    UIView.animate(withDuration: durationExpanding, delay:0.0,
usingSpringWithDamping: 1.0, initialSpringVelocity: 0.0, //gives it some bounce to make the transition look neater than if you have defaults
    animations: {
        detailView.transform = CGAffineTransform.identity
        detailView.center = CGPoint(x: finalFrame.midX, y: finalFrame.midY)
},
    completion:{_ in
        transitionContext.completeTransition(true)
   }
   )
} else {
//update closing animation
     UIView.animate(withDuration: durationClosing, delay:0.0, options: .curveLinear,
      animations: {
       detailView.transform = scaleTransform
       detailView.center = CGPoint(x: finalFrame.midX, y: finalFrame.midY)
},
  completion:{_ in
    if !self.presenting {
      self.dismissCompletion?()
     }
     transitionContext.completeTransition(true)
   }
  )
  }
 }
}

You will need to set up your transitioning delegate in your login view controller:

extension ViewController: UIViewControllerTransitioningDelegate {
   func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
     guard let originFrame = selectedCell.superview?.convert(selectedCell.frame, to: nil) else {
      return transition
     }
    transition.originFrame = originFrame
    transition.presenting = true
    selectedCell.isHidden = true
    return transition
  }
    func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
       transition.presenting = false
       return transition
    }
}

This should allow you to customize your views/animations the way that you need.

Another helpful link: https://www.raywenderlich.com/146692/ios-animation-tutorial-custom-view-controller-presentation-transitions-2