इससे पहले कि मैं करियर के विकास में कूदता, मैंने आफ्टर इफेक्ट्स में मोशन ग्राफिक्स का काम किया। लेकिन उस पृष्ठभूमि के साथ भी, मुझे अभी भी वेब पर एनिमेट करना बहुत ही चौंकाने वाला लगा।
वीडियो ग्राफिक्स एक विशिष्ट अनुपात के भीतर डिज़ाइन किए जाते हैं और फिर निर्यात किए जाते हैं। पूर्ण! लेकिन वेब पर कोई "निर्यात सेटिंग" नहीं है। हम सिर्फ कोड को दुनिया में धकेलते हैं और हमारे एनिमेशन को जिस भी डिवाइस पर वे उतरते हैं, उसके अनुकूल होना पड़ता है।
तो चलिए बात करते हैं रेस्पॉन्सिव एनिमेशन की! हम वाइल्ड वाइल्ड वेब पर एनिमेट करने का सबसे अच्छा तरीका कैसे अपना सकते हैं? हम कुछ सामान्य दृष्टिकोणों, कुछ जीएसएपी-विशिष्ट युक्तियों और कुछ गति सिद्धांतों को कवर करने जा रहे हैं। आइए कुछ फ़्रेमिंग के साथ शुरू करते हैं …
इस एनीमेशन का उपयोग कैसे किया जाएगा?
उत्तरदायी एनीमेशन पर ज़ैच सॉसियर का लेख कोड में कूदने से पहले अंतिम परिणाम के बारे में सोचने के लिए एक कदम पीछे हटने की सिफारिश करता है।
क्या एनीमेशन एक ऐसा मॉड्यूल होगा जो आपके एप्लिकेशन के कई हिस्सों में दोहराया जाता है? क्या इसे बिल्कुल स्केल करने की ज़रूरत है? इसे ध्यान में रखते हुए यह निर्धारित करने में मदद मिल सकती है कि एनीमेशन को किस तरीके से बढ़ाया जाना चाहिए और आपको प्रयास को बर्बाद करने से बचा सकता है।
यह बहुत अच्छी सलाह है। ए विशाल उत्तरदायी एनीमेशन को डिजाइन करने का एक हिस्सा यह जानना है कि उस एनीमेशन को स्केल करने की आवश्यकता है या नहीं, और फिर शुरुआत से ही सही दृष्टिकोण चुनना है।
अधिकांश एनिमेशन निम्नलिखित श्रेणियों में आते हैं:
- फिक्स्ड: आइकॉन या लोडर जैसी चीज़ों के लिए एनिमेशन जो सभी डिवाइस पर समान आकार और पक्षानुपात बनाए रखते हैं। यहाँ चिंता की कोई बात नहीं है! वहां कुछ पिक्सेल मानों को हार्ड-कोड करें और अपने दिन के साथ आगे बढ़ें।
- द्रव: ऐनिमेशन जिन्हें अलग-अलग उपकरणों में तरल रूप से अनुकूलित करने की आवश्यकता होती है। अधिकांश लेआउट एनिमेशन इस श्रेणी में आते हैं।
- लक्षित: एनिमेशन जो एक निश्चित डिवाइस या स्क्रीन आकार के लिए विशिष्ट हैं, या एक निश्चित ब्रेकपॉइंट पर काफी हद तक बदलते हैं, जैसे केवल डेस्कटॉप एनिमेशन या इंटरैक्शन जो डिवाइस-विशिष्ट इंटरैक्शन पर निर्भर करते हैं, जैसे टच या होवर।
द्रव और लक्षित एनिमेशन के लिए सोच और समाधान के विभिन्न तरीकों की आवश्यकता होती है। चलो एक नज़र डालते हैं…
द्रव एनिमेशन
As एंडी बेल कहते हैं: ब्राउज़र के संरक्षक बनें, इसके माइक्रोमैनेजर नहीं — ब्राउज़र को कुछ ठोस नियम और संकेत दें, फिर इसे आने वाले लोगों के लिए सही निर्णय लेने दें।
(यहाँ हैं स्लाइड उस प्रस्तुति से।)
द्रव एनीमेशन ब्राउज़र को कड़ी मेहनत करने देने के बारे में है। शुरू से ही सही इकाइयों का उपयोग करके बहुत सारे एनिमेशन आसानी से विभिन्न संदर्भों में समायोजित हो सकते हैं। यदि आप इस पेन का आकार बदलते हैं तो आप देख सकते हैं कि एनीमेशन का उपयोग कर व्यूपोर्ट इकाइयाँ जैसे-जैसे ब्राउज़र समायोजित होता है, वैसे-वैसे स्केल होता जाता है:
बैंगनी बॉक्स अलग-अलग ब्रेकप्वाइंट पर चौड़ाई भी बदलता है, लेकिन जैसा कि हम इसे स्थानांतरित करने के लिए प्रतिशत का उपयोग कर रहे हैं, एनीमेशन इसके साथ-साथ स्केल भी करता है।
एनिमेटिंग लेआउट गुण जैसे left और top लेआउट रीफ्लो और घबराहट 'जानकी' एनीमेशन का कारण बन सकता है, इसलिए जहां संभव हो ट्रांसफॉर्म और अस्पष्टता के लिए चिपके रहें।
हालांकि हम केवल इन इकाइयों तक ही सीमित नहीं हैं - आइए कुछ अन्य संभावनाओं पर एक नज़र डालते हैं।
एसवीजी इकाइयां
एसवीजी के साथ काम करने के बारे में मुझे जो चीजें पसंद हैं उनमें से एक यह है कि हम एनीमेशन के लिए एसवीजी उपयोगकर्ता इकाइयों का उपयोग कर सकते हैं जो बॉक्स से बाहर उत्तरदायी हैं। सुराग वास्तव में नाम में है - स्केलेबल वेक्टर ग्राफिक। एसवीजी-भूमि में, सभी तत्वों को विशिष्ट निर्देशांक पर प्लॉट किया जाता है। एसवीजी स्पेस एक अनंत बिट ग्राफ पेपर की तरह है जहां हम तत्वों को व्यवस्थित कर सकते हैं। viewBox ग्राफ पेपर के आयामों को परिभाषित करता है जिसे हम देख सकते हैं।
viewBox="0 0 100 50”इस अगले डेमो में, हमारा एसवीजी viewBox is 100 इकाइयाँ चौड़ी और 50 इकाई लंबा। इसका मतलब है कि अगर हम तत्व को एनिमेट करते हैं 100 एक्स-अक्ष के साथ इकाइयाँ, यह हमेशा अपने मूल SVG की पूरी चौड़ाई से आगे बढ़ेगी, चाहे वह SVG कितना भी बड़ा या छोटा क्यों न हो! डेमो को देखने के लिए एक आकार दें।
पैरेंट कंटेनर की चौड़ाई के आधार पर चाइल्ड एलिमेंट को एनिमेट करना HTML-land में थोड़ा मुश्किल है। अब तक, हमें जावास्क्रिप्ट के साथ माता-पिता की चौड़ाई को पकड़ना पड़ा है, जो आपके द्वारा एनिमेट करते समय काफी आसान है from एक रूपांतरित स्थिति, लेकिन जब आप एनिमेट कर रहे होते हैं तो थोड़ा सा फ़िज़ूल होता है to कहीं न कहीं आप निम्न डेमो में देख सकते हैं। यदि आपका अंतिम बिंदु एक रूपांतरित स्थिति है और आप स्क्रीन का आकार बदलते हैं, तो आपको उस स्थिति को मैन्युअल रूप से समायोजित करना होगा। गन्दा…
यदि आप आकार बदलने पर मान समायोजित करते हैं, तो याद रखें बहस करना, या ब्राउज़र के आकार बदलने के बाद भी फ़ंक्शन को आग लगा दें। श्रोताओं का आकार बदलें हर सेकेंड में एक टन घटनाओं को आग लगती है, इसलिए प्रत्येक घटना पर गुणों को अपडेट करना ब्राउज़र के लिए बहुत काम है।
लेकिन, यह एनिमेशन स्पीड-बम्प जल्द ही अतीत की बात होने जा रही है! ड्रम रोल प्लीज...
कंटेनर इकाइयां! प्यारी चीज। जिस समय मैं इसे लिख रहा हूं, वे केवल क्रोम और सफारी में काम करते हैं - लेकिन हो सकता है कि जब तक आप इसे पढ़ेंगे, तब तक हमारे पास फ़ायरफ़ॉक्स भी होगा। इस अगले डेमो में उन्हें कार्रवाई में देखें। उन छोटे लड़कों को देखो! क्या वह रोमांचक, एनीमेशन नहीं है जो मूल तत्वों के सापेक्ष है!
यह ब्राउज़र समर्थन डेटा से है क्या में उपयोग कर सकता हूँ, जिसमें अधिक विवरण है। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 105 | नहीं | नहीं | 105 | 16.0 |
मोबाइल / टैबलेट
| Android क्रोम | Android फ़ायरफ़ॉक्स | Android | आईओएस सफारी |
|---|---|---|---|
| 106 | नहीं | 106 | 16.0 |
FLIP के साथ फ्लुइड लेआउट ट्रांज़िशन
जैसा कि हमने पहले उल्लेख किया है, एसवीजी-भूमि में प्रत्येक तत्व को एक ग्रिड पर बड़े करीने से रखा गया है और प्रतिक्रियात्मक रूप से घूमना वास्तव में आसान है। HTML-भूमि में यह बहुत अधिक जटिल है। उत्तरदायी लेआउट बनाने के लिए, हम विभिन्न पोजिशनिंग विधियों और लेआउट सिस्टम के एक समूह का उपयोग करते हैं। वेब पर एनिमेट करने की मुख्य कठिनाइयों में से एक यह है कि बहुत लेआउट में परिवर्तन को चेतन करना असंभव है। हो सकता है कि किसी तत्व को स्थिति से स्थानांतरित करने की आवश्यकता हो relative सेवा मेरे fixed, या फ्लेक्स कंटेनर के कुछ बच्चों को व्यूपोर्ट के चारों ओर आसानी से फेरबदल करने की आवश्यकता होती है। हो सकता है कि किसी तत्व को फिर से पेरेंट करने और डीओएम में पूरी तरह से नई स्थिति में स्थानांतरित करने की आवश्यकता हो।
मुश्किल, हुह?
कुंआ। फ़्लिप तकनीक यहाँ दिन बचाने के लिए है; यह हमें इन असंभव चीजों को आसानी से चेतन करने की अनुमति देता है। मूल आधार है:
- प्रथम: संक्रमण में शामिल तत्वों की प्रारंभिक स्थिति को पकड़ो।
- पिछली बार: तत्वों को स्थानांतरित करें और अंतिम स्थिति प्राप्त करें।
- पलटना: पहली और आखिरी स्थिति के बीच के बदलावों पर काम करें और तत्वों को उनकी मूल स्थिति में वापस लाने के लिए ट्रांसफ़ॉर्म लागू करें। इससे ऐसा लगता है कि तत्व अभी भी अंदर हैं प्रथम स्थिति लेकिन वे वास्तव में नहीं हैं।
- प्ले: उल्टे रूपांतरणों को हटा दें और उनके लिए चेतन करें ठगा प्रथम के लिए राज्य पिछली बार राज्य.
यहाँ GSAP के FLIP प्लगइन का उपयोग करके एक डेमो दिया गया है जो आपके लिए सभी भारी भारोत्तोलन करता है!
यदि आप वेनिला कार्यान्वयन के बारे में कुछ और समझना चाहते हैं, तो पॉल लुईस के सिर पर जाएँ ब्लॉग पोस्ट - फ्लिप तकनीक के पीछे उनका दिमाग है।
फ्लुइडली स्केलिंग एसवीजी
तुम मुझे मिल गए... यह नहीं है वास्तव में एक एनीमेशन टिप। लेकिन अच्छे एनिमेशन के लिए स्टेज को सही तरीके से सेट करना जरूरी है! एसवीजी डिफ़ॉल्ट रूप से बहुत अच्छी तरह से स्केल करता है, लेकिन हम इसे नियंत्रित कर सकते हैं कि यह कैसे आगे बढ़ता है preserveAspectRatio, जो एसवीजी तत्व के पहलू अनुपात और viewBox पहलू अनुपात अलग हैं। यह उसी तरह से बहुत काम करता है जैसे background-position और background-size सीएसएस में गुण। घोषणा एक संरेखण मूल्य से बना है (background-position) और एक मिलना or टुकड़ा संदर्भ (background-size).
उन मीट और स्लाइस संदर्भों के लिए - slice के समान ही background size: cover, तथा meet के समान ही background-size: contain.
preserveAspectRatio="MidYMax slice"— x-अक्ष के मध्य में संरेखित करें, y-अक्ष के नीचे, और संपूर्ण व्यूपोर्ट को कवर करने के लिए स्केल अप करें।preserveAspectRatio="MinYMin meet"— x-अक्ष के बाईं ओर संरेखित करें, y-अक्ष के शीर्ष पर, और संपूर्ण को रखते हुए स्केल अप करेंviewBoxदिखाई।
टॉम मिलर इसका उपयोग करके इसे एक कदम आगे ले जाता है overflow: visible सीएसएस में और ऊंचाई को प्रतिबंधित रखते हुए "स्टेज लेफ्ट" और "स्टेज राइट" को प्रकट करने के लिए एक युक्त तत्व:
उत्तरदायी एसवीजी एनिमेशन के लिए, एसवीजी व्यूबॉक्स का उपयोग करने के लिए आसान हो सकता है ताकि एक निश्चित ब्राउज़र चौड़ाई के नीचे फसल और स्केल हो, जबकि ब्राउजर से अधिक व्यापक होने पर दाएं और बाएं एसवीजी एनीमेशन का अधिक खुलासा हो सके। सीमा। हम एसवीजी पर दिखाई देने वाले अतिप्रवाह को जोड़कर और इसे a . के साथ जोड़कर प्राप्त कर सकते हैं
max-heightएसवीजी को बहुत अधिक लंबवत स्केलिंग से रोकने के लिए रैपर।
फ्लुइडली स्केलिंग कैनवास
जटिल एनिमेशन के लिए कैनवास बहुत अधिक प्रदर्शनकारी है बहुत सारे एसवीजी या एचटीएमएल डोम को एनिमेट करने की तुलना में चलती भागों की, लेकिन यह स्वाभाविक रूप से अधिक जटिल भी है। आपको उन प्रदर्शन लाभों के लिए काम करना होगा! एसवीजी के विपरीत, जिसमें सुंदर उत्तरदायी इकाइयाँ हैं और बॉक्स से बाहर स्केलिंग है, चारों ओर बॉस होना चाहिए और थोड़ा सूक्ष्म प्रबंधन करना चाहिए।
मुझे अपना सेट अप करना पसंद है ताकि यह उसी तरह से काम करे जैसे एसवीजी (मैं पक्षपाती हो सकता हूं) एक सुंदर इकाई प्रणाली के साथ काम करने के लिए और एक निश्चित पहलू अनुपात के साथ। हर बार कुछ परिवर्तन होने पर फिर से तैयार करने की आवश्यकता होती है, इसलिए याद रखें कि जब तक ब्राउज़र का आकार बदलना समाप्त न हो जाए, या फिर से शुरू न हो जाए, तब तक फिर से तैयार होने में देरी करें!
जॉर्ज फ्रांसिस यह भी एक साथ रखो प्यारा सा पुस्तकालय जो आपको कैनवास को परिभाषित करने की अनुमति देता है viewBox विशेषता और preserveAspectRatio - बिल्कुल एसवीजी की तरह!
लक्षित एनिमेशन
आपको कभी-कभी अपने एनीमेशन के लिए कम तरल और अधिक निर्देशित दृष्टिकोण अपनाने की आवश्यकता हो सकती है। डेस्कटॉप मशीन की तुलना में मोबाइल उपकरणों में बहुत कम अचल संपत्ति होती है, और कम एनीमेशन-रस प्रदर्शन-वार होता है। तो मोबाइल उपयोगकर्ताओं के लिए कम एनीमेशन की सेवा करना समझ में आता है, संभावित रूप से कोई एनीमेशन भी नहीं:
कभी-कभी मोबाइल के लिए सबसे अच्छा रेस्पॉन्सिव एनिमेशन बिल्कुल भी एनिमेशन नहीं होता है! मोबाइल UX के लिए, प्राथमिकता दें कि उपयोगकर्ता जल्दी से सामग्री का उपभोग करें बनाम एनिमेशन के समाप्त होने की प्रतीक्षा करें। मोबाइल एनिमेशन में देरी करने के बजाय सामग्री, नेविगेशन और इंटरैक्शन को बढ़ाना चाहिए। एरिक वैन होल्ट्ज़
ऐसा करने के लिए, हम विशिष्ट व्यूपोर्ट आकारों को लक्षित करने के लिए मीडिया प्रश्नों का उपयोग कर सकते हैं जैसे हम सीएसएस के साथ स्टाइल करते समय करते हैं! यहां एक साधारण डेमो दिखाया गया है जिसमें मीडिया प्रश्नों का उपयोग करके सीएसएस एनीमेशन को संभाला जा रहा है और एक जीएसएपी एनीमेशन के साथ संभाला जा रहा है gsap.matchMedia():
इस डेमो की सादगी जादू का एक गुच्छा छुपा रही है! केवल एक विशिष्ट स्क्रीन आकार पर सही ढंग से काम करने के लिए जावास्क्रिप्ट एनिमेशन को थोड़ा अधिक सेटअप और क्लीन-अप की आवश्यकता होती है। मैंने अतीत में भयावहता देखी है जहां लोगों ने सीएसएस में एनीमेशन को देखने से छिपा दिया है opacity: 0, लेकिन एनीमेशन अभी भी संसाधनों का उपयोग करके पृष्ठभूमि में छिप रहा है। मैं
यदि स्क्रीन का आकार अब मेल नहीं खाता है, तो एनीमेशन को नष्ट करने और कचरा संग्रहण के लिए जारी करने की आवश्यकता है, और एनीमेशन से प्रभावित तत्वों को अन्य स्टाइल के साथ टकराव को रोकने के लिए किसी भी गति-प्रस्तुत इनलाइन शैलियों को साफ़ करने की आवश्यकता है। अब तक gsap.matchMedia(), यह एक काल्पनिक प्रक्रिया थी। हमें प्रत्येक एनीमेशन का ट्रैक रखना था और यह सब मैन्युअल रूप से प्रबंधित करना था।
gsap.matchMedia() इसके बजाय आप आसानी से अपने एनीमेशन कोड को एक फ़ंक्शन में टक कर सकते हैं जो केवल तब निष्पादित होता है जब कोई विशेष मीडिया क्वेरी मैच। फिर, जब यह मेल नहीं खाता, सभी जीएसएपी एनिमेशन और स्क्रॉल ट्रिगर उस फ़ंक्शन में स्वचालित रूप से वापस आ जाता है। मीडिया क्वेरी जिसमें एनिमेशन पॉप-अप किए गए हैं, आपके लिए पूरी मेहनत करता है। यह जीएसएपी 3.11.0 में है और यह गेम चेंजर है!
हम सिर्फ स्क्रीन साइज तक ही सीमित नहीं हैं। वहां एक मीडिया सुविधाओं का एक टन वहाँ से बाहर है जोड़ने के लिए!
(prefers-reduced-motion) /* find out if the user would prefer less animation */
(orientation: portrait) /* check the user's device orientation */
(max-resolution: 300dpi) /* check the pixel density of the device */निम्नलिखित डेमो में हमने इसके लिए एक चेक जोड़ा है prefers-reduced-motion ताकि कोई भी उपयोगकर्ता जो एनीमेशन को भटकाव में पाता है, उसे इधर-उधर होने वाली चीजों से परेशान नहीं होना पड़ेगा।
और टॉम मिलर का अन्य मजेदार डेमो देखें जहां वह एनीमेशन को समायोजित करने के लिए डिवाइस के पहलू अनुपात का उपयोग कर रहा है:
बॉक्स के बाहर सोच रहा है, स्क्रीन आकार से परे
केवल स्क्रीन आकार की तुलना में प्रतिक्रियाशील एनिमेशन के बारे में सोचने के लिए और भी बहुत कुछ है। अलग-अलग डिवाइस अलग-अलग इंटरैक्शन की अनुमति देते हैं, और जब आप उस पर विचार नहीं करते हैं तो थोड़ा उलझन में पड़ना आसान होता है। यदि आप CSS में होवर स्टेट्स बना रहे हैं, तो आप इसका उपयोग कर सकते हैं hover उपयोगकर्ता की जांच करने के लिए मीडिया सुविधा प्राथमिक इनपुट तंत्र तत्वों पर होवर कर सकता है।
@media (hover: hover) {
/* CSS hover state here */
}से कुछ सलाह जेक व्हाइटली:
बहुत बार हम अपने एनिमेशन को ब्राउज़र की चौड़ाई पर आधारित करते हैं, जिससे यह भोली धारणा बन जाती है कि डेस्कटॉप उपयोगकर्ता हॉवर स्टेट्स चाहते हैं। मेरे पास अतीत में व्यक्तिगत रूप से बहुत सारे मुद्दे थे जहां मैं डेस्कटॉप लेआउट> 1024 पीएक्स पर स्विच करूंगा, लेकिन जेएस में टच डिटेक्शन कर सकता हूं - जिससे एक बेमेल हो जाता है जहां लेआउट डेस्कटॉप के लिए था, लेकिन जेएस मोबाइल के लिए था। इन दिनों मैं समता सुनिश्चित करने के लिए होवर और पॉइंटर पर झुकता हूं और आईपैड पेशेवरों या विंडोज़ सतहों को संभालता हूं (जो कवर नीचे है या नहीं, इस पर निर्भर करता है कि पॉइंटर प्रकार बदल सकता है)
/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)फिर मैं अपने सीएसएस लेआउट प्रश्नों और अपने जावास्क्रिप्ट प्रश्नों से शादी करूंगा, इसलिए मैं इनपुट डिवाइस को प्राथमिक कारक के रूप में मान रहा हूं समर्थित चौड़ाई से, विपरीत के बजाय।
स्क्रॉल ट्रिगर युक्तियाँ
यदि आप जीएसएपी का उपयोग कर रहे हैं स्क्रॉल ट्रिगर प्लगइन, डिवाइस की स्पर्श क्षमताओं को आसानी से समझने के लिए एक छोटी सी उपयोगिता है जिससे आप जुड़ सकते हैं: ScrollTrigger.isTouch.
0- स्पर्श न करें (केवल पॉइंटर/माउस)1- स्पर्श केवल डिवाइस (फोन की तरह)2- डिवाइस स्वीकार कर सकता है स्पर्श इनपुट और माऊस पाइंटर (विंडोज टैबलेट की तरह)
if (ScrollTrigger.isTouch) {
// any touch-capable device...
}
// or get more specific:
if (ScrollTrigger.isTouch === 1) {
// touch-only device
}उत्तरदायी स्क्रॉल-ट्रिगर एनीमेशन के लिए एक और युक्ति…
नीचे दिया गया डेमो एक छवि गैलरी को क्षैतिज रूप से ले जा रहा है, लेकिन स्क्रीन आकार के आधार पर चौड़ाई बदलती है। यदि आप स्क्रब किए गए एनीमेशन के आधे रास्ते में स्क्रीन का आकार बदलते हैं, तो आप टूटे हुए एनिमेशन और पुराने मूल्यों के साथ समाप्त हो सकते हैं। यह एक सामान्य स्पीडबंप है, लेकिन एक जिसे आसानी से हल किया जा सकता है! स्क्रीन आकार पर निर्भर गणना को कार्यात्मक मान में पॉप करें और सेट करें invalidateOnRefresh:true. इस तरह, जब ब्राउज़र का आकार बदलता है, तो स्क्रॉलट्रिगर आपके लिए उस मान की फिर से गणना करेगा।
बोनस जीएसएपी बेवकूफ टिप!
जब आप स्क्रॉल करते हैं तो मोबाइल उपकरणों पर, ब्राउज़र पता बार आमतौर पर दिखाई देता है और छिप जाता है। यह एक आकार बदलने की घटना के रूप में गिना जाता है और बंद हो जाएगा a ScrollTrigger.refresh(). यह आदर्श नहीं हो सकता है क्योंकि यह आपके एनिमेशन में उछाल का कारण बन सकता है। जीएसएपी 3.10 जोड़ा गया ignoreMobileResize. यह प्रभावित नहीं करता कि ब्राउज़र बार कैसे व्यवहार करता है, लेकिन यह रोकता है ScrollTrigger.refresh() फायरिंग से केवल-स्पर्श करने वाले उपकरणों पर छोटे लंबवत आकार बदलते हैं।
ScrollTrigger.config({
ignoreMobileResize: true
});गति सिद्धांत
मैंने सोचा था कि वेब पर गति के साथ काम करते समय विचार करने के लिए मैं आपको कुछ सर्वोत्तम प्रथाओं के साथ छोड़ दूंगा।
दूरी और सहजता
एक छोटी लेकिन महत्वपूर्ण चीज जिसे उत्तरदायी एनिमेशन के साथ भूलना आसान है, वह है गति, गति और दूरी के बीच का संबंध! अच्छा एनिमेशन असली दुनिया की नकल करनी चाहिए विश्वसनीय महसूस करने के लिए, और वास्तविक दुनिया में अधिक दूरी तय करने में अधिक समय लगता है। दूरी पर ध्यान दें कि आपका एनीमेशन यात्रा कर रहा है, और सुनिश्चित करें कि उपयोग की जाने वाली अवधि और सहजता अन्य एनिमेशन के संदर्भ में समझ में आती है।
बढ़ी हुई गति दिखाने के लिए आप अक्सर यात्रा करने के लिए तत्वों के लिए अधिक नाटकीय सहजता भी लागू कर सकते हैं:
कुछ उपयोग मामलों के लिए स्क्रीन की चौड़ाई के आधार पर अवधि को अधिक गतिशील रूप से समायोजित करना सहायक हो सकता है। इस अगले डेमो में हम उपयोग कर रहे हैं gsap.utils मूल्य को जकड़ने के लिए हम वर्तमान से वापस प्राप्त करते हैं window.innerWidth एक उचित सीमा में, फिर हम उस संख्या को एक अवधि के लिए मैप कर रहे हैं।
रिक्ति और मात्रा
ध्यान में रखने वाली एक और बात विभिन्न स्क्रीन आकारों में तत्वों की दूरी और मात्रा है। का हवाला देते हुए स्टीवन शॉ:
यदि आपके पास किसी प्रकार का पर्यावरण एनीमेशन (लंबन, बादल, पेड़, कंफ़ेद्दी, सजावट, आदि) है जो खिड़की के चारों ओर फैला हुआ है, तो सुनिश्चित करें कि वे स्क्रीन आकार के आधार पर मात्रा को स्केल और/या समायोजित करते हैं। बड़ी स्क्रीन को संभवतः अधिक तत्वों की आवश्यकता होती है, जबकि छोटी स्क्रीन को समान प्रभाव के लिए केवल कुछ तत्वों की आवश्यकता होती है।
मुझे प्यार है ओपेर विश्निया एनीमेशन के बारे में एक मंच के रूप में सोचता है। तत्वों को जोड़ना और हटाना केवल एक औपचारिकता नहीं है, यह समग्र नृत्यकला का हिस्सा हो सकता है।
उत्तरदायी एनिमेशन डिजाइन करते समय, चुनौती यह नहीं है कि उसी सामग्री को व्यूपोर्ट में कैसे रटना है ताकि वह "फिट" हो जाए, बल्कि मौजूदा सामग्री के सेट को कैसे क्यूरेट किया जाए ताकि यह उसी इरादे को संप्रेषित कर सके। इसका मतलब है कि किस सामग्री को जोड़ना है, और किसको हटाना है, इसका एक सचेत विकल्प बनाना। आमतौर पर एनिमेशन की दुनिया में चीजें केवल फ्रेम के अंदर या बाहर नहीं आती हैं। तत्वों को "मंच" में प्रवेश करने या बाहर निकलने के बारे में सोचना समझ में आता है, उस संक्रमण को इस तरह से एनिमेट करना जो दृश्य और विषयगत समझ में आता है।
और यही बहुत है। यदि आपके पास और अधिक प्रतिक्रियाशील एनीमेशन युक्तियाँ हैं, तो उन्हें टिप्पणी अनुभाग में पॉप करें। अगर कुछ भी बहुत उपयोगी है, तो मैं उन्हें जानकारी के इस संग्रह में जोड़ दूंगा!
परिशिष्ट
से एक और नोट टॉम मिलर जैसा कि मैं इस लेख को तैयार कर रहा था:
मुझे आपके प्रतिक्रियाशील एनिमेशन लेख के लिए इस टिप के साथ शायद बहुत देर हो चुकी है, लेकिन मैं अत्यधिक अनुशंसा करता हूं कि "निर्माण से पहले सभी एनिमेशन को अंतिम रूप दें"। मैं वर्तमान में "मोबाइल संस्करण" के साथ कुछ साइट एनिमेशन को फिर से लगा रहा हूं। भगवान का शुक्र है
gsap.matchMedia... लेकिन मुझे यकीन है कि काश हमें पता होता कि शुरू से ही अलग मोबाइल लेआउट/एनिमेशन होंगे।
मुझे लगता है कि हम सभी इस बात की सराहना करते हैं कि "आगे की योजना बनाने" का यह टिप अंतिम समय पर आया। धन्यवाद, टॉम, और उन रेट्रोफिट्स के साथ शुभकामनाएँ।
