iOS动画十二：GradientAnimations

现在，我们要写一个 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 下载