Bug演示
bug现场.gif
从gif中可以看到我们是想实现这样的效果:
tableViewCell上有图片,有文字、价格等,但是我们现在关心的是图片加载出现时的效果,就是那个图片渐现的动画。
我们先来实现这个动画效果,当然我这里用的是SDWebImage框架来加载网络图片,然后在SD框架中的UIImageView+WebCache.m这个分类的源码里面的这个方法中进行修改:
image.png
image.png
image.png
wself.image = image;
wself.alpha =0.0f;
[UIView transitionWithView:wself duration:0.5 options:UIViewAnimationOptionCurveEaseIn animations:^{
wself.alpha =1.0f;
}];
[wself setNeedsLayout];
或者
wself.image = image;
wself.alpha =0.0f;
[UIView animateWithDuration:0.5 animations:^{
wself.alpha = 1.0f;
}];
[wself setNeedsLayout];
于是这样就会出现如上gif所示的bug了,主线程卡顿,造成tableView滑动不流畅,不跟手,如果不注意的话也许不会发现,但是app使用久了,一定会有注意到这样的问题,十分影响用户的体验,有强迫症的更是分分钟想要卸载。
作为一个注重用户体验的码农来说,这种问题怎么能忍呢?所以我经过分析终于找到解决方案。
先来说说造成问题的原因吧。
问题分析
- UIView的动画属于transition动画,transition动画会另开一个动画线程,然后在主线程中执行,如果此时进行UI操作,会打断动画的执行,比如tableView的reloadData,会让动画卡顿。详见这篇文章;
- 而Core Animation系列是单独开辟的线程执行动画,所以并不会影响主线程的UI响应。
解决方案
既然问题找到了,那么解决起来就简单了。
贴上修改后的代码:
CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
alphaAnimation.fromValue = @0.0f;
alphaAnimation.toValue = @1.0f;
alphaAnimation.duration = 0.5f;
alphaAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[wself.layer addAnimation:alphaAnimation forKey:@""];
[wself setNeedsLayout];
解决后效果
解决效果.gif
是不是顺畅多了呢?当然本人也可能有很多写错的地方,只是为出现遇到同样问题的iOS开发者提供一种解决方案,欢迎指正和知识点纠正!