連接兩個strokeEnd動畫

我正在嘗試製作一個類似於Android材質設計循環未確定活動指示器的自定義活動指示器。基本上我想畫兩次並清除它，但擦除和繪圖不會同時發生，也不會同時發生。這是我到目前爲止：連接兩個strokeEnd動畫

let progressLayer = CAShapeLayer() 
progressLayer.strokeColor = UIColor.red().cgColor 
progressLayer.fillColor = nil 
progressLayer.lineWidth = 2 

let drawAnimation = CABasicAnimation(keyPath: "strokeEnd") 
drawAnimation.duration = duration/2 
drawAnimation.fromValue = 0 
drawAnimation.toValue = 1 
drawAnimation.isRemovedOnCompletion = false 
drawAnimation.fillMode = kCAFillModeForwards 

let eraseAnimation = CABasicAnimation(keyPath: "strokeStart") 
eraseAnimation.duration = duration/2 
eraseAnimation.beginTime = 0.2 
eraseAnimation.fromValue = 0 
eraseAnimation.toValue = 0.4 
eraseAnimation.isRemovedOnCompletion = false 
eraseAnimation.fillMode = kCAFillModeForwards 

let endDrawAnimation = CABasicAnimation(keyPath: "strokeEnd") 
endDrawAnimation.beginTime = duration/2 
endDrawAnimation.duration = duration/2 
endDrawAnimation.fromValue = 0 
endDrawAnimation.toValue = 1 
endDrawAnimation.isRemovedOnCompletion = false 
endDrawAnimation.fillMode = kCAFillModeForwards 

let endEraseAnimation = CABasicAnimation(keyPath: "strokeStart") 
endEraseAnimation.beginTime = duration/2 
endEraseAnimation.duration = duration/4 
endEraseAnimation.fromValue = 0.4 
endEraseAnimation.toValue = 1 
endEraseAnimation.isRemovedOnCompletion = false 
endEraseAnimation.fillMode = kCAFillModeForwards 

let endEraseAnimation2 = CABasicAnimation(keyPath: "strokeStart") 
endEraseAnimation2.beginTime = duration * 3/4 
endEraseAnimation2.duration = duration/4 
endEraseAnimation2.fromValue = 0 
endEraseAnimation2.toValue = 1 
endEraseAnimation2.isRemovedOnCompletion = false 
endEraseAnimation2.fillMode = kCAFillModeForwards 


let animations = CAAnimationGroup() 
animations.duration = duration 
animations.animations = [drawAnimation, eraseAnimation, endDrawAnimation, endEraseAnimation, endEraseAnimation2] 
animations.isRemovedOnCompletion = false 
animations.fillMode = kCAFillModeForwards 
progressLayer.add(animations, forKey: "stroke")

該代碼做一切都如預期，除了一個問題。當第一個strokeEnd動畫完成並且第二個動畫開始時，會出現一種閃光，意味着直到該點爲止繪製的圓的部分消失，然後再從0開始繪製。有沒有人有任何想法如何解決這個問題？

來源

2016-07-25 Banana

您的代碼顯示錯誤，當我嘗試編譯，請把你的真實的代碼，以幫助你 –

@ReinierMelian這是Swift 3代碼，確保你使用的是Xcode 8或者將它翻譯成Swift 2. @Banana，'progressLayer'是什麼？ – JAL

'progressLayer'是一個'CAShapeLayer'，我在上面的問題中加入了這個。 – Banana

當第一strokeEnd動畫完成，第二個開始有幾分閃光意味着繪製直到該點的圓的一部分的消失，然後從0

再次開始繪製

如果您比較drawAnimation和endDrawAnimation的設置，您會看到它們除beginTime屬性外都是相同的。那是什麼導致你的閃爍。他們都從0開始，他們都結束與1.由於你沒有指定期望的結果我可以假設你想endDrawAnimation有fromValue的1

let drawAnimation = CABasicAnimation(keyPath: "strokeEnd") 
drawAnimation.duration = duration/2 
drawAnimation.fromValue = 0 
drawAnimation.toValue = 1 
drawAnimation.isRemovedOnCompletion = false 
drawAnimation.fillMode = kCAFillModeForwards 

let endDrawAnimation = CABasicAnimation(keyPath: "strokeEnd") 
endDrawAnimation.beginTime = duration/2 // Starts after the first animation and starts with 0 again. 
endDrawAnimation.duration = duration/2 
endDrawAnimation.fromValue = 0 
endDrawAnimation.toValue = 1 
endDrawAnimation.isRemovedOnCompletion = false 
endDrawAnimation.fillMode = kCAFillModeForwards

一個改進建議

就我所見，您希望創建關鍵幀動畫，這意味着您有預定義的偏移量，動畫行爲（速度，值等）發生變化。您可能需要考慮使用CAKeyframeAnimation。

我，如果你意識到這一點，但此刻的你有兩個動畫上strokeStart同時運行的不確定：

eraseAnimation，在0.2與0.5 * duration
endEraseAnimation的持續時間開始於0.5 * duration開始。

這意味着eraseAnimation（0.2 + 0.5 * duration）到底是總是比開始更大endEraseAnimation（0.5 * duration）

來源

2016-08-03 13:04:30

連接兩個strokeEnd動畫

回答

相關問題