एनिमेशनकेउदाहरण

क्या शामिल है

• 480 x 480 के चार एनिमेशन उदाहरण, जो Position, Size, Opacity और Mixed बोर्ड में व्यवस्थित हैं।
• स्थिति का एनिमेशन: X/Y के कीफ्रेम से विजेट को एक जगह से दूसरी जगह ले जाएँ।
• आकार का एनिमेशन: W/H के कीफ्रेम से विजेट की चौड़ाई और ऊँचाई बदलें।
• पारदर्शिता का एनिमेशन: समय के साथ पारदर्शिता बदलकर विजेट को धीरे-धीरे दिखाएँ या छिपाएँ।
• संयुक्त एनिमेशन: एक ही विजेट पर कई गुणों के ट्रैक साथ चलाएँ।
• हर उदाहरण का अपना Play Animation बटन, जिससे उसकी टाइमलाइन चलाई जा सकती है।
• टाइमलाइन और कीफ्रेम एडिटर का प्रीव्यू, जिसमें असली एनिमेशन मोड, ट्रैक और कीफ्रेम दिखते हैं।
• PicoPixel लोगो, जिसे हर उदाहरण में एनिमेट किया गया है।
• दोबारा इस्तेमाल किए जा सकने वाले आइकन, जो स्थिति, आकार, पारदर्शिता और संयुक्त एनिमेशन दर्शाते हैं।
• Roboto फ़ॉन्ट, जिनका इस्तेमाल कार्ड के शीर्षकों, विवरणों और बटनों में किया गया है।

प्रोजेक्ट के एसेट

Assets पैनल में इस छोटे LVGL एनिमेशन प्रोजेक्ट के संसाधन दिखते हैं:

• Images: 5 — PicoPixel लोगो, नाम का चित्र और एनिमेशन समझाने वाले छोटे आइकन।
• Colors: 0 — रंग सीधे डिज़ाइन में लगाए गए हैं।
• Fonts: 2 — Roboto 22 और Roboto Bold 32।
• Widgets: 0 — उदाहरण स्क्रीन के ऑब्जेक्ट, इवेंट और एनिमेशन टाइमलाइन पर केंद्रित है।

दिखाई देने वाले चित्र हैं:

• 96x96 का सियान आइकन, जो स्थिति या आकार बदलने को दर्शाता है।
• 96x96 का बिंदुओं वाला सियान आइकन, जो पारदर्शिता दर्शाता है।
• 250x250 का PicoPixel लोगो।
• 356x100 का PicoPixel नाम वाला चित्र।
• 96x96 का गुलाबी आइकन, जो संयुक्त एनिमेशन या स्थिति बदलने को दर्शाता है।

एसेट की संख्या जानबूझकर कम रखी गई है। यहाँ गति पैदा करने के लिए बड़े चित्रों की श्रृंखला संग्रहीत नहीं की जाती; कीफ्रेम के अनुसार LVGL ऑब्जेक्ट के गुण बदलते हैं।

लेयर की संरचना

लेयर पैनल में प्रोजेक्ट को एनिमेशन के प्रकार के अनुसार बाँटा गया है:

• Position में Play Pos Animation, Pico Logo, Image 1 और लेबल हैं।
• Size में Play Size Animation, Pico Logo, Image 3 और लेबल हैं।
• Opacity में Play Opacity Animation, Pico Logo, Image 4 और लेबल हैं।
• Mixed में Play Mixed Animation, Pico Logo और लेबल हैं।

हर बोर्ड का ढाँचा एक जैसा है: शीर्षक और विवरण एनिमेशन समझाते हैं, PicoPixel लोगो पर एनिमेशन चलता है और नीला बटन उसे शुरू करता है।

टाइमलाइन और कीफ्रेम

इस टेम्पलेट में एनिमेशन को टाइमलाइन से नियंत्रित किया जाता है। एनिमेशन एडिटर के प्रीव्यू में बाईं ओर Position, Size, Opacity और Mixed जैसे प्रकार दिखते हैं। चुने हुए विजेट को खोलने पर उसके हर गुण का अलग ट्रैक दिखाई देता है।

Mixed उदाहरण के स्क्रीनशॉट में ये चीज़ें हैं:

