iOS: dikdörtgen olmayan bir resim çizmek ve şeklini canlandırmak için CAShapeLayer

Question

CAShapeLayer üzerindeki belgeleri okuyordum, fakat yine de tam olarak anlamadım. Anlayışımdan, Layer her zaman düzdür ve boyutu her zaman bir dikdörtgendir. Öte yandan, yalnızca dikdörtgensel olmayan bir katman tanımlamanıza olanak sağlar. UIBezierPaths ile kullandığınız sürece bir daire şekli, üçgen vb.

Anlayışım burda mı?

Aklımda olan şey, örneğin, ekranın kenarlarını saran bir tenis topu (yeterince kolay), ancak görüntü animasyonlarını kullanmama küçük bir animasyon göstermek istiyorum - Gösterilmesini isterim Ekranın kenarına vurduğunda ve ardından sekerek çıktığı için animasyon gibi küçük bir "sıkılmış". Ben bir tenis topu resmi kullanmıyorum. Sadece sarı renk dolu bir daire.

Bunu yapmak için CAShapeLayer ile burayı düzeltiyorum? Eğer öyleyse, lütfen litre bir örnek verebilir misiniz? Teşekkürler.

Answer 1

Katmanın şeklini tanımlamak için bir yol kullanırken, yine de çerçeve/sınırları tanımlamak için kullanılan bir dikdörtgen ile oluşturulur.

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 

Şimdi

, bunu kullanmak istiyorum:

İşte başlangıç ​​için bir örnektir

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

[ball bounce]; 

Hayır Bunun farklı açılardan, vb. "sıçrama" yapabilmeniz için uzatılması gerekecek, ancak sizi doğru yönde işaret etmelisiniz!