A library for animated line drawing (like an invisible pencil). Allows you to declare a series of drawing steps, set the speed (points per second) and then tell it to start drawing. I'm just getting started on this library so it's very basic right now. More awesomeness to come.
In your Podfile, add this line:
pod "MTPencil"
pod? => https://github.com/CocoaPods/CocoaPods/
NOTE: You may need to add -all_load to "Other Linker Flags" in your targets build settings if the pods library only contains categories.
Here we create a pencil object, telling it what view to draw in. Then, we define a series of moving or drawing steps, all starting where the last one left off, then you tell it to begin drawing.
@interface MTTestView ()
@property (strong) MTPencil *pencil;
@end
@implementation MTTestView
- (void)drawPicture
{
MTPencilSpeed speed = MTPencilSpeedVerySlow;
_pencil = [MTPencil pencilWithView:self.view];
[[[_pencil config] delay:0.25] strokeColor:[UIColor darkGrayColor]];
[[[_pencil stroke] angle:MTPencilStepAngleUpRight distance:20] speed:speed];
[[[_pencil stroke] angle:MTPencilStepAngleUp distance:50] speed:speed];
[[[_pencil stroke] angle:MTPencilStepAngleRight distance:100] speed:speed];
[[[_pencil stroke] angle:MTPencilStepAngleDown distance:200] speed:speed];
[[[_pencil stroke] angle:MTPencilStepAngleLeft distance:100] speed:speed];
[[[_pencil stroke] angle:MTPencilStepAngleUp distance:123] speed:speed];
[[[_pencil stroke] angle:MTPencilStepAngleUpLeft distance:20] speed:speed];
[[[_pencil stroke] to:CGPointMake(200, 200)] speed:speed];
[_pencil beginWithCompletion:^(MTPencil *pencil) {
}];
}
@end
Using relative directions and to edges:
_pencil = [MTPencil pencilWithView:self.view];
[[[[_pencil move] to:CGPointMake(100, 200)] speed:300] width:1];
[[_pencil draw] angle:-20 distance:100];
[[_pencil draw] up:20];
[[_pencil draw] right:50];
[[_pencil draw] down:20];
[[_pencil draw] left:20];
[[_pencil draw] toEdge:UIRectEdgeRight];
[[[_pencil draw] toEdge:UIRectEdgeBottom] inset:5];
[[[_pencil draw] toEdge:UIRectEdgeLeft] inset:10];
[[[_pencil draw] toEdge:UIRectEdgeTop] inset:10];
[[_pencil draw] toEdge:UIRectEdgeRight];
Draw any CGPath:
_pencil = [MTPencil pencilWithView:self.view];
CGRect frame = CGRectMake(0, 90, 290, 289);
UIBezierPath* bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint: CGPointMake(CGRectGetMinX(frame) + 111.5, CGRectGetMinY(frame) + 178.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 47.5, CGRectGetMinY(frame) + 127.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 84.5, CGRectGetMinY(frame) + 179.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 47.5, CGRectGetMinY(frame) + 127.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 67.5, CGRectGetMinY(frame) + 81.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 47.5, CGRectGetMinY(frame) + 127.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 35.32, CGRectGetMinY(frame) + 21.56)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 120.5, CGRectGetMinY(frame) + 108.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 99.68, CGRectGetMinY(frame) + 141.44) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 140.56, CGRectGetMinY(frame) + 160.44)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 137.5, CGRectGetMinY(frame) + 36.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 100.44, CGRectGetMinY(frame) + 56.56) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 108.58, CGRectGetMinY(frame) - 41.99)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 202.5, CGRectGetMinY(frame) + 253.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 166.42, CGRectGetMinY(frame) + 114.99) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 193.71, CGRectGetMinY(frame) + 361.46)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 166.5, CGRectGetMinY(frame) + 84.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 211.29, CGRectGetMinY(frame) + 145.54) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 141.25, CGRectGetMinY(frame) + 87.96)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 191.5, CGRectGetMinY(frame) + 29.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 191.75, CGRectGetMinY(frame) + 81.04) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 217.32, CGRectGetMinY(frame) + 35.41)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 247.5, CGRectGetMinY(frame) + 16.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 165.68, CGRectGetMinY(frame) + 23.59) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 253.95, CGRectGetMinY(frame) + 2.74)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 198.5, CGRectGetMinY(frame) + 90.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 241.05, CGRectGetMinY(frame) + 30.26) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 199.96, CGRectGetMinY(frame) + 46.94)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 217.5, CGRectGetMinY(frame) + 255.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 197.04, CGRectGetMinY(frame) + 134.06) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 217.08, CGRectGetMinY(frame) + 247.94)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 273.5, CGRectGetMinY(frame) + 144.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 217.92, CGRectGetMinY(frame) + 263.06) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 302.26, CGRectGetMinY(frame) + 183.11)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 240.5, CGRectGetMinY(frame) + 169.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 244.74, CGRectGetMinY(frame) + 105.89) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 240.5, CGRectGetMinY(frame) + 169.5)];
[[[_pencil draw] path:bezierPath.CGPath] duration:5];
Draw a string of text:
_pencil = [MTPencil pencilWithView:self.view];
[[_pencil move] to:CGPointMake(10, 100)];
[[[[_pencil draw] string:@"Mysterious\nTrousers"] font:[UIFont systemFontOfSize:60]] duration:3];
Scrub the drawing of an entire series of pencil steps:
- (IBAction)scrubSliderDidChange:(UISlider *)sender
{
[_pencil scrub:sender.value];
}
Use jQuery easing functions to make your drawing feel a little more natural:
_pencil = [MTPencil pencilWithView:self.view];
[[_pencil config] easingFunction:kMTPencilEaseOutExpo];
[[_pencil config] duration:1.0];
[[_pencil move] to:CGPointMake(100, 150)];
[[[_pencil draw] angle:MTPencilStepAngleUpRight distance:20] easingFunction:kMTPencilEaseOutBounce];
[[[_pencil draw] angle:MTPencilStepAngleUp distance:50] easingFunction:kMTPencilEaseInExpo];
[[[_pencil draw] angle:MTPencilStepAngleRight distance:100] easingFunction:kMTPencilEaseInOutExpo];
[[[_pencil draw] angle:MTPencilStepAngleDown distance:200] easingFunction:kMTPencilEaseInBounce];
[[[_pencil draw] angle:MTPencilStepAngleLeft distance:100] easingFunction:kMTPencilEaseOutElastic];
[[[_pencil draw] angle:MTPencilStepAngleUp distance:123] easingFunction:kMTPencilEaseInOutExpo];
[[[_pencil draw] angle:MTPencilStepAngleUpLeft distance:20] easingFunction:kMTPencilEaseLinear];