Swift YYLabel 首行缩进动画效果

2023-09-26 15:58:23

利用 YYLabel 巧妙实现文本首行缩进，打造引人注目的用户界面

在 iOS 开发中，文本排版是提升用户体验不可或缺的一部分。而文本首行缩进是一种常见的排版技巧，它能让文本内容更加清晰易读，增强整体视觉效果。本篇博文将深入探讨如何在 Swift 中使用功能强大的 YYLabel 组件实现文本首行缩进的动画效果。

YYLabel：富文本排版的利器

YYLabel 是一个集众多实用功能于一身的富文本框架，包括文本对齐、颜色、字体、链接以及动画等。它利用 Core Text 框架进行文本渲染，从而实现丰富多样的排版效果。

动画效果：逐帧展示首行缩进

为了实现文本首行缩进的动画效果，我们需要用到 YYLabel 的 exclusionPath 属性。exclusionPath 是一个 UIBezierPath 对象，它定义了一个需要排除文本内容的区域。通过动态调整 exclusionPath 属性，我们就能实现首行缩进的渐进动画效果。

首先，我们创建一个 UIBezierPath 对象，通常使用 UIBezierPath(rect:) 方法创建一个矩形路径。接着，将这个路径赋予 exclusionPath 属性。最后，通过 CADisplayLink 不断更新 exclusionPath 属性，从而实现动画效果。

// 初始化 YYLabel 并设置文本、字体和颜色
let label = YYLabel()
label.text = "Hello, World!"
label.font = UIFont.systemFont(ofSize: 17)
label.textColor = UIColor.black

// 创建一个矩形 UIBezierPath，用于定义首行缩进区域
let path = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 10, height: label.font.lineHeight))

// 将路径赋予 exclusionPath 属性
label.exclusionPath = path

// 创建 CADisplayLink，用于动态更新 exclusionPath
let displayLink = CADisplayLink(target: self, selector: #selector(updateExclusionPath))
displayLink.add(to: RunLoop.main, forMode: .common)

// updateExclusionPath 方法，动态调整 exclusionPath 区域
@objc func updateExclusionPath() {
    let progress = min(1, CACurrentMediaTime() - startTime)
    let width = 10 + progress * (label.frame.width - 10)
    path.rect = CGRect(x: 0, y: 0, width: width, height: label.font.lineHeight)
}