CABasicAnimation với đường dẫn CALayer không hoạt ảnh

Question

Tôi đang cố gắng tạo hoạt ảnh cho việc chuyển đổi một CALayer từ các góc thông thường thành các góc tròn. Tôi chỉ muốn làm tròn các góc trên cùng, vì vậy tôi đang sử dụng UIBezierPath. Đây là mã:

UIRectCorner corners = UIRectCornerTopLeft | UIRectCornerTopRight; 

UIBezierPath* newPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(8.0f, 8.0f)]; 
UIBezierPath* oldPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(0.0f, 0.0f)]; 

CAShapeLayer* layer = [CAShapeLayer layer]; 
layer.frame = self.bounds; 
layer.path = oldPath.CGPath; 

self.layer.mask = layer; 

CABasicAnimation* a = [CABasicAnimation animationWithKeyPath:@"path"]; 
[a setDuration:0.4f]; 
[a setFromValue:(id)layer.path]; 
[a setToValue:(id)newPath.CGPath]; 

layer.path = newPath.CGPath; 
[layer addAnimation:a forKey:@"path"]; 

Nhưng khi tôi chạy điều này, các góc được làm tròn, nhưng không có hoạt ảnh - nó xảy ra ngay lập tức. Tôi đã thấy một số câu hỏi tương tự ở đây trên SO, nhưng họ đã không giải quyết vấn đề của tôi.

iPhone CALayer animation

Animating CALayer's shadowPath property

Tôi chắc chắn rằng tôi chỉ làm một điều ít sai mà gây ra vấn đề, nhưng đối với cuộc sống của tôi, tôi không thể hình dung nó ra.

Giải pháp:

- (void)roundCornersAnimated:(BOOL)animated { 
    UIRectCorner corners = UIRectCornerTopLeft | UIRectCornerTopRight; 

    UIBezierPath* newPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(8.0f, 8.0f)]; 
    UIBezierPath* oldPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(0.0001f, 0.0001f)]; 

    CAShapeLayer* layer = [CAShapeLayer layer]; 
    layer.frame = self.bounds; 

    self.layer.mask = layer; 

    if(animated) { 
     CABasicAnimation* a = [CABasicAnimation animationWithKeyPath:@"path"]; 
     [a setDuration:0.4f]; 
     [a setFromValue:(id)oldPath.CGPath]; 
     [a setToValue:(id)newPath.CGPath]; 

     layer.path = newPath.CGPath; 
     [layer addAnimation:a forKey:@"path"]; 
    } else { 
     layer.path = newPath.CGPath; 
    } 
} 

Thật tất cả những gì cần thiết để làm được thành một cái tên từ 'giá trị cho các hình ảnh động.

Answer 1

Dường như với tôi như bạn đang tạo một lớp hình dạng không có đường dẫn, sau đó thử tạo hiệu ứng thêm đường dẫn đến nó. Các lớp hình dạng là trường hợp đặc biệt và không hoạt động theo cách đó.

Bạn phải có đường dẫn trong lớp hình dạng trước và sau hoạt ảnh và đường dẫn cần có cùng số điểm trong cả trước và sau.

Bạn cần tạo đường tròn hình chữ nhật tròn với bán kính góc bằng 0 (theo cách thủ công, sử dụng một loạt cạnh và cung góc), sau đó tạo đường mới với bán kính không bằng 0 cho các góc bạn muốn làm tròn và cài đặt đường dẫn đó làm hoạt ảnh của bạn.

Mặc dù vậy có thể không hoạt động, bởi vì đường dẫn cần có cùng số điểm trong đó và tôi nghi ngờ rằng cung sẽ đơn giản hóa khi bán kính bằng 0.

Tôi vừa tìm thấy cuộc gọi UIBezierPath để tạo hình chữ nhật, nơi bạn có thể chọn các góc cần làm tròn. Cuộc gọi là bezierPathWithRoundedRect: byRoundingCorners: angleRadii:

Điều đó sẽ tạo ra một hình chữ nhật với nhiều góc được làm tròn tùy thích. Tuy nhiên, tôi không chắc chắn nếu nó sẽ làm việc cho hoạt hình đường dẫn. Bạn có thể cần yêu cầu tất cả các góc được làm tròn với 2 góc không tròn được đặt thành bán kính bằng 0. Bằng cách đó bạn MIGHT có được một đường dẫn với cùng số điểm trong đó như là một đường tròn hình chữ nhật tròn để hoạt ảnh đường dẫn hoạt động chính xác. Bạn sẽ phải thử nó.

Answer 2

Cố gắng đưa:

layer.path = newPath.CGPath; 

sau:

[layer addAnimation:a forKey:@"path"];