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開發者提供一種解決方案，歡迎指正和知識點糾正！
