Swift动画：使用Gradient Masks为Shimmer效果增添闪耀光彩

2023-11-20 21:27:33

绪论

Shimmer效果是一种流行的加载动画，它使用渐变蒙版在元素上创建闪烁的微光效果，营造出动态感和现代感。本文将引导你使用Swift在你的iOS应用程序中实现令人惊叹的Shimmer效果，让你掌握渐变蒙版这一强大的技术。

准备工作

在开始之前，你需要确保你的项目中已包含必要的库和依赖项。首先，导入Core Graphics和UIKit库：

import CoreGraphics
import UIKit

创建Shimmer效果

1. Gradient Mask的魔力

Shimmer效果的核心在于渐变蒙版。渐变蒙版允许你使用两个或更多颜色创建平滑的过渡，从而为元素添加动态效果。在我们的例子中，我们将使用渐变蒙版来创建闪烁的光线，照亮文本或图像。

2. 实施Shimmer动画

首先，在viewDidLoad方法中，将视图的背景色更改为黑色，以营造夜空般的效果：

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 设置背景色
    self.view.backgroundColor = .black
}

现在，创建一个UILabel来显示我们的文本：“Shimmer”。将文本颜色设置为白色，字体大小设置为8：

let shimmerLabel: UILabel = {
    let label = UILabel()
    label.text = "Shimmer"
    label.textColor = .white
    label.font = UIFont.systemFont(ofSize: 8)
    return label
}()

接下来，为我们的标签创建一个渐变蒙版。我们将使用两个颜色，一个是浅灰色，另一个是深灰色，以创建闪烁的效果：

let gradientLayer = CAGradientLayer()
gradientLayer.frame = shimmerLabel.bounds
gradientLayer.colors = [UIColor(white: 0.8, alpha: 1).cgColor, UIColor(white: 0.6, alpha: 1).cgColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
shimmerLabel.layer.mask = gradientLayer

最后，使用CAAnimation对渐变蒙版应用动画。我们将使用线性动画，从蒙版的起始点移动到终点，然后重复此过程以创建闪烁效果：

let animation = CABasicAnimation(keyPath: "transform.translation.x")
animation.fromValue = -shimmerLabel.frame.width
animation.toValue = shimmerLabel.frame.width
animation.duration = 1.5
animation.repeatCount = .infinity
gradientLayer.add(animation, forKey: "shimmer")