CALayer cricle mask動畫不正確的行爲+ swift

Question

我一直在試圖做這個動畫幾天了。我正在嘗試動畫我的面具的大小，bascially採取一個大圓圈（面具），並縮小它。

@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。