iOS: CAShapeLayer để vẽ hình ảnh không trực tràng và làm động hình dạng của nó

Question

Tôi đã đọc tài liệu trên CAShapeLayer nhưng tôi vẫn chưa hiểu rõ. Từ sự hiểu biết của tôi, Layer luôn bằng phẳng và kích thước của nó luôn là hình chữ nhật. Mặt khác,

CAShapeLayer cho phép bạn xác định lớp không chỉ giống như hình chữ nhật. Nó có thể là hình tròn, hình tam giác, vv miễn là bạn sử dụng nó với UIBezierPaths.

Tôi có hiểu biết ở đây không?

Điều tôi đã nghĩ là, một quả bóng bị dội ra khỏi các cạnh trên màn hình (đủ dễ dàng), nhưng tôi muốn hiển thị một hoạt ảnh nhỏ không sử dụng hình ảnh động - tôi muốn nó hiển thị một chút "vắt" như hình ảnh động khi nó chạm vào cạnh của màn hình và sau đó bị trả lại. Tôi không sử dụng hình ảnh bóng tennis. Chỉ là một vòng tròn đầy màu vàng.

Tôi có chính xác ở đây với CAShapeLayer để thực hiện việc này không? Nếu vậy, bạn có thể vui lòng cung cấp ví dụ minh họa không? Cảm ơn.

Answer 1

Trong khi bạn sử dụng đường dẫn để xác định hình dạng của lớp, nó vẫn được tạo bằng hình chữ nhật được sử dụng để xác định khung/giới hạn. Dưới đây là một ví dụ để giúp bạn bắt đầu:

TennisBall.h:

#import <UIKit/UIKit.h> 

@interface TennisBall : UIView 

- (void)bounce; 

@end 

TennisBall.m:

#import <QuartzCore/QuartzCore.h> 
#import "TennisBall.h" 

@implementation TennisBall 

+ (Class)layerClass 
{ 
    return [CAShapeLayer class]; 
} 

- (id)initWithFrame:(CGRect)frame 
{ 
    self = [super initWithFrame:frame]; 
    if (self) { 
     [self setupLayer]; 
    } 
    return self; 
} 

/* Create the tennis ball */ 
- (void)setupLayer 
{ 
    CAShapeLayer *layer = (CAShapeLayer *)self.layer; 
    layer.strokeColor = [[UIColor blackColor] CGColor]; 
    layer.fillColor = [[UIColor yellowColor] CGColor]; 
    layer.lineWidth = 1.5; 

    layer.path = [self defaultPath]; 
} 

/* Animate the tennis ball "bouncing" off of the side of the screen */ 
- (void)bounce 
{ 
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"]; 
    animation.duration = 0.2; 
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
    animation.fromValue = (__bridge id)[self defaultPath]; 
    animation.toValue = (__bridge id)[self compressedPath]; 
    animation.autoreverses = YES; 
    [self.layer addAnimation:animation forKey:@"animatePath"]; 
} 

/* A path representing the tennis ball in the default state */ 
- (CGPathRef)defaultPath 
{ 
    return [[UIBezierPath bezierPathWithOvalInRect:self.frame] CGPath]; 
} 

/* A path representing the tennis ball is the compressed state (during the bounce) */ 
- (CGPathRef)compressedPath 
{ 
    CGRect newFrame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width * 0.85, self.frame.size.height); 
    return [[UIBezierPath bezierPathWithOvalInRect:newFrame] CGPath]; 
} 

@end 

Bây giờ, khi bạn muốn sử dụng này:

TennisBall *ball = [[TennisBall alloc] initWithFrame:CGRectMake(10, 10, 100, 100)]; 
[self.view addSubview:ball]; 

[ball bounce]; 

Không te rằng điều này sẽ cần phải được mở rộng để bạn có thể "trả lại" từ góc độ khác nhau, vv nhưng nó sẽ giúp bạn chỉ đúng hướng!