iOS注水动画效果以及歌词逐渐变色效果

正好了解到mask属性，于是就想起了当时学习Flash的时候做的遮罩效果，于是突发奇想，用它实现一些动画效果。

Mask是什么：

如果会PS的同学也许已经发现了，这不就是图层蒙版嘛。

注水动画的实现：

原理：

工具粗糙，表达能力有限，也只能做出这样的图了。实现注水动画就是这个原理，图片A和图片B分别是同样轮廓不同色值的图片，保证图片B在图片A上，然后再为图片B设置蒙版，蒙版与图片B重合的部分将显示图片B的内容，假如蒙版与图片B没有重合，那么图片B则不显示。所以我们先设置图片AB相同的Frame，然后为B设置蒙版，蒙版的初始位置与b不重合，之后慢慢重合一点点显示B，视觉效果上就好似是慢慢的变色。

废话少说直接上代码

UIImageView *imageBlackLine = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    imageBlackLine.image = [UIImage imageNamed:@"line.png"];
    [self.view addSubview:imageBlackLine];
    
    UIImageView *imageGreenLine = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    imageGreenLine.image = [UIImage imageNamed:@"line_green.png"];
//    imageGreenLine.layer.zPosition = 1;
    [self.view addSubview:imageGreenLine];
    
    UIView *maskView = [[UIView alloc]initWithFrame:CGRectMake(-100, 0, 100, 100)];
    maskView.backgroundColor = [UIColor yellowColor];
    //    maskView.alpha = 0.5;
    
    [UIView animateWithDuration:1 animations:^{
        maskView.frame = CGRectMake(0, 0, 100, 100);
    }];
    
    imageGreenLine.layer.mask = maskView.layer;

效果是这样的慢慢的被绿色填充，当然，我们还可以设置多个mask，不同形状的mask来实现不同的效果，这个就要根据需求来操作了

这里需要注意一下maskview的位置是以它所蒙版的图层左上角为起始的。

那么来实现歌词吧。开始我是这样写的，

然而我就懵逼了，并没有用。于是只有采用上面的老办法了，把文字画成图片吧。

至于绘制文本的例子我就不写了，反正实现的原理跟上面是一样的。可以使用

NSString或者Quartz2D来把文字画成图片，画完之后就跟上面一样的操作了。效果是这样的

加油吧，少年。