如何防止 CABasicAnimation 缩放 UIView 中的所有内容？答案

【问题标题】：How to prevent CABasicAnimation from scale all content inside UIView?如何防止 CABasicAnimation 缩放 UIView 中的所有内容？
【发布时间】：2018-01-04 14:01:05
【问题描述】：

我写这个是为了将心跳动画应用到 CAShapeLayer，在这个工作正常之后，我需要在 UIButton (btnTest) 后面实现它而不缩放 UIButton 或任何其他内容。

@IBOutlet weak var btnTest: UIButton!

let btnLayer = CAShapeLayer()

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

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    btnTest.layer.removeAllAnimations()

    let ovalPath = UIBezierPath(arcCenter: CGPoint(x: btnTest.frame.midX, y: btnTest.frame.midY), radius: 100, startAngle: 0*(CGFloat.pi / 180), endAngle: 360*(CGFloat.pi / 180), clockwise: true)

    btnLayer.path = ovalPath.cgPath
    btnLayer.fillColor = UIColor.red.cgColor
    btnLayer.contentsGravity = "center"
    btnLayer.opacity = 0.3
    self.view.layer.addSublayer(btnLayer)

    let theAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
    theAnimation.duration       = 0.75
    theAnimation.repeatCount    = Float.infinity
    theAnimation.autoreverses   = true
    theAnimation.fromValue      = 1.0
    theAnimation.toValue        = 1.2
    theAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
    self.view.layer.add(theAnimation, forKey: nil)
}

这是结果gif

另一个解决方案是改变这一行：

self.view.layer.add(theAnimation, forKey: nil)

到这里：

btnLayer.add(theAnimation, forKey: nil)

结果是这样的：gif

解决这个问题的任何想法！

【问题讨论】：

标签： ios swift3 uibutton cashapelayer cabasicanimation

【解决方案1】：

您想为您的btnLayer 设置动画。它从错误位置设置动画的原因可能是图层的anchorPoint 位于 0,0，应将其设置为 0.5、0.5。

编辑：

实际上，我认为问题在于您将btnLayer 放在哪里。你应该让它成为按钮视图层的子层，并给它一个作为按钮层边界的框架：

btnTest.layer.addSublayer(btnLayer)
btnLayer.frame = btnTest.layer.bounds

【讨论】：

我已经添加了您建议的带有/不带有锚点的答案，CAShaper 层移动到了右下角。 :(
但是你同意了我的回答？您可以发布自己的答案来显示有效的代码，而不是编辑我的答案吗？
您的回答是完成这项工作的关键，第一行是您的，第二行只是给它一个定义的矩形！我认为接受你的答案并让它属于我是不友好的！您有权获得可接受的答案。

【解决方案2】：

您可以这样做，只需将图层与缩放动画一起平移即可。为此，您需要创建一个 CAAnimationGroup。

   override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    btnTest.layer.removeAllAnimations()

    let ovalPath = UIBezierPath(arcCenter: CGPoint(x: btnTest.frame.midX, y: btnTest.frame.midY), radius: 100, startAngle: 0*(CGFloat.pi / 180), endAngle: 360*(CGFloat.pi / 180), clockwise: true)

    btnLayer.path = ovalPath.cgPath
    btnLayer.fillColor = UIColor.red.cgColor
    btnLayer.anchorPoint = CGPoint.init(x: 0.5, y: 0.5)
    btnLayer.contentsGravity = "center"
    btnLayer.opacity = 0.3
    self.view.layer.addSublayer(btnLayer)

    let theAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
    theAnimation.fromValue      = 1.0
    theAnimation.toValue        = 1.2

    let theAnimationTranslationX = CABasicAnimation(keyPath: "transform.translation.x")
    theAnimationTranslationX.fromValue      = btnTest.bounds.minX
    theAnimationTranslationX.toValue        = btnTest.bounds.minX - 40

    let theAnimationTranslationY = CABasicAnimation(keyPath: "transform.translation.y")
    theAnimationTranslationY.fromValue      = btnTest.bounds.minY
    theAnimationTranslationY.toValue        = btnTest.bounds.minY - 80


    let animationGroup = CAAnimationGroup.init()
    animationGroup.duration       = 0.75
    animationGroup.repeatCount    = Float.infinity
    animationGroup.autoreverses   = true
    animationGroup.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
    animationGroup.animations = [theAnimation,theAnimationTranslationX,theAnimationTranslationY]

    btnLayer.add(animationGroup, forKey: nil)
}

【讨论】：

【解决方案3】：

1- 首先制作能够为UIView 设置动画的心形，我们将其命名为heartView。

2- self.view.addsubview(heartView)（self.view 可以更改为您想要的任何父级）

3- 制作一个名为heartButton 的不可见按钮，并赋予它与heartView 相同的框架

4- self.view.addsubview(heartButton)（self.view 可以更改为您想要的任何父级）

5- 启动 heartView 动画。

这里的关键点不是在动画视图上添加按钮，而是在它们的父视图上添加按钮（self.view 在这种情况下）因为如果button 在心脏顶部并且心脏正在动画，按钮将采用动画。

希望这会有所帮助！

【讨论】：