Cross-Dissolve UIImage in UITableViewCell or UICollectionViewCell

Question

I have a UICollectionView that has Cells that contain ImageViews in them. After downloading the images that I want to display in the cell I'd like to cross-dissolve my image with the placeholder image that's already inside the cell.

Everything works as expected, but as sonn as I start reusing the CollectionViews I start seeing strange things.

The setting of my placeholder image (which is done without the animation) is getting ignored.
And the image that it's than fading out of is the last image visible (in an other cell) after I make a reload of the collection/table view.

I am currently doing it with the following code:

weakSelf.image = placeholderImage;
[UIView transitionWithView:weakSelf
                  duration:5.0f
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                     weakSelf.image = image;
              } completion:nil];

but it makes no difference if I do it like that...

weakSelf.image = placeholderImage;
CATransition  *transition = [CATransition animation];
[transition setType:kCATransitionFade];
transition.duration = 5.0;
[weakSelf.layer addAnimation:transition
                      forKey:@"fade"];
weakSelf.image = image;

Is it some caching problem of the UIViews presentationLayer? Is there anything I can do to have my fading in in UICollectionViews or UITableViews?

EDIT:

I uploaded a little sample project demonstrating the problem... https://dl.dropboxusercontent.com/u/809469/ImageTransition.zip

If you run the Demo-App and hit the reload button on the top right you can see that the images are fading from some random other image. I would think that the fade would be between the same image again... And also the self.imageView.image = nil; is somehow ignored?!?!

the problem is almost certainly in your cellForRowAtIndexPath: method (or in your prepareForReuse method if you're subclassing.). Please post those portions of your code. — Aaron Brager, Feb 25 '14 at 13:07
I am doing nothing in the `prepareForReuse:` method. It's even not implemented... But even if I'd set the image to the placeholder image in there, it doesn't care. — Georg, Feb 25 '14 at 13:14

score 0 · Answer 1 · answered Feb 25 '14 at 13:20

You can use [UIView animateWithDuration:] like this and avoid all the complexity:

weakSelf.image = placeholderImage;
[UIView animateWithDuration:5.0f animations:^{
    weakSelf.alpha=0.0f;

} completion:^(BOOL finished) {
    weakSelf.image = image;
    [UIView animateWithDuration:5.0f animations:^{
        weakSelf.alpha=1.0f;

    }];
}];

don't forget to set weakSelf.alpha=1.0f; and weakSelf.image = placeholderImage; in prepareForReuse:

Cross-Dissolve UIImage in UITableViewCell or UICollectionViewCell

1 Answers1