如何设置UILabel文本大小（和颜色）的动画

Question

关于为设置文本大小的动画UILabel，似乎有很多“快速修复”的答案漂浮在Stack Overflow周围，由不太愿意了解幕后情况的用户发布。

对于面向设计的开发人员来说，这令人沮丧。大多数答案建议在transform上指定UILabel，按缩放x，例如：

let label = UILabel()
label.text = "yourText"
label.sizeToFit()
label.layer.anchorPoint = CGPoint(x: 0, y: 0)
label.layer.position = CGPoint(x: 0, y: 0)
UIView.animate(withDuration: duration) {
    label.transform = CGAffineTransform(scaleX: 4.0, y: 4.0)
}

产生以下动画：

但是，它看起来很模糊-标签的跟踪值无法适应刻度。那么，为a的文本大小设置动画的最佳方法是UILabel什么？

Answer 1

正如我提到的，将a CGAffineTransform应用于UILabel比例缩放对于面向设计的开发人员来说是令人沮丧的，这有两个原因。

1. 在transform不考虑跟踪和字体变体。旧金山（Apple的系统字体）根据文本大小使用其字体的两个不同变体。

iOS将根据磅值和用户的辅助功能设置自动应用最合适的变体。适当调整跟踪（字母之间的间距）。

SF Pro文本应用于19点或更小的文本，而SF Pro Display应用于20点或更小的文本。每个变体对于每个点大小都有不同的“跟踪”值（字母之间的间距）（请参阅：“ 字体用法”和“跟踪”下的许多跟踪值）。

不幸的是，CGAffineTransform没有设置new pointSize，否则将强制重新绘制视图。应用变换只会缩放的栅格化位图UILabel，这意味着字体和跟踪值无法自适应。因此，如果我们将标签从10pt缩放2.0到UILabel20pt，则20pt的结果仍将使用具有12pt跟踪的SF Pro Text，而不是具有19pt跟踪的SF Pro Display。您可以在下面看到红色标签已转换，因此不会调整其字体。

2. 转换视图或图层会导致模糊。如前所述，Core Graphics不会重新渲染视图，而是转换视图的2D像素图。下面的红色标签明显模糊。

解决方案

我们最好的选择是使用，CATextLayer而不是UILabelApple所说的：

提供简单文本布局以及纯字符串或属性字符串的呈现的图层。

该CATextLayer文件清单var string: Any?，var font: CFTypeRef?，var fontSize: CGFloat，var foregroundColor: CGColor?和更多的性能，其中大部分的时间是我们所需要的。完善！

我们需要做的就是在上添加一个CAPropertyAnimation-像这样CABasicAnimation的CATextLayer动画，例如：

// Create the CATextLayer
let textLayer = CATextLayer()
textLayer.string = "yourText"
textLayer.font = UIFont.systemFont(ofSize: startFontSize)
textLayer.fontSize = startFontSize
textLayer.foregroundColor = UIColor.black.cgColor
textLayer.contentsScale = UIScreen.main.scale
textLayer.frame = view.bounds
view.layer.addSublayer(textLayer)

// Animation
let duration: TimeInterval = 10
textLayer.fontSize = endFontSize
let fontSizeAnimation = CABasicAnimation(keyPath: "fontSize")
fontSizeAnimation.fromValue = startFontSize
fontSizeAnimation.toValue = endFontSize
fontSizeAnimation.duration = duration
textLayer.add(fontSizeAnimation, forKey: nil)

和瞧！下面的黑色文字是我们正确缩放的文字CATextLayer。清晰并带有正确的字体变体。

h / t前往沂南获取代码：https : //stackoverflow.com/a/42047777/4848310。Yian还讨论了如何CATextLayer与基于自动布局的基于约束的动画一起使用。

奖金！这也可以为文本颜色设置动画！只需使用该foregroundColor属性。