先上效果图：
这些图片是在我限制了网速的情况下加载的：
实现效果
思路解析
想到渐变属性的时候，自然而然的想起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