CAGradientLayer实现"滑动来解锁"动画效果

新建一个应用名为GradientAnimation，打开Main.storyboard，将ViewController的View背景色设置为灰黑色，拖一个UIView到ViewController中，将其颜色设置为无色并设置好布局约束：

 

接着我们拖一个UILabel到刚才拖入的UIView中，设置高宽等同于它的父视图：

 

我对该UILabel的属性设置如下：

 

之后，我们在ViewController中添加UIView和UILabel的Outlet：

 

接下来回到ViewController.swift，我们添加一个常量属性gradientLayer：

[cpp]  view plain copy

1. let gradientLayer = CAGradientLayer()  

这里出现了CALayer的另一个子类CAGradientLayer，这个类的作用就是能在Layer上绘制出渐变颜色的效果，然后在viewDidLoad()中添加如下代码：

[cpp]  view plain copy

1. gradientLayer.bounds = CGRect(x: 0, y: 0, width: backgroundView.frame.size.width, height: backgroundView.frame.size.height)  
2. gradientLayer.position = CGPoint(x: backgroundView.frame.size.width/2, y: backgroundView.frame.size.height/2)  

上述两行的代码是设置Layer的大小及位置，这在上两篇文章中已经讲过，这里就不再累赘了。接着我们继续添加两行代码：

[cpp]  view plain copy

1. gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)  
2. gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)  

既然CAGradientLayer可以绘制出渐变颜色的效果，那自然有颜色渐变的方向，所以这两行代码的作用就是设置颜色渐变的起始点和结束点，这两个属性共同决定了颜色渐变的方向：

 

从上面的示意图中可以看出，CAGradientLayer是通过起始点和结束点的坐标位置来决定颜色渐变的方向的，起始点的默认值是(0.5, 0)，结束点的默认值是(0.5, 1)，也就是说默认的颜色渐变方向是沿垂直中线从上往下渐变的，我们在这里将它改成了沿水平中线从左往右渐变。

接下来我们设置CAGradientLayer的渐变颜色，接着添加如下代码：

[cpp]  view plain copy

1. gradientLayer.colors = [  
2.     UIColor.blackColor().CGColor,  
3.     UIColor.whiteColor().CGColor,  
4.     UIColor.blackColor().CGColor  
5. ]  

CAGradientLayer的colors属性类型是一个数组[AnyObject]，这就意味着我们可以实现多个颜色的渐变效果，并且可以规定各个颜色的顺序。不过在我们这个示例中我们只需要两种颜色，不过需要注意的是虽然颜色只有两种，但是整个颜色渐变的过程中有三个原色点，那就是黑、白、黑，所以我们在这个数组中也需要按照原色点的数量和顺序添加相应的颜色，哪怕颜色都是一样的。

我们既然设置了渐变的三个原色，那么就要对这原色出现的位置进行设置，接着添加如下代码：

[cpp]  view plain copy

1. gradientLayer.locations = [0.2, 0.5, 0.8]  

从上述代码中不难看出，我们将第一个黑色原色出现的位置设置在了整个Layer长度的十分之二的位置，第二个白色原色在中间，第三个黑色原色在十分之八的位置：

 

设置完CAGradientLayer的相关属性后，我们将gradientLayer添加到backgroundView的Layer中：

[cpp]  view plain copy

1. backgroundView.layer.addSublayer(gradientLayer)  

现在我们编译运行一下代码看看效果：

接下来我们需要让颜色渐变动起来，先创建一个方法gradinetAnimate()，在方法中添加如下代码：

[cpp]  view plain copy

1. let gradient = CABasicAnimation(keyPath: "locations")  
2. gradient.fromValue = [0, 0, 0.25]  
3. gradient.toValue = [0.75, 1, 1]  
4. gradient.duration = 2.5  
5. gradient.repeatCount = HUGE  
6. gradientLayer.addAnimation(gradient, forKey: nil)  

首先，创建了一个locations类型的动画实例gradient，将fromValue属性，也就是起始位置的属性设置为[0, 0, 0.25]，它的意思是动画开始前，黑色、白色这两个原色的位置在整个Layer的最前端，第二个黑色原色在0.25的位置：

 

而结束位置toValue，将白色和第二个黑色原色位置设置在整个Layer的末端，第一个黑色原色在0.75的位置：

 

从图中可以看出，此时整个Layer都变成了黑色。也就是说，在整个动画中，第一个黑色原色从0移动到0.75的位置，白色原色从0移动到1的位置，第二个黑色原色从0.25移动到1的位置。然后设置动画时间为2.5秒，无线重复次数，最后将gradient动画添加到gradientLayer中。我们在viewDidAppear()方法中调用该动画方法gradientAnimate()，编译运行看看效果：

 

动画效果还不赖，但是如何将颜色渐变的动画作用在UILabel的文字上呢？其实非常简单，就是让UILabel上的文字称为CAGradientLayer的遮罩即可，我们先在ViewController中定义一个常量：

[cpp]  view plain copy

1. var text = "DevTalking"  

然后在viewDidAppear()中的gradientAnimate()方法之前添加如下代码：

[cpp]  view plain copy

1. textLabel.text = text  
2. gradientLayer.mask = textLabel.layer  

我们再编译运行代码看看效果：

 

到目前为止，锁屏中滑动来解锁的动画效果就完成了，这个动画效果在Facebook的Paper应用中也有使用。