Images Cropped/Sized by Content Mode Animate Incorrectly

[bcapps]

Images used in the transition animation do not reflect the cropped/resized state of the image within their image views. Instead, they show the image resized to the size of the containing image view, ignoring the aspect ratio and providing a very strange transition.

To test, switch out the image in the sample project with one that is much taller than it is wide. Set a content mode of aspect fill on the image view. Slow down the transition and see how the original image in the transition is now the full image, resized down to the containing image view size, with incorrect aspect ratios. It looks pretty funky.

[bcapps]

Here's an action shot of the transition in 1.0.1 as an example :

[cdzombak]

This isn't caused by #116; I just followed @bcapps' instructions (image taller than it is wide, and image view with content mode = aspect-fill) and reproduced consistent results on current develop (6cf8991), v1.0.0, and v0.1.2.

develop

1.0.0

0.1.2

@bcapps, this is what you're seeing, right? (A gif is worth a thousand pictures.)

[bcapps]

Yup!

[cdzombak]

I wonder what a "correct" animation looks like here.

[bcapps]

I also narrowed it down to this line in the transition animator. It assumes that the heights of the images should be used to scale the initial transform, but for content modes that end in "Fill," it should be using the width. You'll notice that changing the height retrieval to CGRectGetWidth with the new image and fill mode provides a more desirable animation.

[bcapps]

One potential solution that I haven't fully tested yet, then, would be to check the contentMode for both the ending and starting views for animation and if it's AspectFill or ScaleToFill, use the width instead.

[djbe]

@bcapps I just tried your solution and it works for me. Example code:

    CGFloat endingViewInitialTransform = 1;
    switch (self.startingView.contentMode) {
        case UIViewContentModeScaleAspectFill:
        case UIViewContentModeScaleToFill:
            endingViewInitialTransform = CGRectGetWidth(startingViewForAnimation.frame) / CGRectGetWidth(endingViewForAnimation.frame);
            break;
        default:
            endingViewInitialTransform = CGRectGetHeight(startingViewForAnimation.frame) / CGRectGetHeight(endingViewForAnimation.frame);
    }

The thing is, it's still not perfect. Beyond the zoom and fade animations, there should also be a frame animation. It's hard to explain, but this is a good example: https://github.com/recruit-mp/RMPZoomTransitionAnimator

As a suggestion, maybe switch to that library for the animation, or at least use it's animation code for inspiration?

[shinoys222]

@djbe This commit doesn't seem to fix the issue.

[chlebta]

Having same issue, image are cropped!