iOS: CAShapeLayer, um nicht-rektaguläres Bild zu zeichnen und seine Form zu animieren

Question

Ich habe die Dokumentation über CAShapeLayer gelesen, aber ich verstehe es immer noch nicht ganz. Von meinem Verständnis ist Layer immer flach und seine Größe ist immer ein Rechteck.

CAShapeLayer auf der anderen Seite, können Sie eine Ebene definieren, die nicht nur rechteckig ist. Es kann eine Kreisform, ein Dreieck usw. sein, solange Sie es mit UIBezierPaths verwenden.

Ist mein Verständnis hier weg?

Was ich im Sinn hatte, ist zum Beispiel, ein Tennisball, der von den Rändern auf dem Bildschirm springt (einfach genug), aber ich möchte eine kleine Animation ohne Bildanimationen zeigen - ich möchte es zeigen ein wenig "gequetscht" wie Animation, wie es den Rand des Bildschirms trifft und dann abprallt. Ich benutze kein Tennisball-Bild. Nur ein gelber Farbe gefüllter Kreis.

Bin ich hier richtig mit CAShapeLayer, um dies zu erreichen? Wenn ja, können Sie bitte ein kleines Beispiel geben? Vielen Dank.

Answer 1

Während Sie einen Pfad verwenden, um die Form des Layers zu definieren, wird er immer noch mit einem Rechteck zum Definieren des Rahmens/der Grenzen erstellt. Hier ist ein Beispiel für den Einstieg:

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 

Nun, wenn Sie diese verwenden möchten:

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

[ball bounce]; 

Nr te, dass dies erweitert werden muss, damit Sie aus verschiedenen Blickwinkeln "springen" können, aber es sollte Sie in die richtige Richtung weisen!