使用CAShapeLayer设置蒙版部分的动画透明度

Question

我有一个.brown backgroundColor的视图。

在该视图中，我有一个backgroundView，其中有backgroundColor: UIColor.black.withAlphaComponent(0.5)。

然后我想在此backgroundView中有一个透明框，该框显示了底层视图。我已经实现了这一点，但是我不能通过设置其透明度来做到这一点，我的代码仅将“切出区域”增大到所需的大小，而不是设置其透明度。

具有backgroundView及其0.5 alpha的棕色视图

在backgroundView中添加的图层显示了棕色视图的一部分

我为获得现在所拥有的代码是：

func addIndicatorTo(global frame: CGRect) {
    let shape = CAShapeLayer()
    let targetRect = convert(frame, from: nil).insetBy(dx: -4, dy: -4)
    let animation = CABasicAnimation(keyPath: "path")

    let toPath = CGMutablePath()
    toPath.addRect(bounds)
    toPath.addPath(UIBezierPath(roundedRect: targetRect,
                                byRoundingCorners: .allCorners,
                                cornerRadii: CGSize(width: 4, height: 4)).cgPath)
    toPath.closeSubpath()

    let fromPath = CGMutablePath()
    fromPath.addRect(bounds)
    fromPath.addPath(UIBezierPath(roundedRect: targetRect.insetBy(dx: targetRect.width / 2,
                                                                  dy: targetRect.height / 2),
                                  byRoundingCorners: .allCorners,
                                  cornerRadii: CGSize(width: 4, height: 4)).cgPath)
    fromPath.closeSubpath()

    animation.fromValue = fromPath
    animation.toValue = toPath
    animation.duration = 0.5

    shape.fillRule = .evenOdd
    shape.path = animation.fromValue as! CGPath

    backgroundView.layer.mask = shape
    shape.add(animation, forKey: nil)

    CATransaction.begin()
    CATransaction.setDisableActions(true)
    shape.path = toPath
    CATransaction.commit()
}

Answer 1

不确定这是否是一个“好的”解决方案。但是我会继续做下去，直到有人告诉我如何更优雅地解决它！

基本上，我只是用切出的框创建一个遮罩，然后用“切出”区域绘制一个新的boxLayer。然后，我为opacity中的boxLayer设置动画。

func addIndicatorTo(global frame: CGRect) {
    let maskLayer = CAShapeLayer()
    let boxLayer = CAShapeLayer()

    let targetRect = convert(frame, from: nil).insetBy(dx: -4, dy: -4)
    let animation = CABasicAnimation(keyPath: "opacity")

    let toPath = CGMutablePath()

    let boxPath = UIBezierPath(roundedRect: targetRect,
                               byRoundingCorners: .allCorners,
                               cornerRadii: CGSize(width: 4, height: 4)).cgPath
    toPath.addRect(bounds)
    toPath.addPath(boxPath)
    toPath.closeSubpath()

    boxLayer.fillColor = UIColor.black.withAlphaComponent(0.5).cgColor
    boxLayer.path = boxPath

    animation.fromValue = 1.0
    animation.toValue = 0.0
    animation.duration = 0.5

    maskLayer.fillRule = .evenOdd
    maskLayer.path = toPath

    backgroundView.layer.mask = maskLayer
    layer.addSublayer(boxLayer)
    boxLayer.add(animation, forKey: nil)

    CATransaction.begin()
    CATransaction.setDisableActions(true)
    boxLayer.opacity = 0.0
    CATransaction.commit()
}