• स्थिति के ट्रैक, जिनमें X और Y के अलग मान हैं।
• आकार के ट्रैक, जिनमें W और H के अलग मान हैं।
• पारदर्शिता का ट्रैक, जिसमें % का मान है।
• अलग-अलग समय पर रखे गए कई कीफ्रेम।
• टाइमलाइन पर आगे-पीछे जाने की सुविधा, जिससे किसी भी समय पर एनिमेशन की स्थिति देख सकते हैं।

इस तरह आप साधारण ट्रांज़िशन से आगे बढ़कर हर गुण के लिए सटीक समय और मान तय कर सकते हैं। एक्सपोर्ट करने से पहले पूरा एनिमेशन देखकर उसे सुधार सकते हैं।

टाइमलाइन एनिमेशन और फ्रेम एनिमेशन का अंतर

इस टेम्पलेट में कीफ्रेम के अनुसार LVGL ऑब्जेक्ट की जगह, आकार और पारदर्शिता बदलती है। यह चित्रों से बने एनिमेशन से अलग है, जिसमें हर फ्रेम एक अलग बिटमैप होता है।

• किसी LVGL ऑब्जेक्ट की स्थिति, चौड़ाई, ऊँचाई या पारदर्शिता बदलने के लिए इस टेम्पलेट का इस्तेमाल करें।
• स्पिनर, स्प्राइट जैसे लोडर या बार-बार चलने वाले चित्र के पहले से तैयार फ्रेम हों, तो LVGL Animated Image इस्तेमाल करें।
• बटन, स्क्रीन लोड होने, जेस्चर या किसी दूसरे संकेत से एनिमेशन शुरू करने के लिए इवेंट एडिटर इस्तेमाल करें।

दोनों तरीके उपयोगी हैं। इंटरफ़ेस की गति और ट्रांज़िशन के लिए कीफ्रेम अक्सर बेहतर रहते हैं: ऑब्जेक्ट को बाद में भी बदल सकते हैं और कई चित्र संग्रहीत करने की ज़रूरत कम हो सकती है।

LVGL के लिए यह तरीका क्यों उपयोगी है

LVGL समय के साथ ऑब्जेक्ट के गुण बदल सकता है। PicoPixel का एनिमेशन मोड आपको ये मान सीधे देखने और बदलने देता है, ताकि हर बदलाव के लिए C कोड न लिखना पड़े।

• स्थिति के कीफ्रेम ऑब्जेक्ट के निर्देशांक बदलते हैं। इनसे पैनल, आइकन, कार्ड और सूचनाएँ खिसका सकते हैं।
• आकार के कीफ्रेम चौड़ाई और ऊँचाई बदलते हैं। इनसे नियंत्रण फैलाना, धड़कने जैसा प्रभाव देना, प्रगति उभारना और फ़ोकस दिखाना संभव है।
• पारदर्शिता के कीफ्रेम दृश्यता बदलते हैं। इनसे धीरे-धीरे दिखाना या छिपाना, निष्क्रिय अवस्था बताना और ध्यान आकर्षित करना आसान है।
• संयुक्त ट्रैक कई गुण साथ बदलते हैं। एक ही टाइमलाइन में विजेट खिसक सकता है, उसका आकार बदल सकता है और वह धीरे-धीरे दिख या छिप सकता है।
• इवेंट से एनिमेशन शुरू कर सकते हैं। बटन क्लिक करने पर लाइव प्रीव्यू और एक्सपोर्ट किए गए LVGL प्रोजेक्ट, दोनों में टाइमलाइन चल सकती है।
• प्रोजेक्ट मानक LVGL 8.x UI कोड के रूप में एक्सपोर्ट होता है। इसे ESP-IDF, Arduino, PlatformIO, STM32, Zephyr या किसी अन्य LVGL बिल्ड में जोड़ सकते हैं।

रनटाइम पर एनिमेशन चलाना

PicoPixel एनिमेशन की सेटिंग और उसे चलाने वाली क्रियाओं का कोड बना सकता है। एक्सपोर्ट के बाद खुद विस्तार करना चाहें, तो सामान्य LVGL एनिमेशन कोड में भी यही क्रम होता है: एनिमेशन तैयार करें, लक्ष्य ऑब्जेक्ट चुनें, मान और समय तय करें, फिर उसे शुरू करें।

static void set_opa(void * obj, int32_t value)
{
    lv_obj_set_style_opa((lv_obj_t *)obj, (lv_opa_t)value, 0);
}

