先上效果图：
这些图片是在我限制了网速的情况下加载的：
实现效果
思路解析
想到渐变属性的时候，自然而然的想起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
如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。