iOS 跑马灯左右两边渐变效果

项目需要实现这样跑马灯渐变效果

渐变效果图.gif

跑马灯效果大家都比较熟悉，这里主要说一下，左右两边渐变效果的实现方案。

一.CALayer的mask属性 - 遮罩

很明显这种效果是通过CALayer的mask属性来实现的。

-mask是CALayer的一个属性，本身也是一个CALayer类型，有和其他图层一样的绘制和布局属性。它类似于一个子图层，但它又不是一个普通的子图层，不同于那些绘制在父图层中的子图层，mask图层定义了父图层的部分可见区域。

• mask图层的Color属性是无关紧要的，真正重要的是图层的轮廓。mask属性就像一个饼干切割机，mask图层实心的部分会被保留下来，其他的则会被抛弃。

如果mask图层比父图层要小，只有在mask图层里面的内容才是它关心的，除此以外的一切都会被隐藏起来。

如图所示:

15686206360178.jpg

图片引用自:CALayer之mask属性-遮罩

二.渐变效果

从效果图我们可以看出，渐变效果(CAGradientLayer)是设置左右两边渐变中间不透明的CAGradientLayer，该layer可以加在跑马灯(label)的mask上面，也可以将跑马灯和渐变效果(CAGradientLayer)放到一个容器view里面，然后将渐变效果加在容器view的mask上。

主要代码:

    self.shadowViewLayer.frame = self.bounds;
    self.shadowViewLayer.colors =@[(id)kRGBColorAlpha(0, 0, 0, 0.3).CGColor, (id)kRGBColorAlpha(0, 0, 0, 1.0).CGColor, (id)kRGBColorAlpha(0, 0, 0, 1.0).CGColor, (id)kRGBColorAlpha(0, 0, 0, 0.3).CGColor];
    self.shadowViewLayer.startPoint = CGPointMake(0, 0);
    self.shadowViewLayer.endPoint = CGPointMake(1, 0);
    self.shadowViewLayer.locations = @[@(0.0f), @(0.3f),@(0.7f), @(1.0f)];
    self.layer.mask = self.shadowViewLayer;

以上主要是日常工作里的记录，具体详见Demo。

三.最后

如果大家有什么疑问或者意见向左的地方，欢迎大家留言讨论。