設置剪輯UIImage的UIBezierPath的動畫

我有一個看起來像甜甜圈的圖像，並且想要對其進行設置，使其看起來像甜甜圈圈沒有完成（描邊未關閉）。這很難描述，但想象一下速度計到100，你開車50。我已經完成了在UIGraphicsBeginImageContextWithOptions內的路徑和[路徑addClip]的幫助下進行掩蔽，我還渲染了UIImage。設置剪輯UIImage的UIBezierPath的動畫

我現在的問題是我可以或如何爲路徑設置動畫。我用CABasicAnimation和2個路徑（startAngle和endAngle相同，第二個路徑是endAngle是所需角度）的第一個路徑嘗試了它，並將「path」作爲keyPath，但這不起作用。

任何幫助;）

來源

2012-11-23 kohaXun

我動畫UIBezierPath使用CABasicAnimation使用...

UIBezierPath *bezierPath = [self bezierPath]; 

CAShapeLayer *bezierLayer = [[CAShapeLayer alloc] init]; 

bezierLayer.path = bezierPath.CGPath; 
bezierLayer.strokeColor = [UIColor redColor].CGColor; 
bezierLayer.fillColor = [UIColor clearColor].CGColor; 
bezierLayer.lineWidth = 5.0; 
bezierLayer.strokeStart = 0.0; 
bezierLayer.strokeEnd = 1.0; 
[self.view.layer addSublayer:bezierLayer]; 

if (animate) 
{ 
    CABasicAnimation *animateStrokeEnd = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    animateStrokeEnd.duration = 1.0; 
    animateStrokeEnd.fromValue = @0.0f; 
    animateStrokeEnd.toValue = @1.0f; 
    [bezierLayer addAnimation:animateStrokeEnd forKey:@"strokeEndAnimation"]; 
}

來源

2012-11-23 16:32:06 Rob

你和我有一個非常相似的方法。請注意，您可以直接更改圖層的strokeEnd屬性並免費獲取「隱式動畫」，而無需創建CABasicAnimation對象。 –

@DuncanC如果你知道如何爲路徑設置動畫，那麼我不確定是否遵循問題所在。 – Rob

我沒有問一個問題。我指出你可以跳過CABasicAnimation並改變strokeEnd屬性。這將創建一個隱式動畫。 –

我建議設立一個CAShapeLayer，並讓形狀圖層渲染你的甜甜圈形狀。你應該能夠將你的甜甜圈形狀渲染爲一條粗線的CGPath。

CAShapeLayer具有strokeStart和strokeEnd屬性。兩者的範圍從0.0到1.0。默認情況下，strokeStart是0.0（從頭開始），strokeEnd是1.0（繪製整個路徑）。這些屬性是可以動畫的。

如果您將strokeEnd從0.75更改爲1.0，那麼您的路徑將從其繪製的3/4開始，並且動畫繪製最後1/4的路徑。

我在gitHub上有一個項目，它演示瞭如何在圖像上使用形狀圖層作爲蒙版以創建「時鐘擦拭」轉換。爲此，我將弧線寬度設置得如此之大，以至於形狀完全填充框架矩形，而不是繪製圓環形狀。在你的情況下，你會減少線條的粗細，以便畫出你的甜甜圈。

Core Animation demo on Github

點擊應用中的「遮罩動畫」按鈕來查看工作中的形狀圖層動畫。

來源

2012-11-23 18:13:24

設置剪輯UIImage的UIBezierPath的動畫

回答

相關問題