Hoạt ảnh đột quỵ của đoạn đường tròn kết thúc trong toàn bộ hành trình

Question

Tôi đang cố gắng tạo hiệu ứng cho hình dạng của một đoạn đường tròn. Để lưu trữ, tôi sử dụng CABasicAnimations hoạt động tốt.

Hoạt ảnh bắt đầu ở trên và di chuyển yên tĩnh đến một phần ba toàn bộ vòng tròn. Nhưng khi hoạt ảnh kết thúc, vòng tròn đang được vẽ hoàn toàn ngay lập tức.

Làm cách nào để ngăn chặn điều đó?

Đây là mã nguồn của UIView tùy chỉnh của tôi:

- (void)drawRect:(CGRect)rect 
{ 
    int radius = 100; 
    int strokeWidth = 10; 
    CGColorRef color = [UIColor redColor].CGColor; 
    int timeInSeconds = 5; 

    CGFloat startAngle = 0; 
    CGFloat endAngle = 0.33; 

    CAShapeLayer *circle = [CAShapeLayer layer]; 

    circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius].CGPath; 

    circle.position = CGPointMake(CGRectGetMidX(self.frame)-radius, CGRectGetMidY(self.frame)-radius); 

    circle.fillColor = [UIColor clearColor].CGColor; 
    circle.strokeColor = color; 
    circle.lineWidth = strokeWidth; 

    [self.layer addSublayer:circle]; 

    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    drawAnimation.duration   = timeInSeconds; 
    drawAnimation.repeatCount   = 1.0; 
    drawAnimation.removedOnCompletion = NO; 

    drawAnimation.fromValue = [NSNumber numberWithFloat:startAngle]; 
    drawAnimation.toValue = [NSNumber numberWithFloat:endAngle]; 

    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 

    [circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"]; 
} 

Answer 1

Khi bạn áp dụng một hình ảnh động vào một lớp, Core Animation tạo ra một bản sao của lớp và làm sinh động các thuộc tính của bản sao. Lớp gốc được gọi là lớp mô hình và bản sao được gọi là lớp bản trình bày. Một hoạt ảnh không bao giờ thay đổi các thuộc tính của lớp mô hình.

Bạn đã cố sửa lỗi này bằng cách đặt removedOnCompletion thành NO. Bạn cũng sẽ phải đặt fillMode hoạt ảnh để thực hiện công việc này, nhưng đó không thực sự là cách chính xác để tạo hiệu ứng cho thuộc tính.

Cách chính xác là thay đổi thuộc tính trên lớp mô hình của bạn, sau đó áp dụng hoạt ảnh.

// Change the model layer's property first. 
circle.strokeEnd = endAngle; 

// Then apply the animation. 
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
drawAnimation.duration   = timeInSeconds; 
drawAnimation.fromValue = [NSNumber numberWithFloat:startAngle]; 
drawAnimation.toValue = [NSNumber numberWithFloat:endAngle]; 
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
[circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"]; 

này được giải thích trong Core Animation Essentials video từ WWDC 2011. Tôi rất khuyên bạn nên xem nó.