蒙面UIView，CALayer的动画

Question

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

一切都适用于下面的代码，只有动画期间的 ，圆形边界仅在左侧。就像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;
}];

我曾尝试使用cornerRadius的{​​{1}}，但这也不会产生令人满意的结果，因为半径也必须随帧大小而变化。

Answer 1

您正在为框架设置动画，但不是蒙版。圆形遮罩的大小保持不变，并且您的图像框架从左上角动画到最终完整尺寸。这就是为什么你得到图像左上角部分的圆形剪裁，直到它到达最终的帧尺寸。

这是动画中基本上发生的事情：

您可以尝试为变换设置动画（这将完全按照您希望的方式变换剪裁后的图像）而不是动画帧。

类似的东西：

// 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);
}];

Answer 2

您是否尝试使用圆形视图的autoresizingMask，允许它具有灵活的左/右边距？

这可能会在动画中扮演一个角色，并解释为什么您的视图会“滑动”。 （至少值得一试）