चेतन कैसे चाप/डोनट खंड स्ट्रोक और लंबाई परिवर्तन

Question

मैं निम्न परिदृश्यों में आर्क्स (डोनट क्षेत्रों उर्फ) चेतन करने के लिए जहां चाप काल्पनिक वृत्त के केंद्र के लिए एक निरंतर त्रिज्या r का कहना है की जरूरत है (चाप बैठता है सर्कल के बाहर सही)।

1) त्रिज्या आर और कोण अल्फा को बनाए रखते हुए आर्क स्ट्रोक चौड़ाई x से y तक एनिमेट करें।

2) निरंतर स्ट्रोक चौड़ाई और त्रिज्या को बनाए रखते हुए अल्फा से बीटा को आर्क कोण को एनिमेट करें।

3) 1 और 2 एक साथ करें लेकिन संभवतः स्वतंत्र एनिमेशन/समय के साथ करें।

यहाँ मैं अब तक है:

मैं चाप कि बस CGContextAddArc साथ चाप ड्रॉ कस्टम दृश्य भी ड्राइंग क्रियान्वित किया है। यह स्थिर चाप के लिए ठीक है लेकिन यह कुछ भी एनिमेट नहीं करता है।

इसके अलावा, मुझे पता है कि क्लिप की छवियों को [UIBezierPath addClip] जैसे चित्रों को कैसे आकर्षित किया जाए।

उत्तरार्द्ध दिलचस्प है क्योंकि मुझे लगता है कि परिदृश्य 1 के लिए, मैं वांछित प्रभाव को दो तरीकों से प्राप्त कर सकता हूं: या तो एक चाप खींचते रहें और स्ट्रोक और त्रिज्या दोनों को संशोधित रखें ताकि एक ही कथित आंतरिक सर्कल त्रिज्या को बनाए रखा जा सके (जो मैं हूं आशावादी नहीं है, मुझे डर है कि त्रिज्या "झुकाव" करेगा), या आकार में बढ़ने वाले सर्कल का एक सेगमेंट खींचें (शायद एफ़िन ट्रांसफॉर्म के साथ स्केल को संशोधित करके) और उसके बाद एक स्थिर सर्कुलर मास्क द्वारा क्लिप किया जाता है।

अब, मैं इन सभी अवधारणाओं को कैसे ले सकता हूं और उन्हें कुछ वास्तविक ड्राइंग कोड में कैसे डाल सकता हूं? मुझे वास्तविक कोड की आवश्यकता नहीं है (हालांकि यह भी ठीक होगा), लेकिन एक वैचारिक दृष्टिकोण की तरह, जैसे, क्या मैं इसे कस्टम ड्राइंग के साथ UIView के साथ कर सकता हूं, या क्या हमें कस्टम कुंजी एनिमेशन के बारे में बात करने की ज़रूरत है कैलियर और ऐसे शामिल हैं। दूसरे शब्दों में, यह सब करने के लिए सही आर्किटेक्चर क्या है जो चिकनी एनीमेशन के लिए एक कंपोजिटिंग परिप्रेक्ष्य से कुशल होने के दौरान कोड के लिए सबसे आसान होगा?

Answer 1

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

पहला उदाहरण linewidth संपत्ति एनिमेट द्वारा किया जा सकता है और दूसरी strokeStart और strokeEnd गुण एनिमेट

Answer 2

आपको इसे कैलेयर सबक्लास पर कस्टम एनिमेटेबल गुणों का उपयोग करके कार्यान्वित करना चाहिए। This tutorial (स्रोत here के साथ) एनिमेटेड पाई चार्ट बनाने के लिए है और बहुत अच्छा लग रहा है। आपको अपनी आवश्यकताओं के लिए इसे संशोधित करने में सक्षम होना चाहिए।