在 iOS 中使用 CALayer 和 Swift 实现圆形动画的两种方法

2024-02-08 08:27:21

前言

在 iOS 开发中，为用户界面元素添加动画是一个提升用户体验的重要方面。圆形动画是一种常见的动画效果，它可以为各种界面元素（如按钮、进度条、加载指示器）增添动态感。

本文将介绍两种使用 CALayer 和 Swift 实现圆形动画的方法：一种是较为简单的，另一种则更为复杂一些。

方法一：使用 CAShapeLayer

CAShapeLayer 是一个 CALayer 子类，它允许我们创建和绘制自定义形状。我们可以使用 CAShapeLayer 来创建一个圆形路径，然后使用 CABasicAnimation 来对其应用动画。

import UIKit

class MyView: UIView {
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        let center = CGPoint(x: rect.midX, y: rect.midY)
        let radius = min(rect.width, rect.height) / 2
        
        let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
        
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.fillColor = UIColor.red.cgColor
        
        layer.addSublayer(shapeLayer)
        
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0
        animation.toValue = 1
        animation.duration = 2
        animation.repeatCount = Float.infinity
        
        shapeLayer.add(animation, forKey: "strokeEndAnimation")
    }
}

在这个示例中，我们在 MyView 的 draw(_:) 方法中创建了一个 CAShapeLayer，并设置了它的路径、填充颜色和添加到视图层中。然后，我们创建了一个 CABasicAnimation，将 strokeEnd 属性从 0 动画到 1，持续时间为 2 秒，并且无限重复。

方法二：使用自定义 CALayer 和 UIView

第二种方法涉及创建一个自定义 CALayer 子类，并实现 draw(in:) 方法来绘制圆形路径。然后，我们创建一个使用该自定义 CALayer 的自定义 UIView，并在其 layoutSubviews() 方法中启动动画。

import UIKit

class MyCustomCALayer: CALayer {
    
    override func draw(in ctx: CGContext) {
        super.draw(in: ctx)
        
        let center = CGPoint(x: bounds.midX, y: bounds.midY)
        let radius = min(bounds.width, bounds.height) / 2
        
        let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
        
        ctx.addPath(path.cgPath)
        ctx.setFillColor(UIColor.red.cgColor)
        ctx.fillPath()
    }
}

class MyCustomView: UIView {
    
    private let myCustomCALayer = MyCustomCALayer()
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        myCustomCALayer.frame = bounds
        
        let animation = CABasicAnimation(keyPath: "opacity")
        animation.fromValue = 0
        animation.toValue = 1
        animation.duration = 2
        animation.repeatCount = Float.infinity
        
        myCustomCALayer.add(animation, forKey: "opacityAnimation")
    }
}

在这个示例中，我们创建了 MyCustomCALayer 和 MyCustomView 类。MyCustomCALayer 负责绘制圆形路径，而 MyCustomView 则使用 MyCustomCALayer 创建了一个自定义视图。我们在 layoutSubviews() 方法中将 MyCustomCALayer 添加到视图层，并对其添加一个 CABasicAnimation 以动画改变其不透明度。