如何動畫CGPath的繪圖？

我想知道是否有辦法使用Core Animation來做到這一點。具體來說，我將一個子層添加到支持層的自定義NSView並將其委託設置爲另一個自定義NSView。該類的drawInRect方法繪製一個CGPath：如何動畫CGPath的繪圖？

- (void)drawInRect:(CGRect)rect inContext:(CGContextRef)context 
{ 
    CGContextSaveGState(context); 
    CGContextSetLineWidth(context, 12); 

    CGMutablePathRef path = CGPathCreateMutable(); 
    CGPathMoveToPoint(path, NULL, 0, 0); 
    CGPathAddLineToPoint(path, NULL, rect.size.width, rect.size.height); 

    CGContextBeginPath(context); 
    CGContextAddPath(context, path); 
    CGContextStrokePath(context); 
    CGContextRestoreGState(context); 
}

我想要的效果是動畫這一行的圖。也就是說，我希望這條線能夠以動畫的方式實際「拉伸」。似乎有一個簡單的方法來使用Core Animation來做到這一點，但我一直無法遇到任何問題。

對於如何實現這一目標，您有什麼建議嗎？

來源

2010-04-04 Jordan Kay

當然，不要自己畫線。添加一個具有平坦背景顏色的12像素高的子圖層，從零寬度框架開始，並根據視圖的寬度進行動畫處理。如果需要圓角，請將圖層的cornerRadius設置爲高度的一半。

來源

2010-04-04 22:36:34

FWIW，CAShapeLayer是動畫任意路徑的絕佳選擇。但是對於一條直線，我會堅持諾亞的答案。 :-) – 2011-06-06 14:51:43

我發現了這個動畫路徑示例，並希望分享給其他人尋找如何使用一些代碼示例來做到這一點。

您將使用CAShapeLayer的strokeStart和strokeEnd，它需要sdk 4.2，所以如果您希望支持較老的iOS SDKs，那麼這不是您想要的。

這些屬性的真正好處在於它們具有動畫效果。通過在幾秒鐘的持續時間從0.0動畫strokeEnd到1.0，因爲它是被拉伸，我們可以很容易地顯示的路徑：

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
pathAnimation.duration = 10.0; 
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; 
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f]; 
[self.pathLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];

最後，添加含有筆的圖像的第二層並使用 CAKeyframeAnimation沿着以相同的速度路徑動畫它使幻覺完美：

CAKeyframeAnimation *penAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
penAnimation.duration = 10.0; 
penAnimation.path = self.pathLayer.path; 
penAnimation.calculationMode = kCAAnimationPaced; 
[self.penLayer addAnimation:penAnimation forKey:@"penAnimation"];

，源可以被看作here和演示視頻here。請閱讀創作者blog瞭解更多信息。

來源

2012-01-09 15:25:19

完美，正是我想要的，謝謝Ole Begemann。我用CAShapeLayer填充曲線時遇到了問題，直到我注意到他通過將fillColor設置爲零來阻止該問題。 – 2014-03-16 16:38:30

不知道如何接受。 – 2014-03-19 16:52:55

如何動畫CGPath的繪圖？

回答

相關問題