如何繪製一個矩形動畫行程

Question

我知道如何繪製一個矩形輪廓的屏幕是這樣的：

- (void)drawRect:(CGRect)rect { 
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGPathRef path = CGPathCreateWithRect(rect, NULL); 
    [[UIColor greenColor] setStroke]; 
    CGContextAddPath(context, path); 
    CGContextDrawPath(context, kCGPathFillStroke); 
    CGPathRelease(path); 
} 

但我要的是有「筆」，從頂部開始矩形的中心並以某種可變速度圍繞邊緣繪製，以便您可以在「筆」移動時真正看到繪製的矩形。這可能嗎？怎麼樣？

Answer 1

你可以很容易地使用CALayerShape用鋼筆形象和做這樣的（我添加了一個按鈕，從而引發了圖紙的視圖）：

#import "ViewController.h" 

@interface ViewController() { 
    UIBezierPath *_drawPath; 
    CALayer  *_pen; 
    UIBezierPath *_penPath; 
    CAShapeLayer *_rectLayer; 
} 
@end 

@implementation ViewController 

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 
    UIImage *penImage = [UIImage imageNamed:@"pen"]; 

    _drawPath = [UIBezierPath bezierPathWithRect:self.view.frame]; 

    _penPath = [UIBezierPath bezierPath]; 
    [_penPath moveToPoint:CGPointMake(penImage.size.width/2.f, penImage.size.height/2.f)]; 
    [_penPath addLineToPoint:CGPointMake(self.view.frame.size.width - penImage.size.width/2.f, penImage.size.height/2.f)]; 
    [_penPath addLineToPoint:CGPointMake(self.view.frame.size.width - penImage.size.width/2.f, self.view.frame.size.height - penImage.size.height/2.f)]; 
    [_penPath addLineToPoint:CGPointMake(penImage.size.width/2.f, self.view.frame.size.height - penImage.size.height/2.f)]; 
    [_penPath addLineToPoint:CGPointMake(penImage.size.width/2.f, penImage.size.height/2.f)]; 

    _rectLayer = [[CAShapeLayer alloc] init]; 
    _rectLayer.path = _drawPath.CGPath; 
    _rectLayer.strokeColor = [UIColor greenColor].CGColor; 
    _rectLayer.lineWidth = 5.f; 
    _rectLayer.fillColor = [UIColor clearColor].CGColor; 
    _rectLayer.strokeEnd = 0.f; 
    [self.view.layer addSublayer:_rectLayer]; 

    _pen = [CALayer layer]; 
    _pen.bounds = CGRectMake(0, 0, 25.f, 25.f); 
    _pen.position = CGPointMake(penImage.size.width/2.f, penImage.size.height/2.f); 
    _pen.contents = (id)(penImage.CGImage); 
    _pen.position = CGPointMake(penImage.size.width/2.f, penImage.size.height/2.f); 
    [self.view.layer addSublayer:_pen]; 
} 

- (IBAction)drawRectangle:(id)sender 
{ 
    _rectLayer.strokeEnd = 1.f; 

    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    anim.fromValue = (id)[NSNumber numberWithFloat:0]; 
    anim.toValue = (id)[NSNumber numberWithFloat:1.f]; 
    anim.duration = 5.f; 
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; 
    [_rectLayer addAnimation:anim forKey:@"drawRectStroke"]; 

    CAKeyframeAnimation *penMoveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
    penMoveAnimation.path = _penPath.CGPath; 
    penMoveAnimation.rotationMode = kCAAnimationRotateAuto; 
    penMoveAnimation.duration = 5.0; 
    penMoveAnimation.calculationMode = kCAAnimationPaced; 
    [_pen addAnimation:penMoveAnimation forKey:@"followStroke"]; 
} 

編輯：添加代碼筆跟蹤行程，繼承人所使用的2x圖像：http://cl.ly/image/173J271Y003B

注意：唯一的問題是，當筆接近旋轉點或轉角時，它仍然與筆畫同步，因此筆看起來像是在筆畫的後面，直到它翻轉，一個簡單的解決方案可能是曲線，但林不知道你的總體目標是什麼。