iOS 动画十二：Gradient Animations

现在，我们要写一个 Gradient Animations demo, 其最终效果是这样的：

Slide to reveal

实现步骤如下：

1. Drawing your first gradient

// Configure the gradient here gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5) gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

定义 gradient 的 start 和 end 位置：

let colors = [ UIColor.black.cgColor, UIColor.white.cgColor, UIColor.black.cgColor ] gradientLayer.colors = colors

gradient 渐变，先由黑色到白色，再由白色到黑色。

let locations: [NSNumber] = [0.25,0.5,0.75 ] gradientLayer.locations = locations

设置渐变关键位置

以上操作后，现在效果是这样的：

2. Animating gradients

现在我们要为渐变增加动画。

CAGradientLayer 继承自 CALayer ，它有几个可动画属性：

? colors: 渐变颜色色彩。
? locations: 颜色渐变关键位置，使颜色在渐变中移动。
? startPoint and endPoint: 设置渐变开始、结束位置。

实现动画效果：

let gradientAnimation = CABasicAnimation(keyPath: "locations") gradientAnimation.fromValue = [0.0, 0.0, 0.25] gradientAnimation.toValue = [0.75, 1.0, 1.0] gradientAnimation.duration = 3.0 gradientAnimation.repeatCount = Float.infinity

在这 layer 动画中，你首先将三个颜色渐变 start 位置设置在渐变 frame 的左边缘，并在动画结束时将所有三个元素推向右边缘:

动画持续三秒，并无限循环。

3. Creating a text mask

增加 text mask 。
以下为项目主要代码。text mask 位置自己找吧。

import UIKitimport QuartzCore@IBDesignableclass AnimatedMaskLabel: UIView {    let gradientLayer: CAGradientLayer = {    let gradientLayer = CAGradientLayer()        // Configure the gradient here    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)    // let colors = [ UIColor.black.cgColor, UIColor.white.cgColor, UIColor.black.cgColor ]    let colors = [        UIColor.yellow.cgColor,        UIColor.green.cgColor,        UIColor.orange.cgColor,        UIColor.cyan.cgColor,        UIColor.red.cgColor,        UIColor.yellow.cgColor    ]    gradientLayer.colors = colors    //    let locations: [NSNumber] = [//        0.25,//        0.5,//        0.75 ]    let locations: [NSNumber] = [        0.0, 0.0, 0.0, 0.0, 0.0, 0.25    ]    gradientLayer.locations = locations        return gradientLayer  }()    let textAttributes: [NSAttributedStringKey: Any] = {        let style = NSMutableParagraphStyle()    style.alignment = .center    return [        NSAttributedStringKey.font: UIFont(           name: "HelveticaNeue-Thin",           size: 28.0)!,        NSAttributedStringKey.paragraphStyle: style]  }()              @IBInspectable var text: String! {    didSet {      setNeedsDisplay()              let image = UIGraphicsImageRenderer(size: bounds.size) .image { _ in        text.draw(in: bounds, withAttributes: textAttributes) }      let maskLayer = CALayer()      maskLayer.backgroundColor = UIColor.clear.cgColor      maskLayer.frame = bounds.offsetBy(dx: bounds.size.width, dy: 0)      maskLayer.contents = image.cgImage      gradientLayer.mask = maskLayer    }  }    override func layoutSubviews() {    layer.borderColor = UIColor.green.cgColor    // gradientLayer.frame = bounds    gradientLayer.frame = CGRect(        x: -bounds.size.width,        y: bounds.origin.y,        width: 3 * bounds.size.width,        height: bounds.size.height)  }    override func didMoveToWindow() {    super.didMoveToWindow()    layer.addSublayer(gradientLayer)        let gradientAnimation = CABasicAnimation(keyPath: "locations")//    gradientAnimation.fromValue = [0.0, 0.0, 0.25]//    gradientAnimation.toValue = [0.75, 1.0, 1.0]    gradientAnimation.fromValue = [0.0, 0.0, 0.0, 0.0, 0.0, 0.25]    gradientAnimation.toValue = [0.65, 0.8, 0.85, 0.9, 0.95, 1.0]    gradientAnimation.duration = 3.0    gradientAnimation.repeatCount = Float.infinity        gradientLayer.add(gradientAnimation, forKey: nil)  } }

demo 下载