iOS渐变动画制作与应用-CSDN博客

本文链接：https://blog.csdn.net/weixin_42600128/article/details/148036812

背景简介

iOS Animations by Tutorials的第14章专注于渐变动画的制作与应用。渐变动画在现代UI设计中扮演了重要的角色，它能够为静态的UI元素增加动态感和深度感。本章将通过实例指导，逐步教授读者如何在iOS应用中实现这些效果。

绘制你的第一个渐变

在开始之前，你需要打开启动项目，并查看Main.storyboard中的UI。项目中包含了一个AnimatedMaskLabel类的实例，本章将利用这个类来添加渐变动画。

基础渐变的创建

首先，你需要在AnimatedMaskLabel类中定义渐变的起始点和终点，然后设置构成渐变的颜色数组。接着，你可以指定这些颜色在渐变框架中的确切位置。基础渐变的设置非常简单，但为后续的动画制作打下了坚实的基础。

// 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
]
gradientLayer.colors = colors

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

动画渐变

CAGradientLayer提供了四个可动画化的属性，你可以通过动画化这些属性来制作渐变动画。例如，通过改变颜色里程碑的位置，可以使颜色在渐变中移动。本章中，你将学习如何使渐变“移动”。

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

gradientLayer.add(gradientAnimation, forKey: nil)

创建文本遮罩

渐变动画完成后，你将学习如何创建文本层遮罩。通过渲染AnimatedMaskLabel类的text属性中的字符串，并将其作为mask应用到渐变层上，你可以制作出更加丰富和动态的视觉效果。

let textAttributes: [NSAttributedStringKey: Any] = {
   let style = NSMutableParagraphStyle()
   style.alignment = .center
   return [
     NSFontAttributeName: UIFont(name: "HelveticaNeue-Thin", size: 28.0)!,
     NSParagraphStyleAttributeName: style
   ]
}()

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

挑战环节

为了加深理解和应用，本章还提供了两个挑战环节。第一个挑战是添加滑动手势识别器，用于揭示隐藏的内容；第二个挑战是制作具有更多颜色的迷幻渐变动画。

// Challenge 1: 添加滑动手势识别器
let swipe = UISwipeGestureRecognizer(target: self, action: #selector(ViewController.didSlide))
swipe.direction = .right
slideView.addGestureRecognizer(swipe)

// Challenge 2: 制作迷幻渐变动画
let gradientColors = [
   UIColor.yellow.cgColor,
   UIColor.green.cgColor,
   UIColor.orange.cgColor,
   UIColor.cyan.cgColor,
   UIColor.red.cgColor,
   UIColor.yellow.cgColor
]
let gradientLocations = [0.0, 0.0, 0.0, 0.0, 0.0, 0.25, 0.65, 0.8, 0.85, 0.9, 0.95, 1.0]

// 动画化locations
let gradientAnimation = CABasicAnimation(keyPath: "locations")
gradientAnimation.fromValue = gradientLocations[0..<6]
gradientAnimation.toValue = gradientLocations[6...]
gradientAnimation.duration = 3.0
gradientAnimation.repeatCount = Float.infinity
gradientLayer.add(gradientAnimation, forKey: nil)