Animate image change of UIImageView when having an UIVisualEffectView above

Question

My problem is as follows:

An UIImageView 's view is going to be changed with an animation, like this:

[UIView transitionWithView:_backgroundArtworkImageView
                  duration:ANIMATION_DURATION
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    _backgroundArtworkImageView.image = blurredImage;
                }
                completion:nil];

It works perfectly fine as long as I don't have an UIVisualEffectView over the image view. If using the blur view on top, it results in no animation at all.

I've looked around for a bit and seen that snapshots of views could be something to look into, which also seems to be what Apple uses internally on iOS, for example when bringing up the app switcher; I'm not really sure how exactly to approach it though.

Answer 1

Got it working by taking a snapshot, append it to the superview, hide the real view, change it without animation and then fade the real view in with animation.

__block UIView *snapshot = [_backgroundArtworkImageView snapshotViewAfterScreenUpdates:NO];
[_artworkContainer insertSubview:snapshot belowSubview:_backgroundArtworkImageView];
_backgroundArtworkImageView.alpha = 0.0f;
_backgroundArtworkImageView.image = blurredImage;

[UIView transitionWithView:_artworkContainer
                  duration:ANIMATION_DURATION
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    _backgroundArtworkImageView.alpha = 1.0f;
                }
                completion:^(BOOL _) {
                    [snapshot removeFromSuperview];
                    snapshot = nil;
                }];

Edit: I realized that the blur view was taking a small time to update, but to solve that a new snapshot of the resulting view could be taken and then animated with.