Home animating transition of photo using UIViewControllerContextTransitioning initially compresses original image before animating into place
Reply: 0

animating transition of photo using UIViewControllerContextTransitioning initially compresses original image before animating into place

user2738 Published in June 21, 2018, 4:38 am

I am trying to create a transition when the user selects an image in a tableViewCell to another viewController displaying the image.

However, I want the image selected to appear in a particular UIImageView frame in the new viewController that will show the image.

I am using the following method in my animator to display the transition. Everything works fine however, the image initially compresses and then expands during the transition to fall into it's new place. Rather than maintaining it's original size and growing slightly to fall into place.

It seems the original compression of the image is caused by the new entire view fitting inside the original image frame and then expanding to place. The transition works fine if the image will take up the entire view it is transitioning to but that's not the case here and really not sure how to solve this. Is there a way to set the final frame to a particular frame of a view within the destination viewController rather than the entire view?

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {

    let containerView = transitionContext.containerView

    var toView = UIView()
    if presenting {
        toView = transitionContext.view(forKey: UITransitionContextViewKey.to)!


    let imageView = presenting ? toView : transitionContext.view(forKey: UITransitionContextViewKey.from)!
    let initialFrame = presenting ? originFrame : imageView.frame
    let finalFrame = presenting ? imageView.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 {
        imageView.transform = scaleTransform
        imageView.center = CGPoint(x: initialFrame.midX, y: initialFrame.midY)
        imageView.clipsToBounds = true

    //imageView.clipsToBounds = true

    containerView.bringSubview(toFront: imageView)

    UIView.animate(withDuration: duration, delay: 0.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 0.0, options: [], animations: { () -> Void in
        imageView.transform = self.presenting ? CGAffineTransform.identity : scaleTransform
        imageView.center = CGPoint(x: finalFrame.midX, y: finalFrame.midY)
    }, completion: { (bool: Bool) -> Void in
        if !self.presenting {

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.306671 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO