图层上的脉冲动画

Question

我正在为一个应用程序制作一些自定义类型的加载程序，我只是在我的视图中简单地制作了 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)
    }
    
}

Answer 1

要从圆心开始缩放每个圆，您应该将每个图层的 frame 设置为贝塞尔曲线路径的边界框。然后你可以为贝塞尔曲线路径的 arcCenter.

设置一个常量原点 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)
        }
    }
}

图层上的脉冲动画

Pulsing Animation on layer

swift

core-animation

cashapelayer

cabasicanimation

ios-animations