ios - 原生骨架屏之加入豆瓣動畫

前言

骨架屏的使用文檔你能夠在使用文檔中找到， 考慮到文章篇幅問題，因此另寫一篇文章。

前幾天有一位羣友加入到TABAnimated骨架屏交流羣， 提到了豆瓣客戶端的動畫，固然還提出了其餘的想法， 做者去調研了一下，發現確實值得嘗試。

這次動畫的實現，羣友作出了突出貢獻， TABAnimated期待更多開發者合做維護這個項目。

基於羣友的動畫思路，我在其動畫邏輯上進行了修改。 雖說不敢保證100%類似，可是能達到96.28%的類似度。 另外，豆瓣客戶端的全部骨架效果，用本框架均可以輕鬆實現。 由於工做量的緣由，demo中就隨便拿了原來的cell改了改，以作演示。

效果圖

由於gif展現能力有限，想要體驗更好的效果能夠下載demo 嘗試。

這個效果基於2.0.3改版過的框架，也比較容易實現， 能夠說只是添加了幾個參數，幾個函數。

增長內容

一. 新增全局初始化方法

使用該初始化方法，工程中全部動畫都會默認設置爲豆瓣動畫。

本文再次強調優先級： tabAnimated的superAnimationType > 全局的animatedType

[[TABAnimated sharedAnimated] initWithDropAnimated];
複製代碼

二. 新增屬性

dropAnimationDuration：墜落幀時長，你能夠理解爲墜落速度 dropAnimationDeepColor：變色的顏色值

與此同時： tabAnimated中也新增了上面兩個屬性

再次強調優先級： tabAnimated > 全局

由於動畫元素個數的緣由，dropAnimationDuration對於不一樣的視圖，須要用的頻率要高

三. 新增鏈式語法，重點

1. dropIndex(xxx)：意思是變色的下標設置， 通常地，若是你不進行設置，那麼框架會以視圖加入到view的順序進行設置，固然這樣遠遠不能知足需求。

好比：

這個效果中前3個動畫元素是一塊兒變色的，且都是第一個變色，即變色下標是0， 若是按照框架默認設置，那麼他們的變色下標分別是0，1，2， 很明顯不知足需求。

這個時候，你就要經過**dropIndex(xxx)**設置了， 框架提供有2種方式：

view.animations(0,3).dropIndex(0);
複製代碼

view.animation(0).dropIndex(0);
view.animation(1).dropIndex(0);
view.animation(2).dropIndex(0);
複製代碼

2. 多行文本元素再次說明

本文再次強調: 框架的全部骨架都是基於你原視圖進行映射的， 若是你的view是UILabel,同時numberOfLines不是1，那麼會被框架認爲是多行文本， 此時，涉及到2個鏈式語法 lines(xxx), 意思是修改紅框內的行數 space(xxx), 意思是修改紅框內的間距

固然，若是一個普通的元素也能夠經過設置，達到一樣的效果，聽明白了沒有？？？

到此爲止，還僅僅是老的內容，以防有些小朋友沒用過，不理解。

基於這樣的特殊性， **dropFromIndex(xxx)**應運而生，意思是指，紅框內的三行元素，從下標xxx開始變色

具體點：view.animation(xxx).lines(3).dropFromIndex(3); 意思是：紅框內的三行元素，第一個的變色下標爲3，第二個的變色下標爲4，第三個變色下標爲5。

3. removeOnDrop(): 是指該動畫元素不但願參與變色
4. dropStayTime(xxx): 變色停留時間比，默認0.2
5. lastScale(xxx)：最後一行的寬度比例，默認0.5

注：

• 以上屬性均有2種方式，數組和單個元素
• 若是你修改了一個元素的變色下標，大機率全部元素的下標都要從新設置，框架在該版本沒有加入自動調整下標的邏輯

其餘

通過本人和其餘用戶在工程中的應用，這次更新也修復了一些小bug。

最後：

• 感謝相遇，感謝使用，若是您以爲不錯能夠在github上點個star
• 若有使用問題，優化建議等，加入交流羣：304543771
• github地址：github.com/tigerAndBul…