iOS歌詞逐漸變色動畫

2021-07-15 20:54:57 字數 1190 閱讀 5657

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

因專案需求要實現乙個類似歌詞逐漸變色的效果,自己想來想去想不出來實現方案,還是得求助萬能的google,

最終是找到了這篇部落格

比較完美的解決了這個問題。

這篇部落格已經將實現方案及其原理講的很清楚了,只是沒有具體的demo,所以我就把自己的demo放這兒

順便總結一下。

首先看需求:

要達到的效果是:原來的文字已經是顯示出來了,然後文字逐漸從左到右逐漸改變顏色。

難點是「逐漸改變顏色」。

部落格中給出的解決方案是將兩個除了字型顏色其他屬性都完全一樣的label重疊放在一起,下面的是原來的字型顏色的whitelabel,上面的是的染色後的greenlabel,然後控制greenlabel逐漸顯示出來。

(部落格中提到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的時候,它就只會想右邊擴充套件了。

iOS歌詞逐漸變色動畫

實現歌詞逐漸變色的動畫,像卡拉ok一樣可以根據時間進度來染色。效果如圖 因專案需求要實現乙個類似歌詞逐漸變色的效果,自己想來想去想不出來實現方案,還是得求助萬能的google,最終是找到了這篇部落格比較完美的解決了這個問題。這篇部落格已經將實現方案及其原理講的很清楚了,只是沒有具體的demo,所以我...

iOS 漸變色實現,漸變色圓環,圓環進度條

cagradientlayer圖層可以通過設定mask來給檢視新增漸變效果 cagradientlayer主要需要設定一下幾個引數 colors 傳入需要漸變的顏色 例如 self.gradientlayer.colors bridge id uicolor orangecolor cgcolor,...

繪製漸變色

迴圈改變的畫素值,請注意每一行使用乙個顏色。int data new int fontimage.getwidth fontimage.getheight fontimage.getrgb data,0,fontimage.getwidth 0,0,fontimage.getwidth fontim...