iOS自定义CALayer绘制曲形文本缩放动画后像素化如何解决

问题原因 #

你给myView.layer添加缩放动画时，系统默认是将图层已经渲染完成的位图直接拉伸放大，原始位图是按照初始视图大小渲染的，放大后自然会出现像素化的模糊效果。

解决方案 #

方案1：提前设置足够的图层内容分辨率（适配固定最大缩放倍数） #

在自定义CurvedTextLayer的初始化方法中，提前将contentsScale设置为最大缩放倍数乘以当前屏幕的原生缩放系数，让图层初始就渲染高分辨率的内容，缩放后不会模糊：

init(with bounds: CGRect) {
    super.init()
    self.frame = bounds
    // 适配屏幕原生分辨率，避免非Retina/Retina屏适配问题
    let screenScale = UIScreen.main.scale
    // 你的动画最大放大倍数是2，所以这里直接设置为 2 * 屏幕缩放系数
    self.contentsScale = 2 * screenScale
    self.setNeedsDisplay()
}

这个方案的优势是不需要修改原有动画逻辑，原有transform.scale动画可以直接使用。

方案2：修改Bounds重绘（适配任意缩放倍数，清晰度最高） #

放弃使用transform.scale做缩放，直接修改视图的Bounds大小，触发CurvedTextLayer重新绘制，始终按照当前大小渲染高清文本：

1. 保持原有CurvedTextLayer的update方法不变，只需要在初始化时添加基础的屏幕适配：

init(with bounds: CGRect) {
    super.init()
    self.frame = bounds
    self.contentsScale = UIScreen.main.scale
    self.setNeedsDisplay()
}

2. 修改动画逻辑如下：

func animate() {
    UIView.animate(withDuration: 3) {
        // 放大2倍
        let originalWidth = self.myView.bounds.width
        let originalHeight = self.myView.bounds.height
        self.myView.bounds = CGRect(x: 0, y: 0, width: originalWidth * 2, height: originalHeight * 2)
        // 触发曲形文本图层重新渲染
        if let textLayer = self.myView.layer.sublayers?.first(where: { $0 is CurvedTextLayer }) as? CurvedTextLayer {
            textLayer.update(bounds: self.myView.bounds)
        }
    }
}

这个方案的优势是无论缩放倍数是多少，文本始终是高清渲染的，不会有任何模糊问题。

内容的提问来源于stack exchange，提问作者mobs_boss