How to animate drawing UIBezierPath in swift

Does anyone know how to animate a UIBezierPath drawing in a custom view? So it looks like the iPhone has lifted the pen and is drawing on the screen slowly enough to see it.

Just tell me that I have a path similar to the following:

var bezierPath = UIBezierPath()
bezierPath.moveToPoint(CGPointMake(49.5, 14.5))
bezierPath.addCurveToPoint(CGPointMake(106.5, 14.5), controlPoint1: CGPointMake(106.5, 14.5), controlPoint2: CGPointMake(106.5, 14.5))
bezierPath.addCurveToPoint(CGPointMake(119.5, 26.5), controlPoint1: CGPointMake(106.5, 14.5), controlPoint2: CGPointMake(119.5, 14.5))
bezierPath.addCurveToPoint(CGPointMake(119.5, 75.5), controlPoint1: CGPointMake(119.5, 38.5), controlPoint2: CGPointMake(119.5, 75.5))
bezierPath.addCurveToPoint(CGPointMake(106.5, 88.5), controlPoint1: CGPointMake(119.5, 75.5), controlPoint2: CGPointMake(122.5, 88.5))
bezierPath.addCurveToPoint(CGPointMake(49.5, 88.5), controlPoint1: CGPointMake(90.5, 88.5), controlPoint2: CGPointMake(49.5, 88.5))
bezierPath.addCurveToPoint(CGPointMake(36.5, 75.5), controlPoint1: CGPointMake(49.5, 88.5), controlPoint2: CGPointMake(36.5, 89.5))
bezierPath.addCurveToPoint(CGPointMake(36.5, 26.5), controlPoint1: CGPointMake(36.5, 61.5), controlPoint2: CGPointMake(36.5, 26.5))
bezierPath.addCurveToPoint(CGPointMake(49.5, 14.5), controlPoint1: CGPointMake(36.5, 26.5), controlPoint2: CGPointMake(35.5, 14.5))
UIColor.redColor().setFill()
bezierPath.fill()
UIColor.blackColor().setStroke()
bezierPath.lineWidth = 10
bezierPath.stroke()

      

This draws a rounded rectangle and is written inside the drawRect function of the custom class.

Does anyone know how to animate drawing of this?

+3


source to share


1 answer


You can use CAShapeLayer and animate the property strokeEnd

(you can use CABasicAnimation to control animation details) There is an example in this post .



+7


source







All Articles