CAShapeLayer Đường dẫn hoạt hình ổn định/nhấp nháy (Từ Ellipse đến Rect và ngược lại)

Question

Tôi đang gặp sự cố khi tôi tạo hoạt ảnh rõ ràng để thay đổi giá trị của đường dẫn của CAShapeLayer từ hình elip thành trực tràng.

Trong vải điều khiển tôi thiết lập của tôi một CAShapeLayer cơ bản và thêm nó vào lớp quan điểm gốc của:

CAShapeLayer *aLayer; 
aLayer = [CAShapeLayer layer]; 
aLayer.frame = CGRectMake(100, 100, 100, 100); 
aLayer.path = CGPathCreateWithEllipseInRect(aLayer.frame, nil); 
aLayer.lineWidth = 10.0f; 
aLayer.strokeColor = [UIColor blackColor].CGColor; 
aLayer.fillColor = [UIColor clearColor].CGColor; 
[self.view.layer addSublayer:aLayer]; 

Sau đó, khi tôi làm động con đường tôi nhận được một trục trặc lạ/nhấp nháy trong vài khung hình cuối cùng của hoạt hình khi hình dạng trở thành một rect, và trong vài khung hình đầu tiên khi nó hoạt hình ra khỏi một rect. Các hình ảnh động được thiết lập như sau:

CGPathRef newPath = CGPathCreateWithRect(aLayer.frame, nil); 
[CATransaction lock]; 
[CATransaction begin]; 
[CATransaction setAnimationDuration:5.0f]; 
CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"path"]; 
ba.autoreverses = YES; 
ba.fillMode = kCAFillModeForwards; 
ba.repeatCount = HUGE_VALF; 
ba.fromValue = (id)aLayer.path; 
ba.toValue = (__bridge id)newPath; 
[aLayer addAnimation:ba forKey:@"animatePath"]; 
[CATransaction commit]; 
[CATransaction unlock]; 

Tôi đã thử nhiều thứ khác nhau như khóa/mở khóa CATransaction, chơi với chế độ fill khác nhau, vv ...

Dưới đây là một hình ảnh của trục trặc: http://www.postfl.com/outgoing/renderingglitch.png

một đoạn video về những gì tôi đang trải qua có thể được tìm thấy ở đây: http://vimeo.com/37720876

Answer 1

Thật không may đây là một hạn chế của các awe khác một số thuộc tính đường dẫn animatable của CAShapeLayers.

Về cơ bản, nó cố gắng nội suy giữa hai đường dẫn. Nó gặp rắc rối khi đường dẫn đích và đường dẫn bắt đầu có một số điểm kiểm soát khác nhau - và các đường cong và các cạnh thẳng sẽ có vấn đề này.

Bạn có thể cố gắng giảm thiểu hiệu ứng bằng cách vẽ hình elip của bạn thành 4 đường cong thay vì một hình elip đơn, nhưng nó vẫn không hoàn toàn đúng. Tôi đã không tìm thấy một cách để đi suốt từ đường cong đến đa giác.

Bạn có thể tận dụng tối đa ở đó, sau đó chuyển sang hình động mờ dần cho phần cuối - điều này sẽ không đẹp như mong đợi.

Answer 2

tôi nhận được thông tin phản hồi này từ danh sách thạch anh-dev:

David Duncan đã viết:

Animating con đường của một Shape Layer chỉ đảm bảo để làm việc khi bạn đang tạo hiệu ứng động từ như để thích . Hình chữ nhật là một chuỗi gồm dòng, trong khi hình elip là một chuỗi cung (bạn có thể xem chuỗi được tạo bằng CGPathApply) và như vậy hoạt ảnh giữa chúng không được đảm bảo trông rất đẹp hoặc hoạt động tốt ở tất cả.

Để làm điều này, về cơ bản bạn phải tạo một tương tự của một hình chữ nhật bằng sử dụng các đường cong tương tự mà bạn sẽ sử dụng để tạo ra một hình elip, nhưng với các thông số có thể gây ra việc vẽ trông giống như một hình chữ nhật . Điều này không quá khó (và một lần nữa, bạn có thể sử dụng những gì bạn nhận được từ CGPathApply trên đường dẫn được tạo bằng CGPathAddEllipseInRect làm hướng dẫn), nhưng có thể sẽ yêu cầu một số chỉnh sửa để có quyền.