用SDWebImage渐变加载图片

用SDWebImage渐变加载图片

使用

使用请详细查看源码，只需要给定一个图片地址以及一个placeHolder图片（非必须）即可。

效果

源码

https://github.com/YouXianMing/UI-Component-Collection 中的 SDWebImageViewPlaceHorder

//
//  PlaceholderImageView.h
//  SDWebImageViewPlaceHorder
//
//  Created by YouXianMing on 16/8/19.
//  Copyright © 2016年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface PlaceholderImageView : UIView

/**
 *  Picture's url string.
 */
@property (nonatomic, strong) NSString *urlString;

/**
 *  The placeholder's image.
 */
@property (nonatomic, strong) UIImage  *placeholderImage;

/**
 *  Default is UIViewContentModeScaleAspectFill.
 */
@property (nonatomic) UIViewContentMode placeholderImageContentMode;

/**
 *  Default is UIViewContentModeScaleAspectFill.
 */
@property (nonatomic) UIViewContentMode contentImageContentMode;

/**
 PlaceholderImageView's constractor.

 @param frame The Frame.
 @param image The placeholderImage.
 @return The PlaceholderImageView's instancetype.
 */
+ (instancetype)placeholderImageViewWithFrame:(CGRect)frame placeholderImage:(UIImage *)image;

@end

//
//  PlaceholderImageView.m
//  SDWebImageViewPlaceHorder
//
//  Created by YouXianMing on 16/8/19.
//  Copyright © 2016年 YouXianMing. All rights reserved.
//

#import "PlaceholderImageView.h"
#import "UIImageView+WebCache.h"

@interface PlaceholderImageView ()

@property (nonatomic, strong) UIImageView *placeHoderImageView;
@property (nonatomic, strong) UIImageView *contentImageView;
@property (nonatomic, strong) NSString    *pUrlString;

@end

@implementation PlaceholderImageView

- (void)layoutSubviews {

    [super layoutSubviews];
    self.placeHoderImageView.frame = self.bounds;
    self.contentImageView.frame    = self.bounds;
}

- (instancetype)initWithFrame:(CGRect)frame {

    if (self = [super initWithFrame:frame]) {

        self.layer.masksToBounds = YES;

        self.placeHoderImageView = [[UIImageView alloc] initWithFrame:self.bounds];
        self.contentImageView    = [[UIImageView alloc] initWithFrame:self.bounds];

        [self addSubview:self.placeHoderImageView];
        [self addSubview:self.contentImageView];

        self.contentImageContentMode     = UIViewContentModeScaleAspectFill;
        self.placeholderImageContentMode = UIViewContentModeScaleAspectFill;
    }

    return self;
}

+ (instancetype)placeholderImageViewWithFrame:(CGRect)frame placeholderImage:(UIImage *)image {

    PlaceholderImageView *placeHolderImageView = [[PlaceholderImageView alloc] initWithFrame:frame];
    placeHolderImageView.placeholderImage      = image;

    return placeHolderImageView;
}

#pragma mark - Setter & Getter.

- (void)setPlaceholderImage:(UIImage *)placeholderImage {

    _placeHoderImageView.image = placeholderImage;
}

- (UIImage *)placeholderImage {

    return _placeHoderImageView.image;
}

- (void)setUrlString:(NSString *)urlString {

    _pUrlString             = urlString;
    _contentImageView.alpha = .f;

    NSURL *url = [NSURL URLWithString:urlString];
    [_contentImageView sd_setImageWithURL:url completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {

        if (image) {

            // Image load from disk or download from network.
            if (cacheType == SDImageCacheTypeNone || cacheType == SDImageCacheTypeDisk) {

                [UIView animateWithDuration:0.5f animations:^{

                    _contentImageView.alpha = .f;
                }];

            } else {

                _contentImageView.alpha = .f;
            }
        }
    }];
}

- (NSString *)urlString {

    return _pUrlString;
}

- (void)setPlaceholderImageContentMode:(UIViewContentMode)placeholderImageContentMode {

    _placeHoderImageView.contentMode = placeholderImageContentMode;
}

- (UIViewContentMode)placeholderImageContentMode {

    return _placeHoderImageView.contentMode;
}

- (void)setContentImageContentMode:(UIViewContentMode)contentImageContentMode {

    _contentImageView.contentMode = contentImageContentMode;
}

- (UIViewContentMode)contentImageContentMode {

    return _contentImageView.contentMode;
}

@end