- 思路來源
- 網(wǎng)易云音樂 按住屏幕分享歌詞
- 下圖紅色區(qū)域內(nèi)的文字
網(wǎng)易云音樂
- 解決思路分析
- 仔細(xì)觀察可以發(fā)現(xiàn)金屬光澤其實就是一個白條
當(dāng)然這個白條并不只是純白 是水平方向上從透明度為0 的白到透明度為1 再到透明度為0 的漸變圖層 CAGradientLayer - 初步確定解決方案為再View上添加一個漸變圖層毅贮，然后做水平方向上的動畫
- 仔細(xì)觀察可以發(fā)現(xiàn)金屬光澤其實就是一個白條
-
初步實現(xiàn)效果
初步效果 - 效果分析
- 不難發(fā)現(xiàn)其實我們需要的只是圖中文字輪廓部分需要有白色的漸變動畫
怎樣才能實現(xiàn)只在文字輪廓顯示白色漸變呢
- 接下來我們講講圖層中的mask ,利用它我們就可以解決上面的問題了
- 先看看效果
優(yōu)化效果
- mask圖層工作原理:
- 根據(jù)透明度進行裁剪菱父，只保留非透明部分革屠，顯示底部內(nèi)容。
- 根據(jù)mask的工作原理 我們可以拿一個有文字但沒有背景色的label來當(dāng)做mask圖層宽涌，這樣其實顯示的內(nèi)容就不是label， 而是被label文字裁剪只顯示文字部分的背景顏色蝶棋，這樣就可以把白色漸變圖層添加到主圖層然后用label裁剪就能解決上面的問題了
- 有一點需要注意的是：如果用文字圖層裁剪漸變層卸亮，文字圖層就不在擁有顯示功能，這個圖層就被弄來裁剪了玩裙，不會顯示
- 完善金屬光澤
- 為白色漸變圖層添加水平方向上的動畫
核心動畫 幀動畫 CAKeyframeAnimation
- 為白色漸變圖層添加水平方向上的動畫
