मेरी सबसे पसंदीदा animation तकनीक: exponential smoothing (2023)

exponential smoothing का उपयोग करने वाली animation ट्रिक

• animation से जुड़े काम शुरू करने के बाद से मैं लगभग हमेशा एक सरल animation तकनीक का उपयोग करता आया हूँ.
• इस तकनीक का उपयोग camera rotation और movement, turn-based games में character movement, UI elements की movement, audio libraries में volume changes को smooth करने जैसी कई जगहों पर होता है.
• यह तकनीक नई नहीं है, और हो सकता है आपने इसके बारे में पहले सुना हो या इसे इस्तेमाल भी किया हो, लेकिन मैं कुछ उदाहरणों और इसके mathematical principle को समझाने वाला हूँ.

toggle button

• मान लें कि आप एक UI component बना रहे हैं, जैसे कि एक toggle button.
• toggle button में switch की position state के अनुसार calculate होती है: अगर वह on है तो max_x, और off है तो min_x.
• यह तरीका ठीक से काम करता है, लेकिन animation के बिना यह थोड़ा बेजान लगता है.
• animation सिर्फ visual polish नहीं जोड़ती, बल्कि यह user को यह समझने में भी मदद करती है कि क्या हो रहा है.
• toggle indicator को तुरंत नई position पर ले जाने के बजाय, इसे smoothly move करने के लिए बदला जाता है.
• अब animation को update करना पड़ता है, और इसकी कमी यह है कि यह constant speed से move करता हुआ दिखता है.
• यहाँ easing function जोड़ा जा सकता है, जैसे 3t^2-2t^3 या sqrt(t).
• इन easing functions के बीच का फर्क animation को धीरे चलाने पर ज़्यादा साफ़ दिखाई देता है.
• अब switch position को update करने के बजाय animation state को track करना पड़ता है.
• sqrt का उपयोग करते समय animation की direction के अनुसार अलग easing function को explicitly इस्तेमाल करना पड़ता है.
• कौन सा सबसे अच्छा दिखता है, यह पसंद की बात है, लेकिन sqrt सबसे अच्छा लगता है. यह switch को बहुत तेज़ी से शुरू कराता है, लेकिन destination के पास पहुँचते-पहुँचते अच्छी तरह धीमा हो जाता है.
• इस version की कमी यह है कि सबसे simple case में भी काफ़ी management चाहिए, और अगर user animation के बीच में click कर दे तो अचानक उछलने जैसी discontinuity आती है.

camera movement

• मान लें कि एक map और camera आसपास scroll या move कर रहे हैं.
• यहाँ भी animation जोड़ना अच्छा रहेगा.
• constant speed से interpolate करने वाला code दिया गया है.
• animation पूरा होने के बाद जो jitter होता है, उसका कारण यह है कि target.x - position.x positive और negative के बीच बारी-बारी से बदलता रहता है.
• sign(delta) की जगह delta को clamp करने वाला function चाहिए.
• इतनी simple चीज़ के लिए यह तरीका काफ़ी complex है.
• जब animation speed, animation completion से तेज़ होती है, तब यह अजीब दिखता है.
• animation active रहने के दौरान user input को ignore भी किया जा सकता है, लेकिन यह user के लिए बहुत irritating अनुभव देता है.
• सही समाधान, बेशक, exponential smoothing है.
• toggle button वाले उदाहरण की तुलना में code लगभग बदलता ही नहीं है.

अंदरूनी सिद्धांत

• 1 - exp(- speed * dt) क्या है और यह कैसे काम करता है, यह समझाया गया है.
• एक simple version से शुरू करते हैं, जहाँ current position और नई position target के बीच की दूरी के अनुपात में speed बनाई जाती है, जिससे movement तेज़ होती है.
• इस तरीके में current position और target position के अलावा कोई extra state रखने की ज़रूरत नहीं होती, और अगर target अचानक बदल जाए तो यह अपने-आप adjust हो जाता है.
• लेकिन एक छोटी समस्या है. अगर speed * dt 1 से बड़ा हो जाए, तो position target से आगे निकल जाती है.
• इसे ठीक करने के लिए value को 1 तक clamp किया जा सकता है.
• speed * dt बहुत बड़ा होने का कारण या तो speed का बहुत बड़ा होना है, या dt का बहुत बड़ा होना.
• animation के लिए, अच्छा होगा कि dt apply करने पर सब कुछ पूरी तरह सही ढंग से काम करे.

