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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,076評論 25 708
  • 醫院外三個科住進了三個受傷的病人。 他們受的傷有些相似,都是椎體壓縮性骨折,住到了同一家醫院的同一病室。他們受傷的...
    li成林閱讀 493評論 3 4
  • 如果說石頭從小欺負賴可是一種惡習的話,那么小寶從小到大被石頭、賴可和我欺負就是我們仨的特殊愛好了。其實我們三個小時...
    黑狗小白閱讀 1,035評論 0 0
  • 信息來源:wind陸家嘴早餐/一張圖研報/羅博白蔡燉資管/蔡行之友金融服務平臺/未名宏觀研究 1.基本面+海外 ◆...
    阿泰想自由閱讀 259評論 0 0