CALayer 圆形蒙版动画不正确的行为 + Swift

Question

几天来我一直在尝试制作这个动画。我正在尝试为蒙版的大小设置动画，基本上是取一个大圆圈（蒙版）并缩小它。

@IBOutlet weak var myView: UIView!

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

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

        animateMask()
    }

    func presentMaskScreenWithAnimation () {

        //Setup Mask Layer
        let bounds = myView.bounds
        let maskLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.fillColor = UIColor.brown.cgColor

        //CropCircle Out of mask Layer
        let initialCircle = CGRect(x: 10, y: 10, width: 300, height: 300)
        let path = UIBezierPath(roundedRect: initialCircle, cornerRadius: initialCircle.size.width/2)

        path.append(UIBezierPath(rect: bounds))
        maskLayer.path = path.cgPath
        maskLayer.fillRule = kCAFillRuleEvenOdd

        myView.layer.mask = maskLayer

        //Define new circle path
        let circlePath2 = CGRect(x: 50, y: 50, width: 100, height: 100)
        let path2 = UIBezierPath(roundedRect: circlePath2, cornerRadius: circlePath2.size.width/2)


        //Create animation
        let anim = CABasicAnimation(keyPath: "path")



            anim.fromValue = path.cgPath
            anim.toValue = path2.cgPath
            anim.duration = 3.0
            anim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

            maskLayer.add(anim, forKey: nil)
    }

这段代码设置了遮罩并开始对其进行动画处理，但是它反转了整个 maskLayer，我试图只对圆的路径进行动画处理，大 -> 小

开始

完成

Answer 1

在let path2 = UIBezierPath(roundedRect: circlePath2, cornerRadius: circlePath2.size.width/2)之后添加path2.append(UIBezierPath(rect: bounds))。另外不要忘记在最后做 maskLayer.path = path2.cgPath，如果你想让缩小的蒙版在动画后保持不变。

CALayer 圆形蒙版动画不正确的行为 + Swift

CALayer circle mask animation incorrect behaviour + Swift

animation

calayer

ios

swift