1

在此处输入图像描述

我有一个 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

4

1 回答 1

4

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

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

  2. 将图层的路径设置一次，设置为宽度和高度为 1 点的圆圈。然后使用CAShapeLayer'stransform来改变大小。您可以为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];
于 2012-10-09T06:40:33.887 回答