Swift动画 —— Shimmer（使用Gradient Masks添加微光闪烁的特效）

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

完成效果：

首先在viewDidLoad将视图的背景色修改为:

view.backgroundColor = UIColor(white: 1, alpha: 0.1)
复制代码

接下来创建一个UILabel：文字为Shimmer，颜色为白色，字体大小为80，文字居中对齐,赋予frame之后添加为视图的子View。这样运行后就能看到一个文字内容为白色的Shimmer的Label了

      let darkTextLabel = UILabel()
        darkTextLabel.text = "Shimmer"
        darkTextLabel.textColor = UIColor(white: 1, alpha: 1)
        darkTextLabel.font = UIFont.systemFont(ofSize: 80)
        darkTextLabel.textAlignment = .center
        darkTextLabel.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 400)
     
        view.addSubview(darkTextLabel)
复制代码

看完之后将其字体颜色改为:

 darkTextLabel.textColor = UIColor(white: 1, alpha: 1)
复制代码

接下来创建一个亮色的，一抹抹一样样的label，唯一的差别就是字体颜色：

   let shinyTextLabel = UILabel()
        shinyTextLabel.text = "Shimmer"
        shinyTextLabel.textColor = .white
        shinyTextLabel.font = UIFont.systemFont(ofSize: 80)
        shinyTextLabel.textAlignment = .center
        shinyTextLabel.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 400)
        
        view.addSubview(shinyTextLabel)
复制代码

接下来要添加 Gradient Mask。

   let gradient = CAGradientLayer()
  gradient.frame = shinyTextLabel.frame
  gradient.colors = [UIColor.clear.cgColor, UIColor.white.cgColor,UIColor.clear.cgColor]
  gradient.locations = [0.0, 0.5, 1.0]

  darkTextLabel.layer.mask = gradient
  view.layer.addSublayer(gradient)
复制代码

运行后可以发现在label里面添加了一个颜色变化，从clear 到 中间位置的时候变为白色，然后在最后在变为clear。

接下来要进行gradient Layer 的旋转，这样才能达到最终的效果：

        let angle = -60 * CGFloat.pi / 180
        gradient.transform = CATransform3DMakeRotation(angle, 0, 0, 1)
复制代码

添加后运行的效果：

接下来我们需要这个gradient Layer只对文字起效果，那么就需要将文字的mask设为这个gradient Layer

shinyTextLabel.layer.mask = gradient
复制代码

接下来就要为gradient Layer添加动画了，这里用到CABasicAnimation里面的transform.translation.x，设置好动画时长，重复次数，是否逆行动画，开始值，结束值，是否结束时移除，fillmode（fillMode的作用就是决定当前对象过了非active时间段的行为），然后添加为gradient Layer的动画。这样，这个动画就完成了。

 let animation = CABasicAnimation(keyPath: "transform.translation.x")
 animation.duration = 2
 animation.repeatCount = Float.infinity
 animation.autoreverses = false
 animation.fromValue = -view.frame.width
 animation.toValue = view.frame.width
 animation.isRemovedOnCompletion = false
 animation.fillMode = CAMediaTimingFillMode.forwards

 gradient.add(animation, forKey: "shimmerKey")
复制代码

完整代码如下：

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        view.backgroundColor = UIColor(white: 1, alpha: 0.1)
        let darkTextLabel = UILabel()
        darkTextLabel.text = "Shimmer"
        darkTextLabel.textColor = UIColor(white: 1, alpha: 1)
        darkTextLabel.font = UIFont.systemFont(ofSize: 80)
        darkTextLabel.textAlignment = .center
        darkTextLabel.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 400)
        
        let shinyTextLabel = UILabel()
        shinyTextLabel.text = "Shimmer"
        shinyTextLabel.textColor = .white
        shinyTextLabel.font = UIFont.systemFont(ofSize: 80)
        shinyTextLabel.textAlignment = .center
        shinyTextLabel.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 400)
        
        view.addSubview(shinyTextLabel)
        
        let gradient = CAGradientLayer()
        
        gradient.frame = shinyTextLabel.frame
        gradient.colors = [UIColor.clear.cgColor, UIColor.white.cgColor,UIColor.clear.cgColor]
        gradient.locations = [0.0, 0.5, 1.0]
        let angle = -60 * CGFloat.pi / 180
        gradient.transform = CATransform3DMakeRotation(angle, 0, 0, 1)

        shinyTextLabel.layer.mask = gradient
        
        
        let animation = CABasicAnimation(keyPath: "transform.translation.x")
        animation.duration = 2
        animation.repeatCount = Float.infinity
        animation.autoreverses = false
        animation.fromValue = -view.frame.width
        animation.toValue = view.frame.width
        animation.isRemovedOnCompletion = false
        animation.fillMode = CAMediaTimingFillMode.forwards

        gradient.add(animation, forKey: "shimmerKey")
        
    }


}


复制代码