Swift 层上的脉冲动画

我正在为一个应用程序制作一些自定义类型的加载器，在这个应用程序中，我只需在我的视图中创建4个圆形图层，就可以很好地进行设置和显示。但当我应用所有层的脉冲动画缩放时，它们会干扰我的所有设计和层缩放，但会改变它的中心点。我希望所有的圆形图层首先缩放图层，使其变小，变大，然后再次标识，它应该称为无穷大。但不应该改变它的中心点

这是我正在分享我的代码

class ViewController: BaseViewController{
    
    @IBOutlet weak var layerView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        drawCircles()
    }

    func drawCircles(){
        let width = layerView.bounds.width
        let halfOfView = width / 2
        
        let firstCirleLayer = UIBezierPath(arcCenter: CGPoint(x: halfOfView / 2, y: halfOfView), radius: halfOfView /  3.5, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
        circleLayers(path: firstCirleLayer.cgPath, color: UIColor.purple)
        
        let secondCirleLayer = UIBezierPath(arcCenter: CGPoint(x: halfOfView, y: halfOfView / 2), radius: halfOfView /  3.5, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
        circleLayers(path: secondCirleLayer.cgPath, color: UIColor.yellow)
        
        let thirdCirleLayer = UIBezierPath(arcCenter: CGPoint(x: width * 0.75, y: halfOfView), radius: halfOfView /  3.5, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
        circleLayers(path: thirdCirleLayer.cgPath, color: UIColor.brown)

        let fourthCirleLayer = UIBezierPath(arcCenter: CGPoint(x: halfOfView, y: width * 0.75), radius: halfOfView /  3.5, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
        circleLayers(path: fourthCirleLayer.cgPath, color: UIColor.blue)
    }
    
    func circleLayers(path: CGPath, color: UIColor){

        let layer = CAShapeLayer()
        layer.path = path
        layer.fillColor = color.cgColor
        layerView.layer.addSublayer(layer)
        
        let scaling = CABasicAnimation(keyPath: "transform.scale")
        scaling.toValue = 1.2
        scaling.duration = 0.3
        scaling.autoreverses = true
        scaling.repeatCount = .infinity
        layer.add(scaling, forKey: nil)
    }
    
}

---

若要从圆心缩放每个圆，必须将每个层的

帧

设置为贝塞尔路径的边界框。由于框架已经表示每个圆的位置，您可以为贝塞尔路径的

弧中心设置一个恒定原点
CGPoint（x:radius，y:radius）
。是的，这太复杂了

class ViewController: UIViewController {

    @IBOutlet weak var layerView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        drawCircles()
    }

    func drawCircles(){
        let width = layerView.bounds.width
        let halfOfView = width / 2
        let radius = halfOfView / 3.5

        let firstCenter = CGPoint(x: halfOfView / 2, y: halfOfView)
        makeCircleLayer(center: firstCenter, radius: radius, color: .purple)

        let secondCenter = CGPoint(x: halfOfView, y: halfOfView / 2)
        makeCircleLayer(center: secondCenter, radius: radius, color: .yellow)

        let thirdCenter = CGPoint(x: width * 0.75, y: halfOfView)
        makeCircleLayer(center: thirdCenter, radius: radius, color: .brown)

        let fourthCenter = CGPoint(x: halfOfView, y: width * 0.75)
        makeCircleLayer(center: fourthCenter, radius: radius, color: .blue)

    }

    func makeCircleLayer(center: CGPoint, radius: CGFloat, color: UIColor) {
        
        let layer = CAShapeLayer()

        /// the frame is the actual frame/bounding box of the circle
        layer.frame = CGRect(x: center.x - radius, y: center.y - radius, width: radius * 2, height: radius * 2)

        /// path is relative to the frame
        let path = UIBezierPath(arcCenter: CGPoint(x: radius, y: radius), radius: radius, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
        layer.path = path.cgPath

        layer.fillColor = color.cgColor
        layerView.layer.addSublayer(layer)

        let scaling = CABasicAnimation(keyPath: "transform.scale")
        scaling.toValue = 1.2
        scaling.duration = 0.3
        scaling.autoreverses = true
        scaling.repeatCount = .infinity
        layer.add(scaling, forKey: nil)
    }
}

结果:


但是，因为您的圆只是圆（不是复杂的形状），所以您应该只使用带有角半径的
UIView
。下面的代码生成相同的结果，但更简洁

class ViewController: UIViewController {

    @IBOutlet weak var layerView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        drawCircles()
    }

    func drawCircles() {
        let width = layerView.bounds.width
        let halfOfView = width / 2
        let radius = halfOfView / 3.5

        let firstCenter = CGPoint(x: halfOfView / 2, y: halfOfView)
        makeCircleView(center: firstCenter, radius: radius, color: .purple)

        let secondCenter = CGPoint(x: halfOfView, y: halfOfView / 2)
        makeCircleView(center: secondCenter, radius: radius, color: .yellow)

        let thirdCenter = CGPoint(x: width * 0.75, y: halfOfView)
        makeCircleView(center: thirdCenter, radius: radius, color: .brown)

        let fourthCenter = CGPoint(x: halfOfView, y: width * 0.75)
        makeCircleView(center: fourthCenter, radius: radius, color: .blue)
    }

    func makeCircleView(center: CGPoint, radius: CGFloat, color: UIColor) {
        let frame = CGRect(x: center.x - radius, y: center.y - radius, width: radius * 2, height: radius * 2)
        let circleView = UIView(frame: frame)
        circleView.backgroundColor = color
        circleView.layer.cornerRadius = radius
        layerView.addSubview(circleView)
        
        UIView.animate(withDuration: 0.3, delay: 0, options: [.repeat, .autoreverse]) {
            circleView.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
        }
    }
}

非常感谢，这是一个很好的、全面的答案。（投票）一个尼特。在第一个解决方案中，为什么要使用相当复杂的
UIBezierPath
初始值设定项
init（arcCenter:radius:startAngle:endAngle:顺时针：）
？初始化器
init（ovalIn:）
是为这个用例定制的。（类似于UIBezierPath（arcCenter:CGPoint（x:half-view/2，y:half-view），radius:half-view/3.5，startAngle:0，endAngle:2*.pi，顺时针：true）的代码变成UIBezierPath（ovalIn:layer.bounds）。@duncac是的，ovalIn会更好。我完全忘记了它的存在。