iOS SDWebImage Cross Fade Effect UITableViewCell

Question

This is how i am successfully using SDWebImageManager to download the images:

- (void) downloadThumbnails:(NSURL *) finalUrl
{
    SDWebImageManager *manager = [SDWebImageManager sharedManager];
    [manager downloadWithURL:finalUrl
                     options:0
                    progress:nil
                   completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished) {

                       if (image)
                       {
                           self.thumbnailURL = [finalUrl absoluteString];
                        }
                   }];
}

- (UIImage*)thumbnail {

    if (!self.thumbnailURL) return nil;
    return [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:self.thumbnailURL];
}

How can i modify to have a cross fade effect? Cross Fade Effect is the one that makes the image showing transition slowly just like the TechCrunch iOS App. Thanks!

UPDATE: If i can do anything else to have cross fade effect (other than SDWebImage) in uitableview cell than you can write it in the answer.

UPDATE: I have received few answers after my last update and i am able to solve the problem partially. Using transitionWithView as in the answer below, it is working and cross fading the way i want BUT since i am using a tableivew controller that is loading more entries when it touches the bottom, it refreshes all the cells once before the new block of entries are loaded, how can i prevent this behaviour?

score 4 · Accepted Answer · answered Aug 04 '13 at 20:56

Looks like you are using the SDWebImageManager in a different file that is necessarily not the UITableViewController class. You can use transitionWithView but not with SDWebImageManager directly if its in a different class.

But in your table view controller class where you are using cellForRowAtIndexPath and linking the image with the imageView of UITableViewCell, you can using transitionView as below:

[UIView transitionWithView:cell.(Your Image View)
                          duration:0.5
                           options:UIViewAnimationOptionTransitionCrossDissolve
                        animations:^{

                            cell.(Your ImageView).image = [(how ever you are calling it)];


                        } completion:^(BOOL finished) {
                            //  Optionally you can do anything after the completion
                        }];

Hope this helps!

score 1 · Answer 2 · answered Aug 01 '13 at 15:14

You can use UIView transitionWithView:duration:options:animations:completion: method to cross dissolve image view from old image to the new one like this:

[UIView transitionWithView:imageView
                  duration:0.4
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    //  Set the new image
                    //  Since its done in the animation block, the change will be animated
                    imageView.image = newImage;
                } completion:^(BOOL finished) {
                    //  Do whatever when the animation is finished
                }];

Just use this code in your completed block where you would normally set the image to the imageView

score -1 · Answer 3 · answered Aug 01 '13 at 14:56

please refer to the interface definition:

- (id<SDWebImageOperation>)downloadWithURL:(NSURL *)url
                                   options:(SDWebImageOptions)options
                                  progress:(SDWebImageDownloaderProgressBlock)progressBlock
                                 completed:(SDWebImageCompletedWithFinishedBlock)completedBlock;

there are several value for SDImageOptions and I think this one is what you expected:

/**
 * This flag enables progressive download, the image is displayed progressively during download as a browser would do.
 * By default, the image is only displayed once completely downloaded.
 */
SDWebImageProgressiveDownload = 1 << 3

iOS SDWebImage Cross Fade Effect UITableViewCell

3 Answers3