Animation एक graph है
- इसे डिज़ाइन करने के लिए यह reproducible और composable होना चाहिए।
- हर animation में किसी input (समय, scroll, mouse position आदि) के अनुसार value बदलती है, और इस बदलाव को graph के रूप में खींचा जा सकता है।
- graph का आकार ही movement का feel तय करता है, और इस curve को मनचाहे रूप में बनाने का tool गणित है।
गणितीय tools
- Bezier curve (easing): तय start और end के बीच acceleration और deceleration को व्यक्त करने का तरीका। दो control points curve को magnet की तरह खींचते हैं। यह linear interpolation के recursive application से बनता है। वही movement भी ease-in या ease-out के अनुसार पूरी तरह अलग impression दे सकता है।
- Exponential approach:
value += (target - value) * factor की एक पंक्ति से target को smoothly follow किया जा सकता है। target हर frame बदल जाए तब भी यह natural लगता है। cursor follow, counter, progress bar आदि में उपयोगी।
- Spring: restoring force और damping force, इन दो बलों पर आधारित damped oscillation। stiffness और damping, इन दो values से इसका feel तय होता है। easing के विपरीत इसमें duration नहीं होता, और target बदलने पर यह current velocity बनाए रखते हुए naturally transition करता है।
- Physics simulation: gravity, collision, friction जैसे physics rules को मिलाकर animation बनता है। मुख्य बात यह है कि "सिर्फ rules define कर दें, movement अपने आप बन जाता है"। confetti जैसे दर्जनों objects की अलग-अलग trajectories डिज़ाइन करने की ज़रूरत नहीं; gravity और air resistance सेट करना काफी है। हालांकि इसकी predictability कम होती है, इसलिए यह UI के मुख्य transitions की बजाय सहायक effects के लिए अधिक उपयुक्त है।
- atan2: दो points के बीच direction निकालने वाला function। इसका उपयोग तब होता है जब कोई element movement की दिशा में देखे, या card cursor की दिशा में झुके जैसे 3D tilt effect में।
- Trigonometric functions: periodic repetition के लिए सबसे उपयुक्त। कई elements में phase difference देने पर wave effect बनता है। typing indicator, floating background आदि में उपयोगी।
- Sawtooth wave:
sin की smooth आगे-पीछे की चाल के विपरीत, यह 0→1 तक बढ़कर तुरंत reset होने वाला one-way repetition है। pulse ring, ping, repeating progress आदि में उपयोगी।
जटिल animation डिज़ाइन करना
- Piecewise functions: complex curve को अलग-अलग segments में तोड़कर हर हिस्से को अलग डिज़ाइन करना, फिर उन्हें जोड़ना। इससे physics simulation की तुलना में अधिक सूक्ष्म और intentional adjustment संभव होता है (उदाहरण: bounce की height को जानबूझकर कम करना)।
- Dependencies समझना: animation design की शुरुआत इस सवाल से होती है कि "value किस पर depend करती है?"। इसे तीन प्रकारों में बाँटा जा सकता है: time-based (सबसे आम), value-based (scroll, mouse position), event-based (click, hover से trigger)।
- Pipelining: अलग-अलग हिस्सों को time axis पर क्रम से रखना। sequential, overlap, simultaneous, stagger जैसी placement strategies को मिलाया जा सकता है। हर हिस्से को स्वतंत्र रूप से बदला जा सकता है।
- State transition: समय के बजाय condition के आधार पर अगले चरण में जाना। आतिशबाज़ी के launch → explosion → spread → fade out की तरह, यदि transition conditions स्पष्ट हों तो इसे state machine से manage किया जा सकता है।
- Property separation: कई properties (size, color, opacity आदि) को अलग tracks में बाँटना। इससे हर track को दूसरों की जानकारी नहीं चाहिए, इसलिए fine-tuning या नए बदलाव जोड़ना आसान हो जाता है।
ध्यान देने योग्य बातें
- Randomness: पूरी तरह random नहीं, बल्कि controlled randomness का उपयोग होना चाहिए। असली मुद्दा यह तय करना है कि "कहाँ तक control रखना है और कहाँ से randomness को काम करने देना है"।
- Bidirectionality: अगर element के दिखाई देने के दौरान ही direction बदल जाए, तो उसे current state से ही उलटी दिशा में smoothly जारी रहना चाहिए, तभी jump या awkwardness नहीं होगी।
Code animation की सीमाएँ और ताकत
- character movement या बेहद refined morphing जैसी complex animations के लिए Lottie, Rive जैसे specialized tools या video अधिक उपयुक्त हैं।
- इसके विपरीत, code animation की सबसे बड़ी ताकत real-time interaction में है, जहाँ user input पर तुरंत प्रतिक्रिया देनी होती है।
अभी कोई टिप्पणी नहीं है.