2012-05-30 11 views
28

Rysuję okrąg w metodzie -drawRect: mojego UIView przy użyciu standardowego kodu CGContextFillEllipseInRect(). Chciałbym jednak nieco pulsować (powiększać i zmniejszać) i zmieniać intensywność wypełnienia kolorem animacją. Na przykład, jeśli krąg jest wypełniony kolorem czerwonym, chciałbym pulsować kółkiem i sprawić, że czerwień będzie nieco jaśniejsza i ciemniejsza w czasie z pulsowaniem. Nie mając dużego doświadczenia z Core Animation, jestem trochę zagubiony, jak to zrobić, więc każda pomoc będzie bardzo ceniona.koło draw i animuj rozmiar/kolor

Odpowiedz

70

Jest to znacznie prostsze, jeśli nie narysujesz okręgu w drawRect:. Zamiast skonfigurować widok na używanie CAShapeLayer coś takiego:

@implementation PulseView 

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

system wysyła layoutSubviews do widoku, gdy zmienia się rozmiar (w tym po raz pierwszy pojawia się to). Mamy przesłonić layoutSubviews założyć kształt i animowanie go:

- (void)layoutSubviews { 
    [self setLayerProperties]; 
    [self attachAnimations]; 
} 

Oto jak możemy ustawić ścieżkę warstwy (która decyduje o jego kształt) oraz kolor wypełnienia kształtu:

- (void)setLayerProperties { 
    CAShapeLayer *layer = (CAShapeLayer *)self.layer; 
    layer.path = [UIBezierPath bezierPathWithOvalInRect:self.bounds].CGPath; 
    layer.fillColor = [UIColor colorWithHue:0 saturation:1 brightness:.8 alpha:1].CGColor; 
} 

musimy dołączyć dwie animacje dla warstwy - po jednym dla ścieżki i jeden dla koloru wypełnienia:

- (void)attachAnimations { 
    [self attachPathAnimation]; 
    [self attachColorAnimation]; 
} 

Oto jak możemy animować ścieżki w warstwie:

- (void)attachPathAnimation { 
    CABasicAnimation *animation = [self animationWithKeyPath:@"path"]; 
    animation.toValue = (__bridge id)[UIBezierPath bezierPathWithOvalInRect:CGRectInset(self.bounds, 4, 4)].CGPath; 
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
    [self.layer addAnimation:animation forKey:animation.keyPath]; 
} 

Oto jak możemy animować warstwa jest koloru wypełnienia:

- (void)attachColorAnimation { 
    CABasicAnimation *animation = [self animationWithKeyPath:@"fillColor"]; 
    animation.fromValue = (__bridge id)[UIColor colorWithHue:0 saturation:.9 brightness:.9 alpha:1].CGColor; 
    [self.layer addAnimation:animation forKey:animation.keyPath]; 
} 

Obie metody attach*Animation użyć metody pomocnika, który tworzy podstawową animację i ustawia go powtarzać w nieskończoność z AUTOREVERSE i jedną sekundę :

- (CABasicAnimation *)animationWithKeyPath:(NSString *)keyPath { 
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:keyPath]; 
    animation.autoreverses = YES; 
    animation.repeatCount = HUGE_VALF; 
    animation.duration = 1; 
    return animation; 
} 
+0

Niesamowite wytłumaczenie. Wielkie dzięki :) – Skoota

+1

Dokładnie tego szukam, ale jak mogę wywołać to z UIView, aby go wyświetlić? Zakładam, że ten kod jest skonfigurowany we własnej klasie. – bmueller

+4

'PulseView' jest podklasą' UIView'. –