ios - tutorial - movimiento magico en keynote

Dibujar un círculo y animar tamaño/color

Question

Estoy dibujando un círculo en el método -drawRect: de mi UIView utilizando el CGContextFillEllipseInRect() estándar CGContextFillEllipseInRect() . Sin embargo, me gustaría pulsar ligeramente (hacer más grande y más pequeño) y cambiar la intensidad del relleno de color con una animación. Por ejemplo, si el círculo está lleno de rojo, me gustaría pulsar el círculo y hacer que el rojo sea un poco más claro y más oscuro en el tiempo con la acción pulsante. Al no tener mucha experiencia con Core Animation estoy un poco perdido sobre cómo hacer esto, por lo que cualquier ayuda sería muy apreciada.

Answer 1

Esto es mucho más simple si no dibuja el círculo en drawRect: En su lugar, configure su vista para usar un CAShapeLayer , como este:

@implementation PulseView

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

El sistema envía layoutSubviews a su vista cuando cambia de tamaño (incluso cuando aparece por primera vez). layoutSubviews para configurar la forma y animarla:

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

Así es como configuramos la ruta de la capa (que determina su forma) y el color de relleno para la forma:

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

Necesitamos adjuntar dos animaciones a la capa, una para la ruta y otra para el color de relleno:

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

Así es como animamos la ruta de la capa:

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

Así es como animamos el color de relleno de la capa:

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

Los dos métodos de attach*Animation usan un método auxiliar que crea una animación básica y la configura para que se repita indefinidamente con autoreverse y una duración de un segundo:

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