使用CGContextFillEllipseInRect绘制的圆的动画颜色

时间:2013-11-07 13:37:35

标签: iphone objective-c uiview uikit cgcontext

我有UIView使用以下代码在其中绘制一个圆圈:

-(void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, myColor);
    CGContextFillEllipseInRest(context, myRect);
}

我想将这个圆圈设为灰色......我怎样才能实现这个目标?

-(void)fadeToGrey {
    // What goes here?
}

1 个答案:

答案 0 :(得分:2)

您应该使用CAShapeLayer作为图层类,并在setLayerProperties:方法中进行绘图。 drawRect:不会被覆盖。这是我的示例代码,其中包含自定义UIView的注释以及附加颜色动画方法。

//Returns the class used to create the layer for instances of this class.
//it is CALayer class by default.
+ (Class)layerClass 
{
   return [CAShapeLayer class];
}

//Lays out subviews.
- (void)layoutSubviews
{
   [self setLayerProperties];
}

- (void)setLayerProperties {
//The view’s Core Animation layer used for rendering.
  CAShapeLayer *layer = (CAShapeLayer *)self.layer;
// Color Declarations
  UIColor* strokeColor = [UIColor redColor];
// Some sample Bezier Drawing. In my case it is a triangle.
// However, you can draw circle by using `+bezierPathWithRoundedRect:cornerRadius:`
   UIBezierPath* bezierPath = [UIBezierPath bezierPath];
   [bezierPath moveToPoint: CGPointMake(0.0, self.frame.size.height)];
   [bezierPath addLineToPoint: CGPointMake(self.frame.size.width/2, 0.0)];
   [bezierPath addLineToPoint: CGPointMake(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))];
   [bezierPath addLineToPoint: CGPointMake(0.0, CGRectGetHeight(self.frame))];
    bezierPath.miterLimit = 8;

    bezierPath.lineJoinStyle = kCGLineJoinBevel;
    layer.path = bezierPath.CGPath;
    layer.fillColor = strokeColor.CGColor;
}

//here is the magic :)
- (void)attachColorAnimationToColor:(UIColor *)color {

//"fillColor" property of CAShapeLayer's instance is animatable 
//(thus we have overridden `layerClass` method btw), that leads us to create 
//CABasicAnimation instance with fromValue (initial color), toValue (final color).

   CABasicAnimation *animation = [self animationWithKeyPath:@"fillColor"];
   animation.fromValue = (__bridge id)(((CAShapeLayer *)self.layer).fillColor);
   animation.toValue = (__bridge id)color.CGColor;
   [self.layer addAnimation:animation forKey:animation.keyPath];
}

//setting properties of color animation
- (CABasicAnimation *)animationWithKeyPath:(NSString *)keyPath {
   CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:keyPath];
   animation.fillMode = kCAFillModeForwards;
   animation.removedOnCompletion=NO;
   animation.repeatCount = 1;
   animation.duration = 0.3f;
   return animation;
 }

您将通过这样调用attachColorAnimationToColor:来使用它:

//your custom view declaration
YourView *yourView = [[YourView alloc]initWithFrame:CGRectMake(...)];
[self.view addSubview:yourView];
[yourView attachColorAnimationToColor:[UIColor lightGrayColor]];

CAShape Layer Class Reference to fillColor property

随意询问是否出现问题。

<强>更新 我们的图层fillColor是红色的。因此,如果您将动画发送到redColor,这意味着您希望动画从“红色”变为“红色”。创建方法反向动画,其中toValue是我们描边的形状颜色。 (动画不会更新它,它总是保持红色)。这是现在测试的样本:)

-(void)attachReverseAnimationFromColor:(UIColor*)color{
    CABasicAnimation *animation = [self animationWithKeyPath:@"fillColor"];
    animation.toValue = (__bridge id)(((CAShapeLayer *)self.layer).fillColor);
    animation.fromValue = (__bridge id)color.CGColor;
    [self.layer addAnimation:animation forKey:animation.keyPath];

}

PS 快乐编码。