先上效果图：
这些图片是在我限制了网速的情况下加载的：
实现效果
思路解析
想到渐变属性的时候，自然而然的想起catransition这个类
先看整体的实现代码：
首先找到uiimageview+webcache.m这个文件中的- (void)sd_setimagewithurl:(nsurl *)url placeholderimage:(uiimage *)placeholder options:(sdwebimageoptions)options progress:(sdwebimagedownloaderprogressblock)progressblock completed:(sdwebimagecompletionblock)completedblock这个函数（大约在44行处）
修改成这个样子
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
- (void)sd_setimagewithurl:(nsurl *)url placeholderimage:(uiimage *)placeholder options:(sdwebimageoptions)options progress:(sdwebimagedownloaderprogressblock)progressblock completed:(sdwebimagecompletionblock)completedblock { [self sd_cancelcurrentimageload]; objc_setassociatedobject(self, &imageurlkey, url, objc_association_retain_nonatomic); if (!(options & sdwebimagedelayplaceholder)) { dispatch_main_async_safe(^{ self.image = placeholder; }); } if (url) { // check if activityview is enabled or not if ([self showactivityindicatorview]) { [self addactivityindicator]; } __weak __typeof(self)wself = self; id <sdwebimageoperation> operation = [sdwebimagemanager.sharedmanager downloadimagewithurl:url options:options progress:progressblock completed:^(uiimage *image, nserror *error, sdimagecachetype cachetype, bool finished, nsurl *imageurl) { [wself removeactivityindicator]; if (!wself) return; dispatch_main_sync_safe(^{ if (!wself) return; if (image && (options & sdwebimageavoidautosetimage) && completedblock) { completedblock(image, error, cachetype, url); return; } else if (image) { catransition *animation = [catransition animation]; animation.duration = .85f; animation.type = kcatransitionfade; animation.removedoncompletion = yes; [wself.layer addanimation:animation forkey:@"transition"]; wself.image = image; [wself setneedslayout]; } else { if ((options & sdwebimagedelayplaceholder)) { wself.image = placeholder; [wself setneedslayout]; } } if (completedblock && finished) { completedblock(image, error, cachetype, url); } }); }]; [self.layer removeanimationforkey:@"transition"]; [self sd_setimageloadoperation:operation forkey:@"uiimageviewimageload"]; } else { dispatch_main_async_safe(^{ [self removeactivityindicator]; if (completedblock) { nserror *error = [nserror errorwithdomain:sdwebimageerrordomain code:-1 userinfo:@{nslocalizeddescriptionkey : @"trying to load a nil url"}]; completedblock(nil, error, sdimagecachetypenone, url); } }); }} |
在大约30行处添加
|
1
2
3
4
5
|
catransition *animation = [catransition animation];animation.duration = .85f;animation.type = kcatransitionfade;animation.removedoncompletion = yes;[wself.layer addanimation:animation forkey:@"transition"]; |
不需要过多解释kcatransitionfade意思是 交叉淡化过渡
这个 type 还有几个兄弟：
- kcatransitionfade //交叉淡化过渡
- kcatransitionmovein //移动覆盖原图
- kcatransitionpush //新视图将旧视图推出去
- kcatransitionreveal //底部显出来
因为我们的需求是渐变嘛，所以就使用kcatransitionfade
注意啦
一定要在下载图片的这个block结束后，把animation去掉[self.layer removeanimationforkey:@"transition"]; 。
为什么呢，如果你不去掉，在cell复用的时候，会出现加载重复的情况呢。/坏笑 不信的话，你别加呀。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://www.jianshu.com/p/86144f040f3d
