大部分APP在圖片下載完成后都有一個漸進顯示的動畫，本文講下在不動SDWebImage代碼的前提下，怎么給下載完成后的圖片加上漸進顯示的動畫，這是最終的效果：
一般情況下，我們都會寫一個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回調(diào)中，我們可以獲取到下載完成的image，圖片的緩存類型?；卣{(diào)完成后，不做任何處理的話，那么下載完的圖片會直接加載到UIImageView上。這樣對于用戶來講會比較生硬，給圖片加上一個漸進顯示的動畫效果會好很多。
要實現(xiàn)這個效果，我們會用到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來轉(zhuǎn)換layer的狀態(tài)，那么想實現(xiàn)漸進顯示的動畫效果，我們只需要加一個CATransition到UIImageView對象上。
那么CATransition都有哪些transition的種類呢？看一下官方文檔，總共有4種：
kCATransitionFadekCATransitionMoveInkCATransitionPushkCATransitionReveal
第一種kCATransitionFade的解釋是The layer’s content fades as it becomes visible or hidden.，看上去正是我們需要的transition type。通過一個CATransition使得圖片加載由hidden變成visible狀態(tài)時有一個漸進顯示的動畫效果。
完整代碼如下：
[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];
}
}];
轉(zhuǎn)載請注明出處，原文地址：http://kobedai.me/p9rsts-5o/