static void fade_logo(lv_obj_t * logo)
{
    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_var(&a, logo);
    lv_anim_set_values(&a, LV_OPA_COVER, LV_OPA_30);
    lv_anim_set_time(&a, 450);
    lv_anim_set_exec_cb(&a, set_opa);
    lv_anim_start(&a);
}

अधिकांश मामलों में विज़ुअल टाइमलाइन इस्तेमाल करना आसान है: PicoPixel में कीफ्रेम बनाएँ, Play Animation क्रिया से बटन जोड़ें और प्रोजेक्ट एक्सपोर्ट करें।

अपनी ज़रूरत के अनुसार बदलें

इस मुफ्त LVGL कीफ्रेम टेम्पलेट से शुरुआत करके टाइमलाइन अपने इंटरफ़ेस के अनुसार बदलें।

• PicoPixel लोगो की जगह अपना आइकन, स्थिति दिखाने वाला कार्ड, मोडल या संकेतक रखें।
• स्थिति के कीफ्रेम बदलकर पैनल खिसकाएँ, सूचना आगे लाएँ या किसी नियंत्रण की ओर ध्यान खींचें।
• आकार के कीफ्रेम से धड़कने जैसा प्रभाव, बटन दबने का संकेत, फैलता हुआ कार्ड या फ़ोकस दिखाएँ।
• पारदर्शिता के कीफ्रेम से सामग्री धीरे-धीरे दिखाएँ या छिपाएँ।
• Mixed उदाहरण में स्थिति, आकार और पारदर्शिता साथ बदलकर अधिक विस्तृत एनिमेशन बनाएँ।
• समय ऐसा रखें कि उपकरण इस्तेमाल करते समय प्रतिक्रिया तेज़ लगे।
• सही समय पर एनिमेशन चलाने के लिए Clicked या Screen Loaded जैसे इवेंट चुनें।
• कम मेमोरी वाले बोर्ड पर फ्लैश करने से पहले चित्रों का आकार सीमित रखें और बेकार एसेट हटा दें।

अपने प्रोजेक्ट में एक्सपोर्ट करना

टेम्पलेट को PicoPixel में खोलें, एनिमेशन टाइमलाइन देखें और प्रमुख ऑब्जेक्ट को स्पष्ट नाम दें। हर बोर्ड का Play Animation बटन दबाकर प्रीव्यू जाँचें, फिर प्रोजेक्ट को LVGL C कोड में एक्सपोर्ट करें।

ESP32 प्रोजेक्ट के लिए सामान्य क्रम यह है:

1. अपनी ज़रूरत के अनुसार Position, Size, Opacity या Mixed बोर्ड चुनें।
2. लोगो और लेबल की जगह अपने UI ऑब्जेक्ट रखें।
3. टाइमलाइन में कीफ्रेम, समय और गति बदलने का ढंग (easing) तय करें।
4. इवेंट एडिटर में ट्रिगर को Play Animation क्रिया से जोड़ें।
5. PicoPixel UI को LVGL C में एक्सपोर्ट करें।
6. एक्सपोर्ट की गई फ़ाइलें अपने ESP-IDF, Arduino या PlatformIO प्रोजेक्ट में जोड़ें।
7. LVGL और डिस्प्ले ड्राइवर तैयार होने के बाद ui_init() कॉल करें।

अधिक जानकारी के लिए इवेंट एडिटर की गाइड और PicoPixel टेम्पलेट इस्तेमाल करने की गाइड पढ़ें।

कहाँ इस्तेमाल करें

यह टेम्पलेट इन कामों की शुरुआत के लिए उपयोगी है:

• LVGL में कीफ्रेम एनिमेशन सीखना
• ESP32 इंटरफ़ेस में गति का प्रोटोटाइप बनाना
• टाइमलाइन से विजेट की गति नियंत्रित करना
• बटन दबाने पर एनिमेशन चलाना
• स्थिति, आकार और पारदर्शिता के एनिमेशन जाँचना
• लोडिंग और प्रगति के संकेत दिखाना
• पुष्टि करना या ध्यान आकर्षित करना
• शुरुआती परिचय स्क्रीन और इंटरैक्टिव डेमो बनाना
• समझना कि PicoPixel की विज़ुअल टाइमलाइन LVGL में कैसे काम करती है