Hero: UIImageView contentMode animations look broken

[AlexanderTheOkay]

What did you do?

I have a UIImageView in a UICollectionViewCell, set to aspectFill.
I'd like to animate it to a detail page using the same image, with a UIImageView set to aspectFit.

I've played around with some options to try and get this to work, but no luck so far.

What did you expect to happen?

I expected the image to animate smoothly between aspectFill and aspectFit, revealing more of the image as it moved from aspectFill to aspectFit

What happened instead?

Currently, the image in the cell scales up to the frame of the detail page's UIImageView, and fades. But the detail page's image is actually smaller since it's set to aspectFit instead aspectFill.

General Information

• Hero Version: 1.4.0 (latest as of this posting)

• iOS Version(s): 12.1

• Swift Version: 4.2

• Devices/Simulators: iPhone 8

[rmickeyd]

I also ran into this issue. It seems Hero only animates UIImageView properly if the contentMode is the same on both imageViews. I ended up using a work around:

On the DetailPage set the UIImageView contentMode to aspectFill. This way they match. You should know the size of the image that you are setting into the image view. With this size you can calculate what an aspectFit image would look like. Set the UIImageView equal to this size. Basically, you will have aspectFill in both places and the image in the DetailPage will still look the same as if you set it to aspectFit. You may need to use a container view for the image view to make this work properly.

[AlexanderTheOkay]

Solid suggestion. I'll give it a try and report back, thanks!

[AlexanderTheOkay]

I tried the suggestion above, and it looks better, but still not perfect. You can still tell that it's fading between two separate images, even with .forceNoFade.

[rmickeyd]

are you setting the same heroID on the ImageViews? I noticed that if you set the heroID on the imageViews and the collectionViewCell or contentView it could cause that weird fade. I had to make mine just on imageview

[AlexanderTheOkay]

Yeah, the heroID is the same, and they're just on the UIImageView in both cases.

The fade is almost unnoticeable, but in some cases I'm going from a square to a panoramic photo, and the fade becomes really obvious if the aspect ratios are extreme.

[rmickeyd]

can you take a video of what's happening and maybe provide some code?

this is what mine looks like

https://gfycat.com/bothfarflungafricanmolesnake

[AlexanderTheOkay]

That looks amazing! Exactly what I'd like mine to look like. Could you tell me which hero options/modifiers you have set up on each UIImageView? I think that might be where the difference is.

I'll try and get together a video of mine.

[rmickeyd]

I am not using any modifiers or options. I am just setting the same id to the imageView in both view controllers. Hero takes care of the rest.

[AlexanderTheOkay]

I've actually figured out my issue, and it looks like it was on my end after all (due to some collection cell recycling). My image transition is seamless now. Thanks for the help @rmickeyd!

To summarize for anyone in the future who finds this using search:
No hero.modifiers should be needed
Make sure both UIImageView are set to aspectFill
If you'd like to display an image as aspectFit:

• Put your UIImageView in a container view
• Keep the actual UIImageView set to aspectFill
• Calculate the aspectFit rect using AVMakeRect i.e. AVMakeRect(aspectRatio: image.size, insideRect: container.bounds)
• Resize your UIImageView inside the container view appropriately based on your new aspectFit rect