differential equation (ओह, नहीं)

• समस्या को हल करने के लिए दो-स्टेप approach पेश की गई है.
• position += (target - position) * speed * dt छोटे dt के लिए काम करता है, लेकिन बड़े dt पर fail हो जाता है; यह differential equation के numerical solution की एक typical समस्या है.
• यह देखा गया है कि यह equation वास्तव में क्या solve कर रही है.
• समझाया गया है कि position += (target - position) * (1 - exp(- speed * dt)) सभी dt के लिए सही formula है.

speed चुनना

• animation के बारे में आमतौर पर duration के रूप में सोचा जाता है.
• exponential formula का उपयोग करने पर animation तकनीकी रूप से अनंत समय तक चलकर पूरी होती है.
• speed parameter का मतलब यह है कि 1 / speed वह समय है जिसमें position, target के e = 2.71828... गुना ज़्यादा करीब पहुँच जाती है.

exponential smoothing

• अगर आप "exponential smoothing" खोजते हैं, तो आपको एक wiki article मिल सकता है जो पूरी तरह unrelated लगता है, लेकिन वास्तव में उसमें इस पोस्ट में चर्चा किए गए फ़ॉर्मूले से बहुत मिलता-जुलता formula है.
• अगर मान लें कि dt हमेशा समान है और target हर iteration में बदलता है, तो values को iteration number से index करके position[i] = (target[i] - position[i - 1]) * factor जैसी कोई चीज़ calculate की जाती है.

आख़िरी पैराग्राफ़ का शीर्षक

• इस पोस्ट का विचार मेरे पास कई महीनों से था, और अब आखिरकार इसे पूरा कर पाने की खुशी है.
• devlog देखने और पढ़ने के लिए धन्यवाद.

GN⁺ की राय

• यह लेख exponential smoothing तकनीक के बारे में बताता है, जिसका उपयोग animations को smooth और natural बनाने में किया जाता है. यह technique user experience को बेहतर बनाने और interface की intuitiveness बढ़ाने में मदद करती है.
• exponential smoothing physical movement को simulate करने में भी उपयोगी हो सकती है. उदाहरण के लिए, game development में character movement या camera movement को अधिक natural बनाने के लिए इसका उपयोग किया जा सकता है.
• यह technique खासतौर पर तब बहुत प्रभावी होती है जब user interface के elements state changes से गुज़रते हैं, और उन बदलावों को visually दिखाना होता है. उदाहरण के लिए, slider या switch की movement को ज़्यादा smooth तरीके से दिखाया जा सकता है.
• आलोचनात्मक नज़र से देखें तो exponential smoothing के साथ animation की speed और duration को बहुत सटीक रूप से control करना कठिन हो सकता है. जब designer किसी खास animation effect को precision के साथ tune करना चाहता है, तब यह एक limitation बन सकता है.
• इसी तरह की functionality देने वाली दूसरी animation libraries या frameworks में GreenSock Animation Platform(GSAP) और anime.js शामिल हैं, जो अलग-अलग easing functions के साथ ज़्यादा fine-grained animation control देते हैं.
• exponential smoothing technique अपनाते समय animation की naturalness और control की precision के बीच संतुलन ढूँढ़ना चाहिए. इस technique का मुख्य फायदा बेहतर user experience है, जबकि इसकी कमी यह है कि animation के precise timing को adjust करना कठिन हो सकता है.

[GN⁺]

Hacker News राय

