問題描述

我正在使用標(biāo)準(zhǔn) CGContextFillEllipseInRect() 代碼在 UIView 的 -drawRect: 方法中畫一個(gè)圓.但是，我想稍微脈沖(變大和變小)并用動畫改變顏色填充的強(qiáng)度.例如，如果圓圈充滿紅色，我想給圓圈打脈沖，并隨著脈沖動作及時(shí)使紅色稍微變亮和變暗.我對 Core Animation 沒有太多經(jīng)驗(yàn)，我對如何做到這一點(diǎn)有點(diǎn)迷茫，所以任何幫助都將不勝感激.

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:中畫圓，這個(gè)就簡單多了.相反，將您的視圖設(shè)置為使用 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];
}

每當(dāng)視圖大小發(fā)生變化時(shí)(包括首次出現(xiàn)時(shí))，系統(tǒng)都會將 layoutSubviews 發(fā)送到您的視圖.我們重寫 layoutSubviews 來設(shè)置形狀并為其設(shè)置動畫:

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

以下是我們?nèi)绾卧O(shè)置圖層的路徑(決定其形狀)和形狀的填充顏色:

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

我們需要給圖層附加兩個(gè)動畫——一個(gè)用于路徑，一個(gè)用于填充顏色:

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

以下是我們?yōu)閳D層路徑設(shè)置動畫的方式:

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

下面是我們?nèi)绾螢閳D層的填充顏色設(shè)置動畫:

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

這兩個(gè) attach*Animation 方法都使用了一個(gè)輔助方法，該方法創(chuàng)建一個(gè)基本動畫并將其設(shè)置為通過自動反轉(zhuǎn)和一秒的持續(xù)時(shí)間無限期重復(fù):

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

這篇關(guān)于drawRect 圓和動畫大小/顏色的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！