iOS开发之tableView滚动时因为cell上图片渐现动画造成的卡顿问题

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使用久了，一定会有注意到这样的问题，十分影响用户的体验，有强迫症的更是分分钟想要卸载。

作为一个注重用户体验的码农来说，这种问题怎么能忍呢？所以我经过分析终于找到解决方案。

先来说说造成问题的原因吧。

问题分析

1. UIView的动画属于transition动画，transition动画会另开一个动画线程，然后在主线程中执行，如果此时进行UI操作，会打断动画的执行，比如tableView的reloadData，会让动画卡顿。详见这篇文章；
2. 而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开发者提供一种解决方案，欢迎指正和知识点纠正！