不使CALayer缩放时模糊的动画效果

Question

我有一个CALayer，它实现了drawInContext:方法，并画了一个简单的圆形，如下所示：

- (void)drawInContext:(CGContextRef)ctx
{
     CGContextScaleCTM(ctx, DrawingScale, DrawingScale);
     CGContextSetRGBFillColor (ctx, 1, 0, 0, 1);
     CGContextFillEllipseInRect (ctx, LocationRectangle);
}

我一直在尝试使用不同的方法来根据触摸事件增加我的圆形大小。我尝试过使用UIView beginAnimation系统和CABasicAnimation，但它们都会使图像模糊。在阅读中，我发现这是因为对于这些选项，CALayer似乎被视为位图。

好吧...但我想缩放我的图形而不使其模糊，例如使用矢量缩放。

因此，在我的代码中，我有一个“DrawingScale”属性。

是否有一种简洁的方式可以使用层动画来缩放此属性？还是这是人们使用NSTimers（yuk）的事情？

这可能是我可以使用核心动画来动画自定义属性的一种情况吗？如果是这样，我很想知道人们认为哪个示例是最好的，或者苹果文档的哪个部分可能是开始研究这个主题的好地方。

似乎当涉及到Mac/iOS上的图形时，有许多绘制/皮毛猫的方法...?

- Fuzz

Answer 1

在花费几天时间研究后，我想到的一个解决方案是创建一个名为“DrawingScale”的变量作为成员变量（这是Obj-C中的叫法），并使用核心动画来动画化该属性。

- (void)drawInContext:(CGContextRef)ctx
{
    CGFloat size = (CGFloat)(DrawingScale*DEFAULT_SIZE);
    CGRect elipseRect = CGRectMake(xPos, yPos, size, size);
    CGContextStrokeEllipseInRect(ctx, elipseRect);
    CGContextFillEllipseInRect (ctx, elipseRect);
}

然后，在一个事件中，我设置了这样的动画：

-(void) : (CGPoint) location
{
    /* Set up an explicit animation to scale the players size up */
    CABasicAnimation* anim = [CABasicAnimation animationWithKeyPath:@"DrawingScale"];
    anim.fromValue = [NSNumber numberWithFloat: 1];
    anim.toValue = [NSNumber numberWithFloat: 5];
    anim.removedOnCompletion = YES;
    anim.duration = 0.1;
    anim.delegate = self;
    anim.fillMode = kCAFillModeForwards;
    anim.autoreverses = NO;
    [self addAnimation: anim forKey:@"ElipseGettingBigger"];
}

这将设置动画，使我的变量DrawingScale的范围从1到5，并在0.1秒内完成。它非常有效。

我需要小心并确保先适当地调整图层边界！

- Fuzz

Answer 2

使用形状图层（CAShapeLayer）。您可以传递路径、填充颜色和描边颜色，它会保持所有边缘的清晰度，无论缩放比例如何。但是如果您只需要一个圆形，您可以欺骗一下，创建一个圆角半径为宽度和高度的一半的图层（假设完美的正方形/圆形）。类似于这样：

CALayer *layer = [CALayer layer];
[layer setMasksToBounds:YES];
[layer setBackgroundColor[[UIColor redColor] CGColor]];
[layer setCornerRadius:25.0f];
[layer setBounds:CGRectMake(0.0f, 0.0f, 50.0f, 50.0f)];
[layer setPosition:CGPointMake([view bounds].size.width/2.0f, 
                               [view bounds].size.height/2.0f]);

[[view layer] addSublayer:layer];

您可能还想看一下苹果最新的WWDC视频。其中有三个关于核心动画的会议。它们讨论了图层缩放和保持边缘清晰的问题。这些视频是免费的。

此致敬礼。

- Matt Long

---

谢谢你的回答，Matt。目前只是一个圆圈，但它将会更多。但我喜欢这个创意解决方案 :-) 很巧妙的小技巧。我会试着使用CALayer！有趣的是你提到了WWDC视频，我刚刚看到了苹果公司发来的邮件，并下载了几GB的视频。现在我只需要找到时间去观看它们的许多小时:-) 同时，我也会发布我一直在使用的解决方案。 - Fuzz