swift - transform.scale 上的 CABasicAnimation 在 X 和 Y 轴上平移 CAShapeLayer

Question

我试图在按钮周围添加脉动效果，但是，我使用的代码会翻译 CAShapeLayer 并增加其大小。

如何在此动画期间仅增加 CAShapeLayer 的比例，同时保持其在 View 中的位置静态？

我已将代码隔离到一个执行此动画的简单项目中，并且它仍在发生。

在此处查看视频效果:/image/or3s2.jpg

要测试这个:

1. 创建一个新项目
2. 在 View 中心添加一个按钮
3. 将其作为 IBOutlet 链接到 viewControllers 代码文件，名称为 beginButton

这是我的代码:

let pulsatingLayer = CAShapeLayer()

override func viewDidLoad() {
    super.viewDidLoad()
    let circularPath = UIBezierPath(arcCenter: beginButton.center, radius: beginButton.bounds.midX, startAngle: -CGFloat.pi / 2, endAngle: 2 * .pi, clockwise: true)

    pulsatingLayer.path = circularPath.cgPath
    pulsatingLayer.strokeColor = UIColor.clear.cgColor
    pulsatingLayer.lineWidth = 10
    pulsatingLayer.fillColor = UIColor.red.cgColor
    pulsatingLayer.lineCap = kCALineCapRound
    view.layer.addSublayer(pulsatingLayer)

    animatePulsatingLayer()
}

private func animatePulsatingLayer() {
    let pulseAnimation = CABasicAnimation(keyPath: "transform.scale")
    pulseAnimation.toValue = 1.5
    pulseAnimation.duration = 1
    pulseAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
    pulseAnimation.autoreverses = true
    pulseAnimation.repeatCount = Float.infinity
    pulsatingLayer.add(pulseAnimation, forKey: "pulsing")
}

谢谢!

Answer 1

您的动画是相对于 View 帧的原点的。

通过将圆形路径的中心更改为CGPoint.zero，您将获得以图层原点为中心的脉冲动画。然后将其添加到原点以按钮为中心的新 pulsatingView 中，脉冲层以按钮为中心。

override func viewDidLoad() {
    super.viewDidLoad()
    let circularPath = UIBezierPath(arcCenter: CGPoint.zero, radius: beginButton.bounds.midX, startAngle: -CGFloat.pi / 2, endAngle: 2 * .pi, clockwise: true)

    pulsatingLayer.path = circularPath.cgPath
    pulsatingLayer.strokeColor = UIColor.clear.cgColor
    pulsatingLayer.lineWidth = 10
    pulsatingLayer.fillColor = UIColor.red.cgColor
    pulsatingLayer.lineCap = kCALineCapRound

    let pulsatingView = UIView(frame: .zero)
    view.addSubview(pulsatingView)
    view.bringSubview(toFront: beginButton)

    // use Auto Layout to place the new pulsatingView relative to the button
    pulsatingView.translatesAutoresizingMaskIntoConstraints = false
    pulsatingView.leadingAnchor.constraint(equalTo: beginButton.centerXAnchor).isActive = true
    pulsatingView.topAnchor.constraint(equalTo: beginButton.centerYAnchor).isActive = true

    pulsatingView.layer.addSublayer(pulsatingLayer)
    animatePulsatingLayer()
}