SDWebImage图片下载完成后渐进显示动画

大部分APP在图片下载完成后都有一个渐进显示的动画，本文讲下在不动SDWebImage代码的前提下，怎么给下载完成后的图片加上渐进显示的动画，这是最终的效果：

2017-02-12 22_53_44.gif

一般情况下，我们都会写一个UIImageView的category来处理图片下载，代码如下：

- (void)setWithImageURL:(NSString *)imageURL placeholder:(UIImage *)placeholder completion:(void (^)(UIImage *))completion
{
        [self sd_setImageWithURL:[NSURL URLWithString:imageURL]
                placeholderImage:placeholder
                       completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
                               // handle downloaded image
                           }
                       }];
        
}

在completed回调中，我们可以获取到下载完成的image，图片的缓存类型。回调完成后，不做任何处理的话，那么下载完的图片会直接加载到UIImageView上。这样对于用户来讲会比较生硬，给图片加上一个渐进显示的动画效果会好很多。

要实现这个效果，我们会用到CATransition这个类，CATransition是CAAnimation的一个子类，CATransition的官方定义是An object that provides an animated transition between a layer's states. You can transition between a layer's states by creating and adding a CATransition object to it. 就是说我们可以通过CATransition来转换layer的状态，那么想实现渐进显示的动画效果，我们只需要加一个CATransition到UIImageView对象上。

那么CATransition都有哪些transition的种类呢？看一下官方文档，总共有4种：

• kCATransitionFade
• kCATransitionMoveIn
• kCATransitionPush
• kCATransitionReveal

第一种kCATransitionFade的解释是The layer’s content fades as it becomes visible or hidden.，看上去正是我们需要的transition type。通过一个CATransition使得图片加载由hidden变成visible状态时有一个渐进显示的动画效果。

完整代码如下：

[self sd_setImageWithURL:[NSURL URLWithString:imageURL]
        placeholderImage:placeholder
               completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
                   if (image && cacheType == SDImageCacheTypeNone) {
                       CATransition *transition = [CATransition animation];
                       transition.type = kCATransitionFade;
                       transition.duration = 0.3;
                       transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
                       [weakself.layer addAnimation:transition forKey:nil];
                   }
               }];

转载请注明出处，原文地址：http://kobedai.me/p9rsts-5o/