iphone - 屏蔽 UIView、CALayer 的动画

Question

我正在努力实现以下目标:用户点击一个 View ，一个圆形 View 会弹出到它的左侧，其中包含一些图像内容。 View 应该从触摸点开始动画到触摸 View 之外的最后一帧并向左移动。在动画期间它应该是一个圆圈，增长到正确的位置和大小

下面的代码一切正常，只是在动画期间，圆形边界只在左边。就像CALayer形状正在滑入其最终框架。

看起来有点像这样。

动画完成后，我得到了预期的完整圆圈。

CGFloat w = 300;
CGRect frame = CGRectMake(myX, myY, w, w);
CGPoint p = [touch locationInView:self.imageView];
CGRect initialFrame = CGRectMake(p.x, p.y, 0,0);
UIImageView *circle = [[UIImageView alloc] initWithFrame:frame];
circle.image = [UIImage imageNamed:@"china"];
circle.contentMode = UIViewContentModeScaleAspectFill;
circle.backgroundColor = [UIColor clearColor];
circle.layer.borderWidth = 1;
circle.layer.borderColor = [UIColor grayColor].CGColor;
circle.layer.masksToBounds = YES;

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
CGRect maskRect = CGRectMake(0, 0, w, w);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, nil, maskRect);
maskLayer.path = path;
CGPathRelease(path);
circle.layer.mask = maskLayer;

circle.frame = initialFrame;
[self.imageView addSubview:circle];
[UIView animateWithDuration:1.0 animations:^{
    circle.frame = frame;
}];

我尝试只使用 CALayer 的 cornerRadius，但这也不会导致令人满意的结果，因为半径必须随着帧大小而改变

Answer 1

您正在为框架而不是 mask 设置动画。圆形 mask 的大小保持不变，您的图像帧从左上角动画到最终的全尺寸。这就是为什么您对图像的左上部分进行圆形裁剪，直到达到最终帧大小为止。

这就是您的动画中基本发生的事情:

您可以尝试对变换进行动画处理(这将完全按照您希望的样子变换最终剪裁的图像)而不是对帧进行动画处理。

类似于:

// Don't animate the frame. Give it the finale value before animation.
circle.frame = frame;

// Animate a transform instead. For example, a scaling transform.
circle.transform = CGAffineTransformMakeScale(0, 0);
[UIView animateWithDuration:1.0 animations:^{
    circle.transform = CGAffineTransformMakeScale(1, 1);
}];