दो स्ट्रोक एंड एनीमेशन कनेक्ट करें

Question

मैं एंड्रॉइड सामग्री डिज़ाइन सर्कुलर अनिश्चित गतिविधि संकेतक के समान कस्टम गतिविधि सूचक बनाने की कोशिश कर रहा हूं। असल में मैं सर्कल को दो बार खींचना चाहता हूं और इसे मिटाना चाहता हूं, लेकिन मिटाना और ड्राइंग एक ही समय या गति पर नहीं होता है। यह मेरे पास अब तक है:

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 से फिर से शुरू होता है। क्या किसी के पास कोई फिक्स है कि इसे कैसे ठीक किया जाए?

Answer 1

जब पहली 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.5 * duration
• endEraseAnimation की अवधि कि 0.5 * duration पर शुरू होता है के साथ 0.2 पर शुरू होता है ।

इसका मतलब है कि eraseAnimation (0.2 + 0.5 * duration) के अंत हमेशा की शुरुआत से अधिक है endEraseAnimation (0.5 * duration)