iOS Animations - Part 2

Drawing bezier curve using core animation

Today we are going to learn how to draw arbitrary shapes using UIBezierPath and CAShapeLayer classes.

Drawing shape with UIBezierPath is very simple. First you have to make an outline using UIBezierPath and then use this path to assign to path for CAShapeLayer object. CAShapeLayer will finally be responsible for actually drawing shapes on the viewport.

CAShapeLayer will also be responsible for adjusting various shape parameters such as line and line end types, stroke color, shape fill color and line width etc.

Draw human shape using Core Animation

First, use UIBezierPath do draw shape outline. We will achieve this by moving from one point to another and adding edges joining these points as we move from point to point.

UIBezierPath* path = [[UIBezierPath alloc] init];
    CGFloat containerOneCenterX = self.containerOne.center.x - 20;
// Draw shape head.
[path addArcWithCenter:CGPointMake(containerOneCenterX, 20) radius:20 startAngle:0 endAngle:2*M_PI clockwise:YES];
// Draw shape hands
[path moveToPoint:CGPointMake(containerOneCenterX, 40)];
[path addLineToPoint:CGPointMake(containerOneCenterX, 100)];
[path moveToPoint:CGPointMake(containerOneCenterX - 30, 70)];
[path addLineToPoint:CGPointMake(containerOneCenterX + 30, 70)];
// Draw shape torso and legs
[path moveToPoint:CGPointMake(containerOneCenterX, 100)];
[path addLineToPoint:CGPointMake(containerOneCenterX - 20, 150)];
[path moveToPoint:CGPointMake(containerOneCenterX, 100)];
[path addLineToPoint:CGPointMake(containerOneCenterX + 20, 150)];

Now use CAShapeLayer to actually draw this shape on viewport

UIView* superView = self.view;
CAShapeLayer* shapeLayer = [CAShapeLayer new];
// The border color for shape edges
shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
// Fill color to fill in solid shapes
shapeLayer.fillColor = [UIColor clearColor].CGColor;
// Style for edge ends
shapeLayer.lineCap = kCALineCapRound;
// Line dash patterns. You may specify any arbitrary pattern by varying the values in pattern array
shapeLayer.lineDashPattern = @[@1, @3, @4, @2];
// How the line joins should look like
shapeLayer.lineJoin = kCALineJoinRound;
// Width for line strokes
shapeLayer.lineWidth = 2.0f;
// Assign the previously created bezier path 'path' to shapeLayer path.
shapeLayer.path = path.CGPath;
// Add shape layer as the sub layer to the superView layer
[superView.layer addSublayer:shapeLayer];

If everything went fine, the shape will look like as follows

Drawing rectangle with two rounded and two sharp edged corners.

We will use the similar method we used earlier. First draw the UIBezierPath corresponding to shape and then draw the shape on viewport using CAShapeLayer object.

// First draw rectangle of suitable size
CGRect rect = CGRectMake(10, 10, self.containerTwo.frame.size.width - 20, 120);
// Decide radius for rectangle corners for which we are going to apply round shape
CGSize radius = CGSizeMake(50, 50);
// A mask to decide corners where we want to apply rounded edges
UIRectCorner rectangleCorner = UIRectCornerBottomLeft | UIRectCornerTopRight;
// Bezier path with shape of rectangle. It has two sharp corner on top left and bottom right. It also has two rounded corners on top right and bottom left as dictated by rectangleCorner mask above
UIBezierPath* customeRoundedCornerBezierPath = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:rectangleCorner cornerRadii:radius];
CAShapeLayer* shapeLayerForRoundedCornerRectangle = [CAShapeLayer new];
shapeLayerForRoundedCornerRectangle.strokeColor = [UIColor redColor].CGColor;
shapeLayerForRoundedCornerRectangle.fillColor = [UIColor clearColor].CGColor;
shapeLayerForRoundedCornerRectangle.lineCap = kCALineCapRound;
shapeLayerForRoundedCornerRectangle.lineWidth = 3.0f;
shapeLayerForRoundedCornerRectangle.path = customeRoundedCornerBezierPath.CGPath;
[self.containerTwo.layer addSublayer:shapeLayerForRoundedCornerRectangle];

This will draw rounded corners rectangular shape as follows

Hope you enjoyed this post. Next time I will teach you not only how to draw shapes, but how to animate the drawing

You can find full source code along with demo and other animation examples on GitHub Repository