How to remove the effects of UIView transitionWithView

Question

Using the code below I have successfully made my UIImageView fade in its image.

[UIView transitionWithView:myCell.myImageView duration:2.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
    myCell.myImageView.image = myImage;
} completion:NULL];

However, when the cell is reused I need to remove this image. When reused it shows the last image(shown before it was reused) and then transitions into the image it is supposed to be, instead of transitioning from no image into the image it is supposed to be.

What I have tried:

-(void)prepareForReuse {
    [super prepareForReuse];

// More is obviously needed than just setting image to nil when using a transition
self.myImageView.image = nil;

[self.myImageView setNeedsDisplay];

// but I also tried removing all animations
[self.myImageView.layer removeAllAnimations];

// and I even tried removing the sublayers, but still no success.
[self.myImageView.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)];
}

Any help is appreciated, but please don't answer if you don't understand what the issue is. Comment instead so I can explain better if needed.

Thanks!

Answer 1

You could make use of the callback

tableView:didEndDisplayingCell:forRowAtIndexPath:

This is called is just as the cell goes outside the visible area.
Try setting the image to nil or no image over here. Should work.

Answer 2

If you really need to use transitionWithView , then here's how to do it.

First, add the following function to your UITableViewCell class:

-(void)fadeInImage
{
    self.ivPadlock.alpha = 0.0;

    //  Wait a fraction of a second...
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.1 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{

        //  ..then perform the "transitionWithView" on a seperate thread
        [UIView transitionWithView:self.ivPadlock duration:2.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{

            //  Replace our UIImageView's image with an alternative image
            int i = rand()%5;
            switch (i)
            {
                case 0: self.ivPadlock.image = [UIImage imageNamed:@"icnPaperclip.png"]; break;
                case 1: self.ivPadlock.image = [UIImage imageNamed:@"icnSubscribed.png"]; break;
                case 2: self.ivPadlock.image = [UIImage imageNamed:@"icnGroups.png"]; break;
                case 3: self.ivPadlock.image = [UIImage imageNamed:@"icnCross.png"]; break;
                case 4: self.ivPadlock.image = [UIImage imageNamed:@"icnCamera.png"]; break;
            }
            self.ivPadlock.alpha = 1.0;

        } completion:NULL];
    });
}

And then, make sure this function gets called whenever a cell is created or reused:

- (void)awakeFromNib {
    // Initialization code
    [self fadeInImage];
}

-(void)prepareForReuse
{
    [super prepareForReuse];

    [self fadeInImage];
}

Btw, as you're wanting to always transition from "nothing" into your new image, wouldn't it make life easier to just use animateWithDuration to fade an image onto your cell ?

-(void)prepareForReuse
{
    [super prepareForReuse];

    self.ivPadlock.alpha = 0.0;
    self.ivPadlock.hidden = false;

    int i = rand()%5;
    switch (i)
    {
        case 0: self.ivPadlock.image = [UIImage imageNamed:@"icnPaperclip.png"]; break;
        case 1: self.ivPadlock.image = [UIImage imageNamed:@"icnSubscribed.png"]; break;
        case 2: self.ivPadlock.image = [UIImage imageNamed:@"icnGroups.png"]; break;
        case 3: self.ivPadlock.image = [UIImage imageNamed:@"icnCross.png"]; break;
        case 4: self.ivPadlock.image = [UIImage imageNamed:@"icnCamera.png"]; break;
    }

    [UIView animateWithDuration:2.0 animations:^{
        self.ivPadlock.alpha = 1.0;
    }];
}

Hope this helps.

Answer 3

[UIView transitionWithView:myCell.myImageView duration:2.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
    myCell.myImageView.image = myImage;
} completion:^(BOOL finished) {
                        [self.myImageView.layer removeAllAnimations];   
                         }];

In my case, I tried to solve my problem similar with above code. This may solve your problem. A block object(completion) to be executed when the animation sequence ends.

Answer 4

Try this:

-(void)prepareForReuse {
   [super prepareForReuse];

   [CATransaction begin];
   [self.myImageView.layer removeAllAnimations];
   self.myImageView.image = nil;
   [CATransaction commit];

}

Answer 5

Thank you for trying, but none of the answers fixes the problem. I have also tried combinations of the different answers. Also, none of them satisfy "Looking for an answer drawing from credible and/or official sources.". I have contacted Apple Developer Technical Support and will edit this answer when I get a response from them so that it will help others as well.

Answer 6

1. Try using [self.myImageView.image setNeedsDisplay]; after you have set the image to nil
2. You need not remove the sublayers
3. Before you show the animation, as a worst case, you could force the image view to nil with an selector call from 'Cell for row at indexpath'

I want to comment, but lost my old login and answering instead :)

edit ----------------- latest update below

So I retried emulating the bug in my code, below are steps followed 1. Use default tableview and try to fade in its own imageview (available at cell.imageView) 2. Any no. of combinations with [UIView transitionWithView..] didn't help my case. Instead I set the image (with no transitions) in [cellForRowatIndexPath] and used below fade in code only in [willDisplayCell forRowAtIndexPath]

cell.imageView.alpha = 0;
[UIView beginAnimations:@"fade in" context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDuration:2.0];
cell.imageView.alpha = 1.0;
[UIView commitAnimations];

and it worked fine. Can you try this once, might work for you.