13

I've been using SDWebImage on my iPhone app to handle all of the image loading. I am using a placeholder image, and I want to crossfade or fade in the new image once it loads. I am using a success block to set the image, and it is working great. No matter what I try, the image will not fade in though. I've tried sending the animation code back to the main thread, but that didn't help either. It just loads instantly... No animation.

Here is my code. Any thoughts?

// load placeholder image
NSURL *url = ...
_imageView = [[UIImageView alloc] init];
[_imageView setImage:[UIImage imageNamed:@"loading.jpg"]];

// request image
SDWebImageManager *manager = [SDWebImageManager sharedManager];
[manager downloadWithURL:url
                delegate:self
                 options:0
                 success:^(UIImage *image) {

                     [UIView transitionWithView:_imageView
                                       duration:3.0
                                        options:UIViewAnimationOptionTransitionCrossDissolve
                                     animations:^{
                                         [_imageView setImage:image];
                                     } completion:NULL];

}
failure:nil];

8 Answers 8

19

You could set the imageView.alpha to 0 right before the animation block, then in the animation block have it animate back to imageView.alpha = 1.0;

// load placeholder image
NSURL *url = ...
_imageView = [[UIImageView alloc] init];
[_imageView setImage:[UIImage imageNamed:@"loading.jpg"]];

// request image
SDWebImageManager *manager = [SDWebImageManager sharedManager];
[manager downloadWithURL:url
            delegate:self
             options:0
             success:^(UIImage *image, BOOL cached) {

                  imageView.alpha = 0.0;
                 [UIView transitionWithView:_imageView
                                   duration:3.0
                                    options:UIViewAnimationOptionTransitionCrossDissolve
                                 animations:^{
                                     [_imageView setImage:image];
                                      imageView.alpha = 1.0;
                                 } completion:NULL];

}
failure:nil];
1
  • See my answer below, SDWebImage now offers APIs for transitions.
    – ray
    Jul 31, 2018 at 17:13
12

SDWebImage now offers a built-in fade transition as of 4.3.0.

imageView.sd_imageTransition = SDWebImageTransition.fadeTransition;
imageView.sd_setImage(with: ...)

See the documentation here, you can perform more complex transitions using their API.

https://github.com/rs/SDWebImage/wiki/Advanced-Usage#image-transition-430

0
10

For SWIFT, i created this extension. It only fades in, when the image actually had to be downloaded from the web. If it was served from the cache, then it won't fade.

import UIKit
import SDWebImage

extension UIImageView {

    public func sd_setImageWithURLWithFade(url: NSURL!, placeholderImage placeholder: UIImage!)
    {        self.sd_setImageWithURL(url, placeholderImage: placeholder) { (image, error, cacheType, url) -> Void in

        if let downLoadedImage = image
        {
            if cacheType == .None
            {
                self.alpha = 0
                UIView.transitionWithView(self, duration: 0.2, options: UIViewAnimationOptions.TransitionCrossDissolve, animations: { () -> Void in
                    self.image = downLoadedImage
                    self.alpha = 1
                    }, completion: nil)

            }
        }
        else
        {
            self.image = placeholder
        }
        }
    }
}
6

Here is the code which help me out and working great.

photoImageView.sd_imageTransition = .fade
photoImageView.sd_setImage(with: URL(string: imageUrl), completed: nil)
2

This is Swift 4 version of @Zoltan Varadi answer:

extension UIImageView {
    public func sd_setImageWithURLWithFade(url: URL!, placeholderImage placeholder: UIImage!) {
        self.sd_setImage(with: url, placeholderImage: placeholder) { (image, error, cacheType, url) -> Void in
            if let downLoadedImage = image {
                if cacheType == .none {
                    self.alpha = 0
                    UIView.transition(with: self, duration: 0.3, options: UIViewAnimationOptions.transitionCrossDissolve, animations: { () -> Void in
                        self.image = downLoadedImage
                        self.alpha = 1
                    }, completion: nil)   
                }
            } else {
                self.image = placeholder
            }
        }
    }
}

I changed the duration to 0.3

You can add this function to the extension in order you need the completionHandler block:

public func sd_setImageWithURLWithFade(url: URL!, placeholderImage placeholder: UIImage!, comple: @escaping (Bool)->()) {
    self.sd_setImage(with: url, placeholderImage: placeholder, options: .allowInvalidSSLCertificates) { (image, error, cacheType, url) in
        if let downLoadedImage = image {
            if cacheType == .none {
                self.alpha = 0
                UIView.transition(with: self, duration: 0.3, options: UIViewAnimationOptions.transitionCrossDissolve, animations: { () -> Void in
                    self.image = downLoadedImage
                    self.alpha = 1
                }, completion: { _ in
                    comple(true)
                })
            }
        } else {
            self.image = placeholder
        }
    }
}
1

SWIFT:

func setSDWebImageWithAnimation(imageViewToSet mImageView:UIImageView, URLToSet imageURL:NSURL!)
    {
        mImageView.image = UIImage(named: "favouritePlaceholder")
        SDWebImageManager.sharedManager().downloadImageWithURL(imageURL, options: nil, progress: nil) { (downloadedImage:UIImage!, error:NSError!, cacheType:SDImageCacheType, isDownloaded:Bool, withURL:NSURL!) -> Void in
            mImageView.alpha = 0
            UIView.transitionWithView(mImageView, duration: 1.0, options: UIViewAnimationOptions.TransitionCrossDissolve, animations: { () -> Void in
                mImageView.image = downloadedImage
                mImageView.alpha = 1
                }, completion: nil)

        }
    }
3
  • This solution is not trying to load the image from the cache. It's going to redownload the every image over and over again. Apr 1, 2016 at 21:14
  • @ZoltanVaradi what is the recommended solution then? Jun 2, 2021 at 6:31
  • @RajuyourPepe, this: stackoverflow.com/a/50369386 Jun 3, 2021 at 7:41
1

Try out this:

[self.myImage sd_setImageWithURL:storyThumbnailURL placeholderImage:[UIImage imageNamed:@"xyz"] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
    if (cacheType == SDImageCacheTypeNone) {
        self.myImage.alpha = 0;
        [UIView animateWithDuration:0.3 animations:^{
            self.myImage.alpha = 1;
        }];
    } else {
        self.myImage.alpha = 1;
    }
}];
0

This extension code worked better for me.

extension UIImageView {
  public func setImageWithFadeFromURL(url: NSURL, placeholderImage placeholder: UIImage? = nil, animationDuration: Double = 0.3) {
     self.sd_setImageWithURL(url, placeholderImage: placeholder) { (fetchedImage, error, cacheType, url) in
        if error != nil {
            print("Error loading Image from URL: \(url)\n(error?.localizedDescription)")
        }

        self.alpha = 0
        self.image = fetchedImage
        UIView.transitionWithView(self, duration: (cacheType == .None ? animationDuration : 0), options: .TransitionCrossDissolve, animations: { () -> Void in
            self.alpha = 1
        }, completion: nil)
    }
  }

  public func cancelImageLoad() {
    self.sd_cancelCurrentImageLoad()
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.