iOS Animations - Part 2
Drawing bezier curve using core animation
Today we are going to learn how to draw arbitrary shapes using
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 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
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)];
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
*We will create another less complex shape.*
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
// 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