CABasicAnimation 圆圈 CAShapeLayer 在地图上移动而不是缩放

Posted 2023-03-11

【中文标题】CABasicAnimation 圆圈 CAShapeLayer 在地图上移动而不是缩放

【英文标题】：CABasicAnimation circle CAShapeLayer moving across the map instead of scaling

【发布时间】：2017-11-29 10:56:57

【问题描述】：

我正在尝试创建一个隐藏视图的动画。起初，它从屏幕上的一个点（例如 150）开始，然后按比例放大直到适合整个屏幕。这是我尝试过的

public func testAnimation(anchor : CGRect)
    self.isHidden = false
    let mask = CAShapeLayer()
    let radius = 15
    mask.path = UIBezierPath(roundedRect: CGRect(x: 150,y: 150, width:  Double(radius), height: Double(radius)), cornerRadius: CGFloat(radius/2)).cgPath
    mask.position = CGPoint(x: 150,y: 150 )
    mask.fillColor = UIColor.blue.cgColor

    self.layer.mask = mask
    let oldBounds = mask.bounds
    let newBounds = CGRect.init(x: 150,y: 150,width: 1600,height: 1600)
    let revealAnimation = CABasicAnimation(keyPath: "bounds")
    revealAnimation.fromValue = NSValue(cgRect: oldBounds)
    revealAnimation.toValue = NSValue(cgRect: newBounds)
    revealAnimation.duration = 5

    //Keep the bounds after the animation completes.
    mask.bounds = newBounds
    mask.add(revealAnimation, forKey: "revealAnimation")

这个 sn-p 的问题是它会导致一个小圆圈在屏幕中移动，而不是让圆圈变大。我使用了这里找到的代码：http://blog.ericd.net/2015/10/22/swift-animating-a-mask-for-a-uiview/（showUnderView 函数），它就像一个魅力。我将 CALayer 换成 CAShapeLayer 以获得圆形效果，但它不起作用。

【参考方案1】：

为 CALayer 的边界设置动画本来可以，但在这里您使用的是 CAShapeLayer。设置新边界不会重绘和缩放形状。

相反，您应该尝试直接为形状设置动画：

let finalRadius: CGFloat = 1600
let finalPath = UIBezierpath(roundedRect: CGRect(x: 150, y: 150, width: finalRadius, height: finalRadius), cornerRadius: finalRadius / 2).cgPath

let revealAnimation = CABasicAnimation(keyPath: "path")
revealAnimation.toValue = finalPath
revealAnimation.duration = 5
mask.add(revealAnimation, forKey: "revealAnimation")

这将重新绘制所需大小的形状。

如果您想保持形状居中，您可以同时为position 设置动画。

【讨论】：

我怎样才能保持位置稳定？我试过这个let finalPosition = CGPoint(x:150,y:150) let animAnim = CABasicAnimation(keyPath: "position") animAnim.toValue = finalPosition animAnim.duration = 5 mask.add(animAnim,forKey: nil) 但圆圈仍在屏幕上移动

初始位置已经是 CGPoint(x: 150, y: 150)，所以你必须找到最终位置，这样你的形状的中心就在同一个地方。 let currentCenter = CGPoint(x: 150 + radius / 2, y: 150 + radius / 2) let finalPosition = CGPoint(x: currentCenter.x - 1600 / 2, y: currentCenter.y - 1600 / 2)