实现歌词逐渐变色的动画，像卡拉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里，这里就不贴了。

有什么问题，欢迎讨论。