Question

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

如何仅在动画过程中增加CAShapeLayer的比例，同时保持其在视图中的位置不变？

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

要对此进行测试：

创建一个新项目
在视图中心添加一个按钮
将其作为名称为beginButton的IBOutlet链接到viewControllers代码文件

这是我的代码：

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

您的动画相对于pinImageView?.restorationIdentifier = "pin"的帧的原点。

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

pulsatingView

Answer 2

您需要阅读转换矩阵。（任何有关3D计算机图形学的书都应包含相应的章节。）

比例尺转换以当前原点为中心。因此，如果您的形状不以原点为中心，则会在朝着的方向绘制。要向自己的中心缩放形状，您需要执行以下操作：

创建身份转换用形状中心的（-x，-y）进行平移将所需的比例添加到变换添加（x，y）的“平移”将形状向后移

将变换转换为图层的变换。

（我总是必须认真思考才能正确解决这些问题。我在周末当地时间上午7:00之前将上面的内容写下来，没有足够的咖啡因。这可能不完全正确，但应该可以给您带来灵感。）

CABasicAnimation on transform.scale在X和Y轴上转换CAShapeLayer

2 个答案: