Masked 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; 
}]; 

我已经尝试过与CALayer的cornerRadius工作，但不会导致令人满意的结果无论是作为半径会对以及与帧大小改变。

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进行游戏，使其具有灵活的左/右边距？

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