實現歌詞逐漸變色的動畫,像卡拉OK一樣可以根據時間進度來染色。效果如圖:

因項目需求要實現一個類似歌詞逐漸變色的效果,自己想來想去想不出來實現方案,還是得求助萬能的google,
最終是找到了這篇博客http://www.iwangke.me/2014/10/06/how-to-implement-a-core-animation-based-60-fps-ktv-lyrics-view/,比較完美的解決了這個問題。
這篇博客已經將實現方案及其原理講的很清楚了,只是沒有具體的demo,所以我就把自己的demo放這兒(https://github.com/Phelthas/LXMLyricsLabel),順便總結一下。
首先看需求:
要達到的效果是:原來的文本已經是顯示出來了,然后文本逐漸從左到右逐漸改變顏色。
難點是“逐漸改變顏色”。
博客中給出的解決方案是將兩個除了字體顏色其他屬性都完全一樣的label重疊放在一起,下面的是原來的字體顏色的whiteLabel,上面的是的染色后的greenLabel,然后控制greenLabel逐漸顯示出來。
(博客中提到faceBook的shimmer(https://github.com/facebook/Shimmer) 也是用同樣的實現方式)等有空了仔細研究下
那怎么才能控制greenLabel逐漸顯示出來呢?
這里可不是漸隱漸現,而是從左到右依次顯示出來!
所以就需要用到部分渲染,也就是利用layer的mask屬性。
@property(strong) CALayer *mask;
mask雖然是個layer,但它並不會顯示出來,它是用自己的alpha值來控制原layer內容渲染與否的一個layer。如果mask的alpha值為1,那原layer就會渲染出來,反之,就不會渲染出來,也就不會顯示出來,而是透明的。
而且因為mask是個layer,可以給mask添加CAAnimation,
所以就可以用mask的動畫來讓原layer從左到右逐漸顯示,
只需要給mask添加一個寬度從0到label寬度的動畫就行了。
如果需要控制時間,用keyFrameAnimation就可以滿足需求。
需要注意的是layer不能對frame做動畫,只能對position和bounds做動畫,所以要改變layer的frame,就得考慮position和bounds兩個屬性。這里我們只需要label從左到右渲染,所以可以利用下anchorPoint這個屬性,將anchorPoint設置為(0,0.5)(其默認值是(0.5,0.5)),那改變layer的bounds的時候,它就只會想右邊擴展了。
具體代碼在demo里,這里就不貼了。
有什么問題,歡迎討論。