通過CGMutablePathRef爲在drawRect中繪製的框設置動畫效果

Question

我的目標是將一個空的圓角框（它應該顯示爲一個洞）拖到我的UIView上以顯示下面的內容。 我通過覆蓋drawRect方法做到了這一點，如下所示。 這給我創造我holeRect屬性的大小的圓角的矩形（這是一個的CGRect），下降內側陰影到它，並把它放在我的看法，清除能力（使用clearColor和CGContextSetBlendMode（背景下， kCGBlendModeSourceOut））這個盒子覆蓋的區域，揭示了我的觀點背後（我從this問題中拿了一些代碼並修改了它）。 現在我的問題是，我必須移動和調整動畫的矩形，我找不到這樣做的方式，也許我選擇了錯誤的方式來做到這一點，但我並不擅長繪圖，所以任何提示將非常感激。

- (void)drawRect:(CGRect)rect 
{ 



//I set the frame of my "holey" rect 
CGRect bounds = self.holeRect; 
CGContextRef context = UIGraphicsGetCurrentContext(); 
CGFloat radius = 20; 

//fill my whole view with gray 
CGContextSetFillColorWithColor(context, [UIColor colorWithRed:.5 green:.5 blue:.5 alpha:.8].CGColor); 
CGContextFillRect(context, rect); 

// Create the "visible" path, which will be the shape that gets the inner shadow 
// In this case it's just a rounded rect, but could be as complex as your want 
CGMutablePathRef visiblePath = CGPathCreateMutable(); 
CGRect innerRect = CGRectInset(bounds, radius, radius); 
CGPathMoveToPoint(visiblePath, NULL, innerRect.origin.x, bounds.origin.y); 
CGPathAddLineToPoint(visiblePath, NULL, innerRect.origin.x + innerRect.size.width, bounds.origin.y); 
CGPathAddArcToPoint(visiblePath, NULL, bounds.origin.x + bounds.size.width, bounds.origin.y, bounds.origin.x + bounds.size.width, innerRect.origin.y, radius); 
CGPathAddLineToPoint(visiblePath, NULL, bounds.origin.x + bounds.size.width, innerRect.origin.y + innerRect.size.height); 
CGPathAddArcToPoint(visiblePath, NULL, bounds.origin.x + bounds.size.width, bounds.origin.y + bounds.size.height, innerRect.origin.x + innerRect.size.width, bounds.origin.y + bounds.size.height, radius); 
CGPathAddLineToPoint(visiblePath, NULL, innerRect.origin.x, bounds.origin.y + bounds.size.height); 
CGPathAddArcToPoint(visiblePath, NULL, bounds.origin.x, bounds.origin.y + bounds.size.height, bounds.origin.x, innerRect.origin.y + innerRect.size.height, radius); 
CGPathAddLineToPoint(visiblePath, NULL, bounds.origin.x, innerRect.origin.y); 
CGPathAddArcToPoint(visiblePath, NULL, bounds.origin.x, bounds.origin.y, innerRect.origin.x, bounds.origin.y, radius); 
CGPathCloseSubpath(visiblePath); 

// Fill this path 
UIColor *aColor = [UIColor clearColor]; 
[aColor setFill]; 
CGContextAddPath(context, visiblePath); 
CGContextSetBlendMode(context, kCGBlendModeSourceOut); 
CGContextFillPath(context); 


// Now create a larger rectangle, which we're going to subtract the visible path from 
// and apply a shadow 
CGMutablePathRef path = CGPathCreateMutable(); 
//(when drawing the shadow for a path whichs bounding box is not known pass "CGPathGetPathBoundingBox(visiblePath)" instead of "bounds" in the following line:) 
//-42 cuould just be any offset > 0 
CGPathAddRect(path, NULL, CGRectInset(bounds, -42, -42)); 

// Add the visible path (so that it gets subtracted for the shadow) 
CGPathAddPath(path, NULL, visiblePath); 
CGPathCloseSubpath(path); 

// Add the visible paths as the clipping path to the context 
CGContextAddPath(context, visiblePath); 
CGContextClip(context); 


// Now setup the shadow properties on the context 
aColor = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.5f]; 
CGContextSaveGState(context); 
CGContextSetShadowWithColor(context, CGSizeMake(0.0f, 1.0f), 5.0f, [aColor CGColor]); 

// Now fill the rectangle, so the shadow gets drawn 
[aColor setFill]; 
CGContextSaveGState(context); 
CGContextAddPath(context, path); 
CGContextEOFillPath(context); 

// Release the paths 
//CGPathRelease(path); 
CGPathRelease(visiblePath); 

} 

Answer 1

看看這個答案我給了一個關於衝壓問題在一個UIImageView一洞：

https://stackoverflow.com/a/8632731/341994

注意，它的工作方式是的UIImageView的上海華盈的層具有子層，做日掩蔽並因此打孔。這意味着要對該孔進行動畫處理，您只需對該子圖層的運動進行動畫處理即可。這是用的Core Animation簡單，因爲在我的書中描述：

http://www.apeth.com/iOSBook/ch17.html#_using_a_cabasicanimation

換句話說，如果你可以封裝你正在做的一切層，然後通過移動層動畫實在是小巫見大巫。

Answer 2

跟着你想做什麼，你已經設置，是存儲切口的位置在您的視圖類（類實現這個drawRect法）的實例變量，並使用一個NSTimer更新位置定期。例如，在您的視圖的代碼，你可以做一個計劃的計時器是這樣的：

[NSTimer scheduledTimerWithTimeInterval:1.0/30.0 target:self selector:@selector(updateCutoutPosition) userInfo:nil repeats:YES]; 

，然後實現更新方法：

- (void)updateCutoutPosition { 
    // Do whatever you need to do to update the position of the cutout. 
    [self setNeedsDisplay]; // Will cause drawRect to be called again soon. 
}