歌詞動畫,動畫片歌詞
實現歌詞逐漸層色的動畫,像卡拉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裡,這裡就不貼了。有什麼問題,歡迎討論。