एक UIBezierPath को एनिमेट करें जो UIImage

Question

क्लिप करता है मेरे पास एक ऐसी छवि है जो डोनट की तरह दिखती है और इसे एनिमेट करना चाहती है ताकि ऐसा लगता है कि डोनट सर्कल पूरा नहीं हुआ है (स्ट्रोक बंद नहीं है)। वर्णन करना मुश्किल है लेकिन एक स्पीडोमीटर की कल्पना करें जो 100 हो जाती है और आप 50 ड्राइव करते हैं। मैंने यूग्राफिक्सबिनजिन इमेज कॉन्टेक्स्ट विथऑप्शन के अंदर पथ और [पथ एडक्लिप] की सहायता से मास्किंग की है जहां मैं यूआईएममेज भी प्रस्तुत करता हूं।

मेरा प्रश्न अब मैं कर सकता हूं कि मैं पथ को कैसे एनिमेट कर सकता हूं। मैंने इसे CABasicAnimation और 2 पथों के साथ करने की कोशिश की (पहला पथ जहां startAngle और endAngle समान हैं और दूसरा पथ अंत होता है एंजल वांछित कोण है) कुंजीपैथ के रूप में "पथ" के साथ लेकिन यह काम नहीं कर रहा है।

कुछ भी मदद करता है;)

Answer 1

मैं 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"]; 
} 

Answer 2

मैं एक CAShapeLayer की स्थापना, और दे आकार परत अपने डोनट आकार प्रस्तुत करना सुझाव है। आप एक मोटी रेखा के साथ एक चाप के एक CGPath के रूप में अपने डोनट आकार प्रस्तुत करने में सक्षम होना चाहिए।

कैशपलेयर में स्ट्रोकस्टार्ट और स्ट्रोक एंड गुण हैं। दोनों 0.0 से 1.0 तक हैं। डिफ़ॉल्ट रूप से, स्ट्रोक स्टार्ट 0.0 है (शुरुआत में शुरू करें) और स्ट्रोक एंड 1.0 है (पूरे पथ को खींचें)। ये गुण एनिमेटेबल हैं।

यदि आप strokeEnd को .75 से 1.0 में बदलते हैं तो आपका पथ केवल 3/4 खींचा जाएगा, और पथ के अंतिम 1/4 को चित्रित करेगा।

मेरे पास गिटहब पर एक प्रोजेक्ट है जो "घड़ी मिटाएं" संक्रमण बनाने के लिए एक छवि पर एक मुखौटा के रूप में एक आकृति परत का उपयोग करके दिखाता है। इसके लिए, मैं अपने चाप पर लाइन चौड़ाई इतना बड़ा करता हूं कि आकृति पूरी तरह से डोनट आकृति बनाने के बजाय फ्रेम आयताकार भरती है। आपके मामले में, आप लाइन मोटाई कम कर देंगे ताकि यह आपके डोनट को खींच सके।

Core Animation demo on Github

काम पर आकार परत एनीमेशन देखने के लिए ऐप्लिकेशन में "मास्क एनीमेशन" बटन क्लिक करें।