先上效果图：
这些图片是在我限制了网速的情况下加载的：
实现效果
思路解析
想到渐变属性的时候，自然而然的想起catransition这个类
先看整体的实现代码：
首先找到uiimageview+webcache.m这个文件中的- (void)sd_setimagewithurl:(nsurl *)url placeholderimage:(uiimage *)placeholder options:(sdwebimageoptions)options progress:(sdwebimagedownloaderprogressblock)progressblock completed:(sdwebimagecompletionblock)completedblock这个函数（大约在44行处）
修改成这个样子
我要评论
- (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行处添加
catransition *animation = [catransition animation];
animation.duration = .85f;
animation.type = kcatransitionfade;
animation.removedoncompletion = yes;
[wself.layer addanimation:animation forkey:@"transition"];
不需要过多解释kcatransitionfade意思是 交叉淡化过渡
这个 type 还有几个兄弟：
因为我们的需求是渐变嘛，所以就使用kcatransitionfade
注意啦
一定要在下载图片的这个block结束后，把animation去掉[self.layer removeanimationforkey:@"transition"]; 。
为什么呢，如果你不去掉，在cell复用的时候，会出现加载重复的情况呢。/坏笑 不信的话，你别加呀。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
网友评论