CAGradientLayer配合遮罩层实现iPhone锁屏文字效果

首先，我们来分解一下iPhone锁屏文字动画效果是怎样实现的：

iPhone锁屏效果.gif

1.首先我们要做一个CAGradientLayer,如下图

第一步.png

2.然后，让这个CAGradientLayer像下面这样动起来

第二步.gif

3.最后，给这个CAGradientLayer加个遮罩层，这个遮罩层用文字来做，最终达到我们想要实现的效果。

往下所有代码全部由swift 3实现.

---

下面，我们来实现一下，这里是初始工程,当然，你也可以自己新建一个工程，新建一个类继承自UIView,然后在Storyboard里面拖拽一个UIView跟它关联即可。

1.首先，我们来实现第一步，添加一个CAGradientLayer

打开AnimateView.swift，添加以下代码，关于CAGradientLayer的基本知识，可以参考CAGradientLayer最简使用

    let grandientLayer: CAGradientLayer = {
        let grandientLayer = CAGradientLayer()
        grandientLayer.colors = [
            UIColor.darkGray().cgColor,
            UIColor.white().cgColor,
            UIColor.darkGray().cgColor
        ]
        grandientLayer.locations = [0.0, 0.5, 1.0]
        grandientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
        grandientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
        return grandientLayer
    }()
    
    override func layoutSubviews() {
        super.layoutSubviews()
        grandientLayer.frame = bounds
    }
    
    override func didMoveToWindow() {
        super.didMoveToWindow()
        
        layer.addSublayer(grandientLayer)
    }

执行结果如下：

Simulator Screen Shot 2016年8月10日 下午1.57.51.png

2.给grandientLayer添加一个动画，让它像步骤二那样动起来

在didMoveToWindow()的最后添加一下代码

let animate = CABasicAnimation(keyPath: "locations")
animate.fromValue = [0.0, 0.0, 0.2]
animate.toValue = [0.8,1.0, 1.0]
animate.duration = 2.5
animate.repeatCount = Float.infinity
grandientLayer.add(animate, forKey: nil)

这里通过改变grandientLayer的locations来达到渐变颜色移动的效果。
执行结果如下：

执行结果.gif

3.最后，来实现文字层遮罩

声明一个text变量，@IBInspectable表示可以直接在storyboard中进行配置该属性。（如下图所示）

@IBInspectable var text: String!

let textAttributes : NSDictionary = {
        let style = NSMutableParagraphStyle()
        style.alignment = .center
        
        return [
            NSFontAttributeName:  UIFont(name: "Verdana-Italic", size: 28.0)!,
            NSParagraphStyleAttributeName: style
        ]
    }()

可配置属性.png

在layoutSubviews()的最后添加以下代码

UIGraphicsBeginImageContextWithOptions(bounds.size, false, 0.0)
let nsstringText = text as NSString
nsstringText.draw(in: bounds, withAttributes: textAttributes as? [String : AnyObject])
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
        
let maskLayer = CALayer()
maskLayer.frame = bounds
maskLayer.contents = image?.cgImage
grandientLayer.mask = maskLayer

执行结果如下：

执行结果.gif

最终的demo工程可以从这里下载最终工程