परिचय
घूमता हुआ लोडर, उछलता आइकन या पलक झपकाती आँख — Animated Image विजेट से ऐसे एनिमेशन आसानी से बनते हैं। इस गाइड में इसे जोड़ना, फ़्रेम तैयार करना, गति और दोहराव तय करना तथा चलते UI में एनिमेशन शुरू और बंद करना सीखें।
Animated Image विजेट क्या है?
यह स्थिर तस्वीरों को एक के बाद एक दिखाता है, जैसे फ़्लिपबुक। हर तस्वीर एक फ़्रेम है। तेज़ी से फ़्रेम बदलने पर तस्वीर चलती हुई लगती है। आप फ़्रेम देते हैं, गति और दोहराव तय करते हैं; बाकी काम विजेट करता है।
एक ही एनिमेशन बार-बार चलाना हो, जैसे घूमता लोडर, धड़कता दिल या हाथ हिलाता किरदार, तो यह सही विकल्प है।
यह LVGL के lv_animimg विजेट पर आधारित है। एक्सपोर्ट के समय PicoPixel ज़रूरी LVGL कोड लिखता है, जैसे lv_animimg_create, lv_animimg_set_src और lv_animimg_set_duration। आपको यह कोड हाथ से नहीं लिखना पड़ता। यह LVGL 8.x के लिए है।
Animated Image या Sprite — कौन-सा चुनें?
दोनों दिखने में मिलते-जुलते हैं, लेकिन काम अलग है:
- Animated Image: एक एनिमेशन बार-बार चलाना हो, जैसे लोडर का घूमना।
- Sprite: एक ही विजेट में कई एनिमेशन हों और उनके बीच बदलना हो, जैसे Idle, Running या Happy।
स्प्राइट के हर मोड में अंदर से एक अलग Animated Image काम करता है। अगर दूसरे एनिमेशन पर बदलने की ज़रूरत है, तो Sprite चुनें।
विजेट जोड़ें और फ़्रेम अपलोड करें
- अपनी स्क्रीन पर Animated Image विजेट जोड़ें।
- प्रॉपर्टी पैनल में Image Set के सामने Add Image Set दबाएँ।
- NEW टैब में “Click to upload frames” पर क्लिक करें और इमेज चुनें। एक साथ कई PNG या JPEG फ़ाइलें (
.png,.jpeg,.jpg) चुन सकते हैं। - फ़्रेम जोड़ने के लिए Continue दबाएँ। अब Image Set में फ़्रेम की संख्या दिखेगी, जैसे “8 frames”।
पहले इस्तेमाल किया हुआ फ़्रेम सेट Assets टैब से भी चुन सकते हैं। उसे दोबारा अपलोड करने की ज़रूरत नहीं है।
फ़्रेम फ़ाइल के नाम के वर्णानुक्रम में लगते हैं। नामों में शुरू के शून्य रखें: frame_01.png, frame_02.png, frame_03.png। frame_2.png जैसा नाम frame_10.png के बाद आएगा और क्रम बिगड़ सकता है।
कम से कम 2 और अधिकतम 32 फ़्रेम जोड़ सकते हैं। हर फ़्रेम डिवाइस पर जगह लेता है, इसलिए कम लेकिन अच्छी तरह चुने हुए फ़्रेम इस्तेमाल करें।
सभी फ़्रेम का आकार समान क्यों होना चाहिए?
हर फ़्रेम की चौड़ाई और ऊँचाई बिल्कुल समान होनी चाहिए। अलग आकार की इमेज जोड़ने पर PicoPixel यह संदेश दिखाता है: “All frames must have the same dimensions.”
विजेट हर फ़्रेम को उसी जगह और उसी क्षेत्र में दिखाता है। पहला फ़्रेम 64×64 और दूसरा 80×80 हो तो तस्वीर स्थिर जगह पर चलने के बजाय उछलती या खिसकती दिखेगी। समान आकार से यह समस्या नहीं आती।
अपलोड करने से पहले सभी फ़्रेम का आकार बराबर करें। अपने इमेज टूल में एक ही आकार के कैनवास से हर फ़्रेम एक्सपोर्ट करना सबसे आसान तरीका है।
गति तय करें: Duration
Duration पूरे एनिमेशन की अवधि है, मिलीसेकंड (ms) में। यह सभी फ़्रेम एक बार पूरे चलने का समय है, एक फ़्रेम का समय नहीं। डिफ़ॉल्ट 1000 ms, यानी एक सेकंड है।
यह समय सभी फ़्रेम में बराबर बँटता है। 8 फ़्रेम और 1000 ms की अवधि हो तो हर फ़्रेम 125 ms दिखेगा। तेज़ चलाने के लिए अवधि घटाएँ और धीमा करने के लिए बढ़ाएँ।
दोहराव: एक बार या लगातार
Repeat से तय होता है कि एनिमेशन खत्म होने पर क्या होगा:
- Infinite: लगातार दोहराएँ। यह डिफ़ॉल्ट है और लोडर जैसे एनिमेशन के लिए उपयोगी है।
- Normal (एक संख्या): उतनी बार चलाकर रुकें। 3 चुनने पर एनिमेशन तीन बार चलेगा और आखिरी फ़्रेम पर रुक जाएगा।
चलते UI में एनिमेशन नियंत्रित करें
इवेंट एडिटर से उपयोगकर्ता की गतिविधि के अनुसार एनिमेशन शुरू या बंद कर सकते हैं। इवेंट जोड़ें, Animated Image Mode एक्शन चुनें, लक्ष्य में अपनी एनिमेटेड इमेज रखें और मोड चुनें:
- Start: शुरू करें या रुका हुआ एनिमेशन जारी रखें।
- Stop: रोकें।
- Restart: पहले फ़्रेम से फिर चलाएँ।
उदाहरण के लिए, “connecting…” लोडर को पहले रुका रहने दें। बटन दबने पर Start और कनेक्शन बनने पर Stop करें।
मेमोरी का इस्तेमाल कम रखें
इमेज छोटे डिवाइस पर काफ़ी जगह ले सकती हैं। इन बातों से बचत होगी:
- केवल ज़रूरी फ़्रेम रखें। सहज गति के लिए अक्सर कुछ अच्छे फ़्रेम ही काफ़ी होते हैं।
- फ़्रेम का आकार छोटा रखें। 64×64 का एनिमेशन 240×240 से बहुत कम जगह लेता है।
- डिस्प्ले के अनुसार रंग की गहराई चुनें। हार्डवेयर पर चलाने के बारे में ESP32 ट्यूटोरियल देखें।
फ़र्मवेयर में Animated Image चलाने के लिए lv_conf.h में LV_USE_ANIMIMG चालू होना चाहिए। PicoPixel एक्सपोर्ट की गई README.md में यह लिखता है, ताकि आपको या AI असिस्टेंट को सही सेटिंग पता रहे।
आगे क्या सीखें
- एक विजेट में कई एनिमेशन चाहिए तो Sprite विजेट देखें।
- इवेंट एडिटर से एनिमेशन को बटन या दूसरे ट्रिगर से जोड़ें।
- तैयार UI डिवाइस पर चलाने के लिए ESP32 LVGL ट्यूटोरियल पढ़ें।
