drawRect圆和动画大小/颜色 [英] drawRect circle and animate size/color

问题描述

我使用标准<$ c $在我的 UIView 的 -drawRect：方法中绘制一个圆圈c> CGContextFillEllipseInRect（）代码。但是，我想略微脉冲（变大和变小）并用动画改变颜色填充的强度。例如，如果圆圈充满红色，我想用脉冲圆圈，并使脉冲动作使红色稍微更轻，更暗。没有太多关于Core Animation的经验我对如何做到这一点有点迷茫，所以任何帮助都会非常感激。

I am drawing a circle in the -drawRect: method of my UIView using the standard CGContextFillEllipseInRect() code. However, I would like to slightly pulse (make larger and smaller) and change the intensity of the color fill with an animation. For example, if the circle is filled with red I would like to pulse the circle and make the red slightly lighter and darker in-time with the pulsing action. Not having much experience with Core Animation I am a bit lost about how to do this, so any help would be greatly appreciated.

推荐答案

如果你不在 drawRect：中绘制圆圈，这会简单得多。相反，将视图设置为使用 CAShapeLayer ，如下所示：

This is much simpler if you don't draw the circle in drawRect:. Instead, set up your view to use a CAShapeLayer, like this:

@implementation PulseView

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

系统发送 layoutSubviews 每当它改变大小时（包括它第一次出现时）的视图。我们覆盖 layoutSubviews 来设置形状并为其设置动画：

The system sends layoutSubviews to your view whenever it changes size (including when it first appears). We override layoutSubviews to set up the shape and animate it:

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

以下是我们设置图层路径（确定其形状）和填充的方法形状的颜色：

Here's how we set the layer's path (which determines its shape) and the fill color for the shape:

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

我们需要将两个动画附加到图层 - 一个用于路径，一个用于路径填充颜​​色：

We need to attach two animations to the layer - one for the path and one for the fill color:

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

以下是我们为图层路径设置动画的方式：

Here's how we animate the layer's path:

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

以下是我们为图层填充颜色设置动画的方法：

Here's how we animate the layer's fill color:

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

两个附加*动画方法使用辅助方法创建一个基本动画，并将其设置为无限期重复自动反转和一秒持续时间：

Both of the attach*Animation methods use a helper method that creates a basic animation and sets it up to repeat indefinitely with autoreverse and a one second duration:

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

这篇关于drawRect圆和动画大小/颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！