KTV歌词逐字显示实现

@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的时候,它就只会想右边扩展了。

参考资料-LXMLyricsLabel

参考资料-Shimmer

未完待续

你可能感兴趣的:(KTV歌词逐字显示实现)