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進行遊戲，使其具有靈活的左/右邊距？

這可能會在動畫中扮演一個角色，並解釋爲什麼您的視圖出現「滑動」。 （至少它值得一試）