今日头条的加载页面有这么一个动画
我觉得效果不错，可以借鉴到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)
}
}
