逐渐减小 CAShapeLayer wrt 半径

Question

我有一个 UIImageView 和上面一样的图像，所以我要做的是逐渐减少和增加图像的形状。

显然，为了完成上述任务，我必须应用蒙版，所以我创建了一个圆形 CAShapeLayer 并添加到 UIImageView 层，如果我改变我的半径，它会正常工作，它只会显示那个数量的图像 wrt 半径。

我的问题是我们如何应用动画以便它以动画形式显示。请指导我，我无法用关键帧动画实现。

以下是屏蔽 wrt 半径的代码。

// Set up the shape of the circle
int rChange = 0; // Its doing proper masking while changing this value
int radius = 123.5-rChange;

CAShapeLayer *circle = [CAShapeLayer layer];
// Make a circular shape
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0+rChange, 0+rChange, 2.0*radius, 2.0*radius)
                                         cornerRadius:radius].CGPath;

// Configure the apperence of the circle
[circle setFillColor:[[UIColor blackColor] CGColor]];    
[[self.originalImageView layer] setMask:circle];
self.originalImageView.layer.masksToBounds = YES;

其中 123.5 是图像的最大半径 而 originalImageView 是 myUIImageView

Answer 1

如果您只想显示一个具有动画变化半径的棕色圆圈，我建议进行两项更改：

1. 不要为图像而烦恼。只需使用 CAShapeLayer 并将其 fillColor 设置为棕色。

2. 将图层的路径设置一次，设置为宽度和高度均为 1 磅的圆形。然后使用CAShapeLayer 的transform 来改变大小。您可以为transform 设置动画。

例如，像这样创建层：

CGRect bounds = self.view.bounds;

circleLayer = [CAShapeLayer layer];
circleLayer.fillColor = [UIColor brownColor].CGColor;

    circleLayer.position = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));

// Create a circle with 1-point width/height.
circleLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 1, 1)].CGPath;

// Use the layer transform to scale the circle up to the size of the view.
[circleLayer setValue:@(bounds.size.width) forKeyPath:@"transform.scale"];

然后你可以像这样改变它的大小：

[circleLayer setValue:@(newSize) forKeyPath:@"transform.scale"];

这将使用默认参数隐式（自动）为大小更改设置动画。如果要使用不同的动画参数，可以显式地为变换设置动画：

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.fromValue = [circleLayer valueForKeyPath:@"transform.scale"];
animation.toValue = @(newSize);
animation.duration = 3.0;
animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut];

// Important: change the actual layer property before installing the animation.
[circleLayer setValue:animation.toValue forKeyPath:animation.keyPath];

// Now install the explicit animation, overriding the implicit animation.
[circleLayer addAnimation:animation forKey:animation.keyPath];