iOS开发中常用的动画（今日头条闪动加载）

今日头条的加载页面有这么一个动画

今日头条.gif

我觉得效果不错，可以借鉴到APP中。不过网上没有现成的demo，就自己实现了一个。

首先来看一下动画效果。
今日头条四个字静止，斜方向的灰色阴影从左至右划过。注意：阴影部分只在今日头条这四个字中才会出现，四字之外的阴影部分是隐藏的。
因此，这显然不是灰色阴影的frame变化。
那么，要达到如上的动画效果，就要使用本文的主角CAGradientLayer了。
你可能知道这个CALayer的子类是可以处理渐变色，那么这里就不对它的概念做介绍了，我们直接在代码中来解释。

ok,直接上代码。

1.

首先我们创建一个UIView的子类FlashView,并在init方法中添加上今日头条这张图片。

class FlashView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        addSubview(imageView)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    lazy var imageView: UIImageView = {
        let imgV = UIImageView()
        imgV.image = UIImage(named: "icon") //icon是今日头条四字的图片，需要自己找，也可以换成其他图片
        imgV.frame = bounds
        return imgV
    }()
}

2.

接着给这个类添加一个CAGradientLayer属性

let gradientLayer: CAGradientLayer = {
    let layer = CAGradientLayer()
    let colors = [
        UIColor.lightGray.cgColor,
        UIColor.gray.cgColor,
        UIColor.gray.cgColor,
        UIColor.lightGray.cgColor
    ]
    layer.colors = colors

    let locations: [NSNumber] = [
         -0.4,          
         -0.39,
         -0.24,
         -0.23
    ]
    layer.locations = locations
        
    layer.startPoint = CGPoint(x: 0.0, y: 0.6)
    layer.endPoint = CGPoint(x: 1.0, y: 0.4)
        
    return layer
 }()

（1）这里colors中，两边的lightGray对应今日头条的底色，中间的gray对应阴影的颜色
（2）这里locations代表颜色渐变的起始位置，它的数量需要与colos对应。
第一个值-0.4代表colors中第一个颜色的起始位置，是-(layer的宽度 * 0.4)。使用-0.4是因为，阴影需要从今日头条左边出来，动画看起来会自然～
第二个值-0.39与-0.4相差0.01，代表第二个颜色与第一个颜色相交处有layer的宽度 * 0.01的宽度间隙，实际上就是阴影部分边的宽度
那么-0.39与-0.24之间就代表阴影部分的宽度了
（3）startPoint和endPoint代表layer渐变的方向，它们的取值范围是0～1。x轴由0到1好理解，y轴因为要设置阴影的一个偏转角度，因此分别为0.6和0.4。当你交换两个值的时候，会发现阴影的偏转方向也会相反，这样有助于理解

3.

接下来我们要将imageView设为layer的mask(即蒙版)。我们要达到阴影只在有文字的部分显示，就要将这个文字的图片设为阴影部分的蒙版。我们就拿到了文字的部分，并通过layer的colors为它们的颜色重新赋值。
这个概念需要多思考一下。我们在layoutSubviews里来设置。

override func layoutSubviews() {
     gradientLayer.frame = self.bounds
     gradientLayer.mask = imageView.layer
     imageView.frame = gradientLayer.bounds
}

4.

剩下最后一步，当然是设置动画，让阴影部分动起来啦～我们为layer的locations属性添加动画。

override func didMoveToWindow() {
     super.didMoveToWindow()
     layer.addSublayer(gradientLayer)

     let gradientAnimation = CABasicAnimation(keyPath: "locations")
     gradientAnimation.fromValue = [-0.8,-0.79,-0.64,-0.63]
     gradientAnimation.toValue = [1.5,1.51,1.76,1.77]
     gradientAnimation.duration = 2.0
     gradientAnimation.repeatCount = MAXFLOAT
        
     gradientLayer.add(gradientAnimation, forKey: nil)
}

5.

以上就是对这个动画FlashView的封装，接下来我们实例化它，并添加到界面上就可以了。

class ViewController: UIViewController {
    
        lazy var flashView: FlashView = {
            let flashView = FlashView(frame: CGRect(x: 100, y: 100, width: 264, height: 72))
            return flashView
        }()
    //注意frame的宽高应该按今日头条四字的原图大小比例来设置。
        override func viewDidLoad() {
            super.viewDidLoad()
            view.addSubview(flashView)
        }    
}

好了，以上就是这个动画的全部了，喜欢的同学点个赞吧～