逐漸減少CAShapeLayer WRT半徑

Question

我有一個UIImageView與圖像就像上面所以我要做的就是逐漸減少，並增加圖像的形狀。

爲了實現上述任務顯然我必須應用蒙版，所以我創建了一個四捨五入的CAShapeLayer，並將其添加到UIImageView圖層，並且它的工作正常，如果我更改了半徑，它將只顯示圖像的半徑數量。

我的問題是我們如何應用動畫，以便以動畫形式顯示。請指導我我無法用關鍵幀動畫實現。

以下是屏蔽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

Answer 1

如果你想要做的是顯示出與動畫不同半徑的褐色圓，我建議兩個變化：

1. 不要打擾圖像。只需使用CAShapeLayer並將它的fillColor設置爲棕色。

2. 將圖層的路徑設置爲一次寬度和高度爲1的圓。然後使用CAShapeLayer的transform來改變大小。您可以動畫transform。

例如，創建這樣的層：

CGRect bounds = self.view.bounds; 

circleLayer = [CAShapeLayer layer]; 
circleLayer.fillColor = [UIColor brownColor].CGColor; 

circleLayer.position = CGPointMake（CGRectGetMidX（邊界），CGRectGetMidY（邊界））;

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