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 UIKit
import QuartzCore

@IBDesignable
class 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 下载