Làm thế nào để animate bản vẽ của một CGPath?

Question

Tôi tự hỏi nếu có một cách để làm điều này bằng cách sử dụng Core Animation. Cụ thể, tôi đang thêm một lớp con vào một NSView tùy chỉnh được hỗ trợ lớp và thiết lập ủy nhiệm của nó cho một NSView tùy chỉnh khác. Phương thức drawInRect của lớp đó rút ra một CGPath đơn lẻ:

- (void)drawInRect:(CGRect)rect inContext:(CGContextRef)context 
{ 
    CGContextSaveGState(context); 
    CGContextSetLineWidth(context, 12); 

    CGMutablePathRef path = CGPathCreateMutable(); 
    CGPathMoveToPoint(path, NULL, 0, 0); 
    CGPathAddLineToPoint(path, NULL, rect.size.width, rect.size.height); 

    CGContextBeginPath(context); 
    CGContextAddPath(context, path); 
    CGContextStrokePath(context); 
    CGContextRestoreGState(context); 
} 

Hiệu ứng mong muốn của tôi sẽ là làm sống động bản vẽ của đường này. Đó là, tôi muốn cho dòng thực sự "căng" một cách hoạt hình. Có vẻ như sẽ có một cách đơn giản để làm điều này bằng cách sử dụng Core Animation, nhưng tôi đã không thể bắt gặp bất kỳ điều gì.

Bạn có bất kỳ đề xuất nào về cách tôi có thể đạt được mục tiêu này không?

Answer 1

Chắc chắn — đừng tự vẽ đường. Thêm lớp con cao 12 pixel với màu nền phẳng, bắt đầu bằng khung có chiều rộng bằng 0 và làm nổi bật chiều rộng của chế độ xem của bạn. Nếu bạn cần kết thúc làm tròn, hãy đặt cornerRadius của lớp xuống một nửa chiều cao của nó.

Answer 2

Tôi đã tìm thấy ví dụ về đường dẫn hoạt ảnh này và muốn chia sẻ nó cho bất kỳ ai khác đang tìm cách làm điều này với một số ví dụ về mã.

Bạn sẽ sử dụng StrohartStart và Stroke của CAShapeLayer và yêu cầu sdk 4.2, vì vậy nếu bạn đang tìm cách hỗ trợ iOS SDK cũ hơn, điều này không phải là điều bạn muốn.

Điều thực sự thú vị về các thuộc tính này là chúng có thể hoạt hình. Bằng cách hoạt ảnh strokeEnd 0,0-1,0 qua một thời gian vài giây, chúng ta có thể dễ dàng hiển thị đường dẫn như nó đang được rút ra:

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
pathAnimation.duration = 10.0; 
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; 
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f]; 
[self.pathLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"]; 

Cuối cùng, thêm một lớp thứ hai có chứa hình ảnh của một cây bút và sử dụng một CAKeyframeAnimation để animate nó dọc theo con đường với cùng tốc độ để làm cho hoàn hảo ảo tưởng:

CAKeyframeAnimation *penAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
penAnimation.duration = 10.0; 
penAnimation.path = self.pathLayer.path; 
penAnimation.calculationMode = kCAAnimationPaced; 
[self.penLayer addAnimation:penAnimation forKey:@"penAnimation"]; 

những nguồn có thể được xem here và video giới thiệu here. Đọc những người sáng tạo blog để biết thêm thông tin.