CALayer倒置面具揭示动画

Question

我正在努力使用倒置CALayer面具的动画。目的是： 1.创建圆形遮罩（在此示例中为黄色圆圈），其中通过遮罩可以看到背景视图的内容（黄色背景颜色）。 2.将圆形蒙版从零直径设置为所需直径（显示效果）

初始状态：

最后状态：

请注意：两个观看内容都是包含图像和控件的真实内容，而不仅仅是填充的背景颜色。

第一部分完成了。第二部分（动画）存在问题。 第一部分的示例代码如下：

class ViewController: UIViewController {

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        view.backgroundColor = .yellow

        let childView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 1024.0, height: 768.0))
        childView.backgroundColor = .red
        view.addSubview(childView)

        let maskRect = CGRect(origin: CGPoint(x: 0.0, y: 0.0), size: CGSize(width: 200.0, height: 200.0))
        addInvertedMask(toView: childView, withinRect: maskRect)
}

    fileprivate func addInvertedMask(toView view: UIView, withinRect rect: CGRect) {
        let maskLayer = CAShapeLayer()

        let path = UIBezierPath()

        // Invert Mask
        let rectFullscreenPath = UIBezierPath(rect: view.bounds)
        path.append(rectFullscreenPath)
        maskLayer.fillRule = kCAFillRuleEvenOdd

        let circleMaskPath = UIBezierPath(roundedRect: rect, cornerRadius: rect.size.width/2)
        path.append(circleMaskPath)

        maskLayer.path = path.cgPath

        view.layer.mask = maskLayer;
    }
}

可能我错了，所以这里的动画是不可能的。但是我没有找到任何解决办法以其他方式创建倒置掩模。

感谢您的帮助！

更新

经过一番研究后，我决定采用另一种方法：

• 我制作了UIView的截图，后来我将其用作遮罩（参见黄色圆圈）。请参阅以下功能：

  fileprivate func makeMapScreenshot(view: UIView) -> UIImage? {
      UIGraphicsBeginImageContextWithOptions(view.bounds.size, true, 0)
      view.drawHierarchy(in: view.bounds, afterScreenUpdates: true)
      let snapshot = UIGraphicsGetImageFromCurrentImageContext()
      UIGraphicsEndImageContext()
  
      return snapshot
  }
  

• 我将屏幕截图缩小到我的面具大小（黄色圆圈），扩展名/功能如下：

  extension UIImage {
      func cropping(to rect: CGRect) -> UIImage {
      UIGraphicsBeginImageContextWithOptions(rect.size, false, self.scale)
  
          self.draw(in: CGRect(x: -rect.origin.x, y: -rect.origin.y, width: self.size.width, height: self.size.height))
  
          let croppedImage = UIGraphicsGetImageFromCurrentImageContext()!
          UIGraphicsEndImageContext()
  
          return croppedImage
      }
  }
  

作为最后一步，我在黄色圆圈视图的CALayer上创建了一个带有剪裁边界的半径。在此之前我将UIImage放入UIImageView对象中：

    let yellowCircleImageView = UIImageView(image: mapSnapshotImageCropped)
    yellowCircleImageView.layer.cornerRadius = yellowCircleImageView.frame.size.width / 2
    yellowCircleImageView.clipsToBounds = true

现在可以对黄色圆圈UImageView进行定位/调整大小和动画。