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