Swift - CAGradientLayer渐变动画的实现1（渐变特效、动态光泽文字）

2017-09-07 发布：hangge 阅读：4368

在之前的文章中我简单地介绍了 CAGradientLayer 的使用。CAGradientLayer 对象最主要就是如下4个属性：

colors：颜色数组，定义渐变层的各个颜色。
locations（可选）：决定每个渐变颜色的终止位置，这些值必须是递增的，数组的长度和 colors 的长度最好一致。
startPoint（可选）：渲染的起始位置，默认值是：[.5,0]。
endPoint（可选）：渲染的终止位置，默认值是：[.5,1]。

而且这 4 个属性都是可以进行动画的。本文演示它们如何结合 CABasicAnimation 实现各种渐变动画效果。

一、colors 变化动画

1，效果图

每次点击一下屏幕，背景渐变色就会切换成下一组，同时颜色在改变过程中还会有动画效果。

2，样例代码

import UIKit

class ViewController: UIViewController, CAAnimationDelegate {
    
    //共三组渐变色
    let colorsSet = [
        [UIColor.yellow.cgColor, UIColor.orange.cgColor],
        [UIColor.cyan.cgColor, UIColor.green.cgColor],
        [UIColor.magenta.cgColor, UIColor.blue.cgColor],
    ]
    
    //当前渐变色索引
    var currentIndex = 0
    
    //渐变层
    var gradientLayer:CAGradientLayer!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //单击监听
        let tapSingle=UITapGestureRecognizer(target:self,action:#selector(tapSingleDid))
        tapSingle.numberOfTapsRequired = 1
        tapSingle.numberOfTouchesRequired = 1
        self.view.addGestureRecognizer(tapSingle)

        //创建CAGradientLayer对象
        gradientLayer = CAGradientLayer()
        //设置初始渐变色
        gradientLayer.colors = colorsSet[0]
        //每种颜色所在的位置
        gradientLayer.locations = [0.0, 1.0]
        
        //设置其CAGradientLayer对象的frame，并插入view的layer
        gradientLayer.frame = self.view.frame
        self.view.layer.insertSublayer(gradientLayer, at: 0)
    }
    
    func tapSingleDid(){
        //下一组渐变色索引
        var nextIndex = currentIndex + 1
        if nextIndex >= colorsSet.count {
            nextIndex = 0
        }
        
        //添加渐变动画
        let colorChangeAnimation = CABasicAnimation(keyPath: "colors")
        colorChangeAnimation.delegate = self
        colorChangeAnimation.duration = 2.0
        colorChangeAnimation.fromValue = colorsSet[currentIndex]
        colorChangeAnimation.toValue = colorsSet[nextIndex]
        colorChangeAnimation.fillMode = kCAFillModeForwards
        //动画结束后保持最终的效果
        colorChangeAnimation.isRemovedOnCompletion = false
        gradientLayer.add(colorChangeAnimation, forKey: "colorChange")
        
        //动画播放后改变当前索引值
        currentIndex = nextIndex
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

二、locations 变化动画

1，效果图

（1）下面实现一个动态光泽效果，类似苹果手机过去滑动解锁文字的效果。

（2）文字从左到右会有光泽闪过。闪到最右侧时，又从左侧开始重复播放动画。

2，实现方式

（1）CAGradientLayer 从左到右使用黑、白、黑渐变。

（2）动画通过改变 CAGradientLayer 的 locations，从而实现白色部分从左向右移动。

（3）最后将 UILabel 上的文字作为 CAGradientLayer 的遮罩即可，看起来就像是文字会有动态光泽效果。

3，实现步骤

（1）首先在 StroyBoard 中添加一个 UIView（后面会将渐变层添加到这个 view 里面）。设置好位置约束，并在代码中添加 @IBOutlet 关联。

（2）接着在刚才添加的 UIView 中添加一个 UILabel。设置好位置约束，并在代码中添加 @IBOutlet 关联。

（3）主视图控制器完整代码如下：

import UIKit

class ViewController: UIViewController {
    
    //文本标签
    @IBOutlet weak var label: UILabel!
    
    //文本标签背景
    @IBOutlet weak var labelBg: UIView!
    
    //渐变层
    var gradientLayer:CAGradientLayer!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //将主视图背景设置为灰色
        self.view.backgroundColor = UIColor.darkGray
        
        //创建CAGradientLayer对象
        self.gradientLayer = CAGradientLayer()
        
        //设置初始渐变色
        self.gradientLayer.colors = [UIColor.black.cgColor,
                                     UIColor.white.cgColor,
                                     UIColor.black.cgColor]
        
        //设置每种颜色初始所在的位置
        self.gradientLayer.locations = [0, 0, 0.25]
        
        //设置渲染的起始结束位置（横向渐变）
        self.gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        self.gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
        
        //设置其CAGradientLayer对象的frame，并插入view的layer
        self.gradientLayer.frame = CGRect(x: 0, y: 0,
                                          width: labelBg.frame.size.width,
                                          height: labelBg.frame.size.height)
        
        //将渐变层添加到文本标签背景上
        self.labelBg.layer.insertSublayer(gradientLayer, at: 0)
        
        //添加渐变动画（让白色光泽从左向右移动）
        let gradientAnimation = CABasicAnimation(keyPath: "locations")
        gradientAnimation.fromValue = [0, 0, 0.2]
        gradientAnimation.toValue = [0.8, 1, 1]
        gradientAnimation.duration = 12.5
        //动画一致重复执行
        gradientAnimation.repeatCount = HUGE
        self.gradientLayer.add(gradientAnimation, forKey: nil)
        
        //设置遮罩，让渐变层透过文字显示出来
        self.labelBg.mask = self.label
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

源码下载：

hangge_1769.zip