Animate a bezier trajectory drawn in a drawRect () Swift

Question

I have this form that I draw in drawRect()

 var rectanglePath = UIBezierPath() override func drawRect(rect: CGRect) { rectanglePath = UIBezierPath(rect: self.bounds) rectanglePath.fillWithBlendMode(kCGBlendModeMultiply, alpha: 0.7) layer.shouldRasterize = true } 

When the prepareForEditing function is prepareForEditing , I want to animate the prepareForEditing rectangle. I tried

  func prepareForEditing(editing:Bool){ UIView.animateWithDuration(0.5, animations: { self.rectanglePath = makeNewShape() } ) } 

Nothing happens. Could you tell me what happened to my code?

Answer 1

To animate CGPath, you cannot use the UIView.animation methods. I created a custom subclass of UIView to show you how you can animate the CGPaths form, please refer to the comments and make changes to your requirements:

 class MyView: UIView { let shapeLayer = CAShapeLayer() let maskLayer = CAShapeLayer() var rectanglePath = UIBezierPath() override func didMoveToSuperview() { super.didMoveToSuperview() backgroundColor = UIColor.clear // initial shape of the view rectanglePath = UIBezierPath(rect: bounds) // Create initial shape of the view shapeLayer.path = rectanglePath.cgPath shapeLayer.strokeColor = UIColor.black.cgColor shapeLayer.fillColor = UIColor.clear.cgColor layer.addSublayer(shapeLayer) //mask layer maskLayer.path = shapeLayer.path maskLayer.position = shapeLayer.position layer.mask = maskLayer } func prepareForEditing(editing:Bool){ let animation = CABasicAnimation(keyPath: "path") animation.duration = 2 // Your new shape here animation.toValue = UIBezierPath(ovalIn: bounds).cgPath animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) // The next two line preserves the final shape of animation, // if you remove it the shape will return to the original shape after the animation finished animation.fillMode = kCAFillModeForwards animation.isRemovedOnCompletion = false shapeLayer.add(animation, forKey: nil) maskLayer.add(animation, forKey: nil) } } 

Answer 2

UIBezierPath for drawing a border on a UIButton with animations such as a loader (Swift 5)

 func animation(){ CATransaction.begin() let layer : CAShapeLayer = CAShapeLayer() layer.strokeColor = UIColor.purple.cgColor layer.lineWidth = 3.0 layer.fillColor = UIColor.clear.cgColor let path : UIBezierPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: self.btn.frame.size.width + 2, height: self.btn.frame.size.height + 2), byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 5.0, height: 0.0)) layer.path = path.cgPath let animation : CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd") animation.fromValue = 0.0 animation.toValue = 1.0 animation.duration = 7.0 CATransaction.setCompletionBlock{ [weak self] in print("Animation completed") } layer.add(animation, forKey: "myStroke") CATransaction.commit() self.btn.layer.addSublayer(layer) } 

Note: exit