Animate một UIBezierPath mà clip một UIImage

Question

Tôi có một hình ảnh trông giống như một chiếc bánh rán và muốn làm động nó để nó trông giống như vòng tròn bánh rán chưa hoàn thành (đột quỵ không đóng). Thật khó để mô tả nhưng hãy tưởng tượng một đồng hồ tốc độ mà đi đến 100 và bạn lái xe 50. Tôi đã thực hiện các mặt nạ với sự giúp đỡ của một con đường và [path addClip] bên trong UIGraphicsBeginImageContextWithOptions nơi tôi cũng làm cho UIImage.

Câu hỏi của tôi bây giờ là tôi có thể hoặc làm cách nào để tạo hiệu ứng cho đường dẫn. Tôi đã thử nó với một CABasicAnimation và 2 đường dẫn (con đường đầu tiên mà startAngle và endAngle là như nhau và đường dẫn thứ hai là endAngle là góc mong muốn) với "path" như keyPath nhưng điều đó không hoạt động.

Bất cứ điều gì giúp;)

Answer 1

tôi động UIBezierPath sử dụng CABasicAnimation sử dụng ...

UIBezierPath *bezierPath = [self bezierPath]; 

CAShapeLayer *bezierLayer = [[CAShapeLayer alloc] init]; 

bezierLayer.path = bezierPath.CGPath; 
bezierLayer.strokeColor = [UIColor redColor].CGColor; 
bezierLayer.fillColor = [UIColor clearColor].CGColor; 
bezierLayer.lineWidth = 5.0; 
bezierLayer.strokeStart = 0.0; 
bezierLayer.strokeEnd = 1.0; 
[self.view.layer addSublayer:bezierLayer]; 

if (animate) 
{ 
    CABasicAnimation *animateStrokeEnd = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    animateStrokeEnd.duration = 1.0; 
    animateStrokeEnd.fromValue = @0.0f; 
    animateStrokeEnd.toValue = @1.0f; 
    [bezierLayer addAnimation:animateStrokeEnd forKey:@"strokeEndAnimation"]; 
} 

Answer 2

tôi sẽ đề nghị thiết lập một CAShapeLayer, và để cho các lớp hình dạng làm cho hình dạng bánh rán của bạn. Bạn sẽ có thể làm cho hình dạng bánh rán của bạn như một CGPath của một vòng cung với một đường dày.

CAShapeLayer có strokeStart and strokeĐặc tính của sản phẩm. Cả hai đều nằm trong khoảng từ 0,0 đến 1,0. Theo mặc định, strokeStart là 0.0 (bắt đầu từ đầu) và strokeEnd là 1.0 (vẽ toàn bộ đường dẫn). Các thuộc tính này có thể hoạt hình.

Nếu bạn thay đổi strokeEnd từ .75 thành 1.0 thì đường dẫn của bạn sẽ bắt đầu với chỉ 3/4 được vẽ và tạo hình động cuối cùng của đường dẫn.

Tôi có một dự án trên gitHub minh họa việc sử dụng một lớp hình dạng làm mặt nạ trên hình ảnh để tạo chuyển đổi "đồng hồ xóa". Đối với điều đó, tôi làm cho chiều rộng của đường thẳng trên vòng cung của tôi quá lớn đến nỗi hình dạng hoàn toàn lấp đầy hình chữ nhật khung thay vì vẽ hình dạng bánh rán. Trong trường hợp của bạn, bạn sẽ làm cho độ dày dòng ít hơn để nó rút ra chiếc bánh rán của bạn.

Core Animation demo on Github

Nhấp vào nút "Mask Animation" trong ứng dụng để xem phim hoạt hình shape layer tại nơi làm việc.