• पहले कमेंट का सार:

  • यह ज़ोर देता है कि यह तरीका सिर्फ एक साधारण easing curve या smoothstep() फ़ंक्शन नहीं है, बल्कि अलग-अलग inputs को लगातार एक जैसा संभालने वाला stateless तरीका है.
  • अगर आपने CSS transitions का इस्तेमाल किया है, तो आप समझ सकते हैं कि यह तकनीक किस समस्या को हल करती है.
  • exponential smoothing में लक्ष्य के पास पहुँचने लेकिन कभी पूरी तरह न पहुँचने की समस्या होती है.
  • inertial scrolling जैसी चीज़ में मिलते-जुलते तरीके का उपयोग करते समय, एक (नकली) friction term जोड़ना उपयोगी रहा था.

• दूसरे कमेंट का सार:

  • एक game developer के रूप में, ज़्यादातर UI स्थितियों में पहले से तय duration वाले eased tweens को प्राथमिकता दी जाती है.
  • लेकिन जब बिना साफ़ शुरुआत/अंत बिंदु वाली लगातार और अप्रत्याशित movement को smooth करना हो, तब यह तकनीक बहुत उपयोगी होती है.
  • exponential lerp उपयोगी है, लेकिन व्यापक रूप से जाना नहीं जाता, और कुछ games कम सटीक linear interpolation का इस्तेमाल करके animation समस्याओं का सामना करते हैं.
  • इन्हीं कारणों से लेख के लिए धन्यवाद दिया गया, क्योंकि इस तरह के विशेष ज्ञान तक पहुँचना अक्सर मुश्किल होता है.

• तीसरे कमेंट का सार:

  • लेखक के इस दावे से असहमति जताई गई कि toggle switch के लिए sqrt cubic से बेहतर है.
  • असली toggle switch के काम करने के तरीके को देखते हुए, cubic फ़ंक्शन को अधिक उपयुक्त बताया गया.
  • इसे ऐसा लेख माना गया जो अच्छी तरह दिखाता है कि animation कैसे user experience को बेहतर बना सकता है.

• चौथे कमेंट का सार:

  • ऑनलाइन interactions में आनंद जोड़ने वाली सरल nonlinear tricks की सराहना की गई.
  • यह भी कहा गया कि इनका रंग की perception में महत्वपूर्ण योगदान होता है, और लोग acceleration को हमेशा सहज रूप से नहीं समझते.

• पाँचवें कमेंट का सार:

  • लेख पसंद आया, और बताया गया कि लगभग 10 साल पहले इसी तकनीक को lazy-easy नाम से लिखा गया था.
  • state management के बिना smooth animation चाहिए हो, तब भी यह तकनीक अब तक उपयोग में लाई जाती है.

• छठे कमेंट का सार:

  • कहा गया कि easing पर लेख हर पीढ़ी को जैसे फिर से खोजने पड़ते हैं.
  • 90 के दशक के आख़िर में Yugo Nakamura की experimental websites को याद किया गया, जिन्होंने easing का खुलकर उपयोग करके organic एहसास दिया था.

• सातवें कमेंट का सार:

  • ऐसे toggle का विचार रखा गया जो touch/click दबाए रखने पर धीरे-धीरे चले, और छोड़ते ही बाकी हिस्सा तेज़ी से snap हो जाए.
  • UX के लिहाज़ से इसका क्या मतलब होगा, इस पर पूरी निश्चितता नहीं थी, लेकिन यह इस बात का संकेत हो सकता है कि setting कब apply या save होती है.

• आठवें कमेंट का सार:

  • इस तकनीक को सिर्फ switches ही नहीं बल्कि कई तरह के उपयोगों के लिए भी उपयोगी बताया गया.
  • Flickity से जुड़े demo का ज़िक्र करते हुए कहा गया कि इसमें production-ready चरण के लिए ज़रूरी कई optimizations शामिल नहीं थे.
  • कमेंट में लोगों की आलोचना की गई कि वे लेख को ठीक से नहीं पढ़ रहे थे, या महत्वपूर्ण बातें चूक रहे थे.

• नौवें कमेंट का सार:

  • लेख की सकारात्मक सराहना की गई, लेकिन यह भी कहा गया कि demo Chrome में ठीक काम करता है जबकि Firefox में पेज फ्रीज़ हो जाता है.

• दसवें कमेंट का सार:

  • छोटे animations को emotional design का सर्वोत्तम रूप बताया गया, जो अपने भीतर बहुत कुछ कह देते हैं.