灌裝圈動畫抽籤RECT

我有這個在GitHub上：https://github.com/evertoncunha/EPCSpinnerView 灌裝圈動畫抽籤RECT

它這樣做的動畫：

有動畫毛刺，當圓填充目前正在調整大小，我不想解決這個問題。

毛刺發生是因爲我通過設置圖層邊角來填充圓的方式，所以它看起來像一個圓圈，我用動畫進度增加了lineWidth，看起來好像是從外面填充的，從EPCDrawnIconSpinner開始。 SWIFT文件：

let ovalPath = UIBezierPath() 
ovalPath.addArc(withCenter: CGPoint(x: ovalRect.midX, y: ovalRect.midY), 
       radius: ovalRect.width/2, 
       startAngle: start * CGFloat.pi/180, 
       endAngle: end * CGFloat.pi/180, clockwise: true) 
layer.cornerRadius = rect.size.height/2 
ovalPath.lineWidth = 14 + ((frame.size.width) * progress)

有沒有更好的辦法，我可以做到這一點的動畫，而不做層cornerRadius的事情嗎？如果我只能得出這樣的

來源

2017-09-14 Everton Cunha

這似乎很奇怪，像這樣的觀點應該調整呢？填充時是否真的需要動畫改變尺寸？這樣的觀點肯定會放在屏幕上，然後離開那裏？也許改變方向可能會改變大小，但我不希望它動畫。只需改變大小而不用動畫。 – Fogmeister

我實際上在鍵盤出現的時候調整了旋鈕，所以是的，我需要調整大小。但是我有這個問題，我無法對cornerRadius變化進行動畫處理，所以我認爲我應該恰當地繪製它，但是idk如何。 –

我結束了以下解決方案：

fileprivate func drawPathCompleted(_ ovalRect: CGRect) { 

    var size: CGFloat = ovalRect.size.width 

    var current = size*(1-progress) 

    var pos: CGFloat = lineWidth/2 

    while size > current { 
     let ovalPath = UIBezierPath(ovalIn: CGRect(x: pos, y: pos, width: size, height: size)) 
     ovalPath.lineCapStyle = .round 
     ovalPath.lineWidth = lineWidth 
     ovalPath.stroke() 
     let decr = lineWidth/2 
     size -= decr 
     pos += decr/2 
    } 
}

在此承諾，行243： https://github.com/evertoncunha/EPCSpinnerView/commit/87d968846d92aa97e85ff4c58b6664ad7b03f00b#diff-8dc22814328ed859a00acfcf2909854bR242

來源

2017-09-25 17:59:21

我能想到的兩種方法使用cornerRadius脫身：

使用口罩圓的四角，使用形狀層，以填充

您可以創建一個實心圓的CAShapeLayer，並將框架設置爲您的視圖邊界，然後將其分配給您的圖層的mask屬性。動畫顯示視圖的大小時，可以爲此蒙版的大小設置動畫。其次，您需要稍後創建一個額外的形狀（可能類似於您的旋轉圓圈），並在此圖層上執行線寬動畫。面具將確保線不向外生長，但只能向內。

動畫線寬和填充形狀的半徑

你將需要創建類似於首次描述的一個圈形層選項，但不僅僅是爲線寬設置動畫，還需要爲半徑設置動畫。例如：假設您的視圖大小是40x40。當然，在填充動畫開始時，您的形狀圖層也需要爲40x40。然後，您將使線寬變爲20pts，並將圓的半徑從20pts動畫到10pts。一個半徑爲10pts，線寬爲20pts的圓圈看起來是一個半徑爲20pts的實心圓。

希望這會有所幫助。

來源

2017-09-15 17:57:05 daltonclaybrook

我嘗試過使用蒙版，但我遇到以下問題： •使用UIView.beginAnimation完成調整大小動畫... •蒙版不會與它的超級視圖一起調整大小，您始終需要手動重新創建或更改它的幀，而我無法通過UIView.beginAnimation實現這一點，因爲我沒有這個動畫的逐幀控制。對於第二種方式，idk如何做到這一點，我發現的幾個例子是像時鐘一樣充滿圓圈，我找不到一個外部 - –

dalton指出要嘗試CADisplayLink，我會在這裏檢查並更新;） –

灌裝圈動畫抽籤RECT

回答

相關問題