2016-11-25 4 views
1

Ich habe versucht, diese Animation für ein paar Tage jetzt zu tun. Ich versuche die Größe meiner Maske zu animieren, indem ich einen großen Kreis (Maske) nehme und verkleinere.CALayer Cricle Mask Animation falsches Verhalten + swift

@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) 
    } 

Dieser Code setzt die Maske auf und beginnt sie zu animieren, jedoch kehrt er die gesamte Maskenebene, ich versuche, den Weg des Kreises nur zu animieren, Large -> Kleine

starten enter image description here

Finished enter image description here

Antwort

2

Füge path2.append(UIBezierPath(rect: bounds)) nach let path2 = UIBezierPath(roundedRect: circlePath2, cornerRadius: circlePath2.size.width/2) hinzu. Vergessen Sie auch nicht, am Ende maskLayer.path = path2.cgPath zu tun, wenn Sie möchten, dass die Schrumpfmaske nach der Animation bleibt.

+0

f @ # $ ja! Danke Kumpel – user934902