如何動畫弧/甜甜圈段行程和長度變化

我需要其中電弧維持恆定的半徑r的假想圓中心進行動畫在下列情況下的弧（又名甜甜圈段）（弧位於在圈子外面）。

1）將圓弧筆畫寬度從x移動到y，同時保持半徑r和角度α。

2）在保持恆定的筆畫寬度和半徑的同時，將圓弧角度從alpha設置爲beta。

3）做1和2在一起，但可能與獨立的動畫/時間。

這是我到目前爲止有：

我已經實現了圓弧繪製爲簡單的繪製與CGContextAddArc弧自定義視圖。這對於靜態弧線來說很好，但它不會動畫。

此外，我知道如何繪製像[UIBezierPath addClip]這樣的剪輯圖像。

後者很有趣，因爲我認爲對於情景1，我可以通過兩種方式實現預期效果：或者不斷繪製圓弧並修改筆畫和半徑以保持相同的感知內圓半徑（即我不要樂觀，恐怕半徑會「抖動」），或者繪製一個尺寸增大的圓的一部分（也許通過簡單地用仿射變換修改該尺度），然後用靜態圓形遮罩來裁剪。

現在，我如何理解所有這些概念，並將它們歸納爲一些實際的繪圖代碼？我不需要真正的代碼（雖然這也可以），但更像是一個概念性的方法，我可以用一個帶有自定義繪圖的UIView來完成這一切，還是我們需要談論我自己理解的自定義關鍵動畫涉及CALayers等。換句話說，什麼是正確的架構來完成所有這些，從合成的角度來看，對於流暢的動畫來說，最簡單的代碼是有效的？

來源

2012-06-07 Jaanus

您可以使用CAShapeLayer創建弧的路徑，然後爲不同的筆觸屬性設置動畫。您可以創建完整圓的路徑，並使用strokeStart和strokeEnd屬性僅觸發圓的某個部分。值得注意的是，形狀圖層位於中心，因此當您增加線條寬度時，它們會同樣向內和向外增加。爲了解決這個問題，你可以用相同的圓形掩蓋它並加倍線寬或者爲路徑設置動畫，以使半徑增加線寬增加的一半，使得最內部的點始終與中心具有相同的距離。

第一個例子可通過動畫線寬屬性進行，並且所述第二可通過動畫化strokeStart和strokeEnd性質

來源

2012-06-07 06:43:49

+1，這會讓我鏈接到的教程簡單得多！ – jrturton

謝謝。我通過添加CAShapeLayer作爲我的自定義UIView的子圖層，然後使用CABasicAnimation按照您的建議動畫化它的屬性，從而完成了我想要的任務。對於甜甜圈孔，我添加了一個圖層蒙版。 – Jaanus

嘿！我試圖完成同樣的事情，並且很高興看到一些代碼......我試圖實現David的建議，但是我無法爲「strokeEnd」設置動畫...以下是我擁有的：https ：//gist.github.com/4073608 – Eric

您應該使用CALayer子類上的自定義動畫屬性來實現此功能。 This tutorial（源碼here）用於創建動畫餅圖，看起來不錯。您應該能夠根據您的要求對其進行修改。

來源

2012-06-07 06:26:06 jrturton

酷教程來完成。感謝您鏈接它。我不知道有可能創建像這樣的自定義動畫屬性。 –

如何動畫弧/甜甜圈段行程和長度變化

回答

相關問題