2012-05-30 31 views
28

Tôi vẽ một vòng tròn theo phương pháp -drawRect: của UIView bằng mã tiêu chuẩn CGContextFillEllipseInRect(). Tuy nhiên, tôi muốn hơi xung (làm cho lớn hơn và nhỏ hơn) và thay đổi cường độ của màu sắc với một hình ảnh động. Ví dụ, nếu vòng tròn đầy màu đỏ, tôi muốn làm tròn vòng tròn và làm cho màu đỏ hơi sáng và tối hơn trong thời gian với hành động đập. Không có nhiều kinh nghiệm với Core Animation Tôi hơi bị mất về cách làm điều này, vì vậy bất kỳ trợ giúp nào cũng sẽ được đánh giá cao.drawRect hình tròn và kích thước động/màu

Trả lời

70

Điều này đơn giản hơn nhiều nếu bạn không vẽ hình tròn trong drawRect:. Thay vào đó, thiết lập quan điểm của bạn để sử dụng một CAShapeLayer, như thế này:

@implementation PulseView 

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

Hệ thống sẽ gửi layoutSubviews để xem bất cứ khi nào nó thay đổi kích thước (kể cả khi nó lần đầu tiên xuất hiện). Chúng tôi ghi đè layoutSubviews để thiết lập hình dạng và animate nó:

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

Đây là cách chúng ta thiết lập đường dẫn của lớp (trong đó xác định hình dạng của nó) và màu fill cho hình dạng:

- (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; 
} 

Chúng ta cần phải đính kèm hai hình ảnh động để lớp - một cho con đường và một cho màu fill:

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

đây là cách chúng ta làm động con đường của lớp:

- (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]; 
} 

Đây là cách chúng ta làm động đầy màu sắc của lớp:

- (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]; 
} 

Cả hai attach*Animation phương pháp sử dụng một phương pháp helper tạo ra một hình ảnh động cơ bản và đặt nó lên để lặp lại vô thời hạn với autoreverse và một thời gian thứ hai :

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

Giải thích tuyệt vời. Cảm ơn rất nhiều :) – Skoota

+1

Đây chính xác là những gì tôi đang tìm kiếm, nhưng làm thế nào để tôi gọi điều này từ một UIView để làm cho nó xuất hiện? Tôi giả sử mã này được thiết lập trong lớp riêng của nó. – bmueller

+4

'PulseView' là một phân lớp của' UIView'. –

Các vấn đề liên quan