麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 學院 > 開發(fā)設計 > 正文

iOS歌詞逐漸變色動畫

2019-11-14 18:20:53
字體:
來源:轉載
供稿:網友

實現(xiàn)歌詞逐漸變色的動畫,像卡拉OK一樣可以根據時間進度來染色。效果如圖:
 
因項目需求要實現(xiàn)一個類似歌詞逐漸變色的效果,自己想來想去想不出來實現(xiàn)方案,還是得求助萬能的google,
最終是找到了這篇博客http://www.iwangke.me/2014/10/06/how-to-implement-a-core-animation-based-60-fps-ktv-lyrics-view/,比較完美的解決了這個問題。
這篇博客已經將實現(xiàn)方案及其原理講的很清楚了,只是沒有具體的demo,所以我就把自己的demo放這兒(https://github.com/Phelthas/LxmlyricsLabel),順便總結一下。
 
首先看需求:
要達到的效果是:原來的文本已經是顯示出來了,然后文本逐漸從左到右逐漸改變顏色。
難點是“逐漸改變顏色”。
 
博客中給出的解決方案是將兩個除了字體顏色其他屬性都完全一樣的label重疊放在一起,下面的是原來的字體顏色的whiteLabel,上面的是的染色后的greenLabel,然后控制greenLabel逐漸顯示出來。
(博客中提到faceBook的shimmer(https://github.com/facebook/Shimmer) 也是用同樣的實現(xiàn)方式)等有空了仔細研究下
 
那怎么才能控制greenLabel逐漸顯示出來呢?
這里可不是漸隱漸現(xiàn),而是從左到右依次顯示出來!
所以就需要用到部分渲染,也就是利用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里,這里就不貼了。
有什么問題,歡迎討論。 

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 99这里精品 | 国产精品久久久乱弄 | 777zyz色资源站在线观看 | japanese javhd| 日韩精品中文字幕在线播放 | 免费午夜网站 | 一级黄色大片在线观看 | 久久99精品久久久久久青青日本 | 欧美精品一区二区久久 | 伊人999| 亚洲第一页夜 | 久久精品中文字幕一区二区 | 成人三级电影网址 | 欧美精品a∨在线观看不卡 午夜精品影院 | 亚洲第一页夜 | 国产成人高潮免费观看精品 | 日韩a毛片免费观看 | aaaaaaa毛片| 爽妇网国产精品 | 中文字幕h | 久久国产不卡 | 久久久av亚洲男天堂 | 精品国产1区2区3区 免费国产 | av在线播放网址 | 成人毛片100免费观看 | 久久精品网址 | 久久精品一区二区三区国产主播 | 国产精品www| 天堂精品久久 | 国产精品一区在线观看 | 国产亚洲精品久久久久久久久 | 青青草在线免费观看 | 国产免费一区二区三区 | 久久精品黄 | 特一级毛片 | 在线看日本| 国产精品自拍99 | 日韩欧美中文字幕视频 | 黄色一级片毛片 | 欧美日本亚洲视频 | 日韩毛片在线看 |