iOS歌词渐变的实现

测试通过UIView动画动态改变UILabel的frame可以实现。

此次使用渲染的方式：

（1）建立两层Label，除文字颜色外其他属性同。

// 底层白色歌词
_behindLabel = [[UILabel alloc]initWithFrame:CGRectMake(10, 100, WIDTH - 20, 60)];
_behindLabel.text = @"你必须竭尽全力,才能看起来毫不费力。";
_behindLabel.font = [UIFont systemFontOfSize:18.0];
_behindLabel.backgroundColor = [UIColor clearColor];
_behindLabel.textColor = [UIColor whiteColor];
_behindLabel.textAlignment = NSTextAlignmentCenter;
[self.view addSubview:_behindLabel];

// 上层绿色歌词
_frontLabel = [[UILabel alloc]initWithFrame:CGRectMake(10, 100, WIDTH - 20, 60)];
_frontLabel.text = @"你必须竭尽全力,才能看起来毫不费力。";
_frontLabel.font = [UIFont systemFontOfSize:18.0];
_frontLabel.backgroundColor = [UIColor clearColor];
_frontLabel.textColor = [UIColor orangeColor];
_frontLabel.textAlignment = NSTextAlignmentCenter;
[self.view addSubview:_frontLabel];

（2）设置layer属性。

// 设置渲染
_layer = [CALayer layer];
// 设置渐变方向,默认情况下只渲染1/2，若y为1,则水平渲染1/2
_layer.anchorPoint = CGPointMake(0, 0.5);
// 30为Label高度的1/2
_layer.position = CGPointMake(0, 30);
// 初始值,高度为Label高度,其他均为零
_layer.bounds = CGRectMake(0, 0, 0, 60);
_layer.backgroundColor = [UIColor whiteColor].CGColor;

// 此处要同时渲染歌词Label和其SubView,单纯Label无动画效果,单纯sub无上曾文字显示也无效果
_frontLabel.layer.mask = _layer;
self.layer = _layer;

（3）设置关键帧动画,渲染法实现歌词渐变关键。

// 添加关键帧动画
// 此处的KeyPath 必须为bounds.size.width 否则无效果
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"bounds.size.width"];
animation.values = @[@(0),@(355)];
animation.keyTimes = @[@(0),@(1)];
animation.duration = 3.5;
animation.calculationMode = kCAAnimationLinear;
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
// 此处关键帧需要添加在sub上
[self.layer addAnimation:animation forKey:@"Animation"];

（4）接下来尝试歌词Lrc文件的解析,放在下期。

（5）最终完成效果如图示。