स्प्रिंग एनिमेशन: प्राकृतिक यूआई मोशन का भौतिकी
जानें कि यूआई डिज़ाइन में स्प्रिंग एनीमेशन कैसे काम करता है। कठोरता, अवमंदन, द्रव्यमान और वेग को समझें। React और SwiftUI के लिए प्राकृतिक भौतिकी-आधारित एनिमेशन बनाएं।
कोर टेकअवे
स्प्रिंग एनीमेशन मास-स्प्रिंग-डैम्पर सिस्टम के भौतिक व्यवहार का उपयोग करके यूआई गति को मॉडल करता है, जहां एक घटक की गति कठोरता (यह कितनी मजबूती से आराम की ओर खींचती है), डंपिंग (कितनी जल्दी यह ऊर्जा खो देती है), और द्रव्यमान (यह कितनी जड़ता वहन करती है) द्वारा नियंत्रित होती है। अवधि-आधारित एनिमेशन के विपरीत, स्प्रिंग्स स्वचालित रूप से उपयोगकर्ता के वेग पर प्रतिक्रिया करते हैं और दृश्य असंतोष पैदा किए बिना किसी भी बिंदु पर बाधित हो सकते हैं।
स्प्रिंग्स अवधि वक्रों की तुलना में अधिक प्राकृतिक क्यों लगते हैं?
भौतिक दुनिया में "ईज़-इन-आउट" या "क्यूबिक-बेज़ियर(0.4, 0, 0.2, 1)" जैसी अवधारणाएँ नहीं हैं। भौतिक वस्तुएँ बल के कारण त्वरित होती हैं और घर्षण के कारण धीमी होती हैं। जब कोई दराज खुलती है, तो उसमें गति होती है; जब आप इसे छोड़ते हैं, तो घर्षण इसे आराम की स्थिति में ले आता है। स्प्रिंग भौतिकी सॉफ्टवेयर में इस भौतिक वास्तविकता को दोहराती है, यही कारण है कि iOS UIKit, Android Motion Compose, और ExodeUI सभी स्प्रिंग-फर्स्ट एनीमेशन सिस्टम हैं।
स्प्रिंग पैरामीटर्स की व्याख्या
प्रत्येक पैरामीटर को समझने से आप बिल्कुल वही भौतिक अनुभव डिज़ाइन कर सकते हैं जो आप चाहते हैं।
कठोरता (तनाव)
झरना अपने विश्राम मूल्य की ओर कितनी तीव्रता से खींचता है। उच्च कठोरता (600+) बटन प्रेस फीडबैक की तरह तेज़, प्रतिक्रियाशील यूआई बनाती है। कम कठोरता (100-200) पृष्ठ परिवर्तन या परिवेशी फ़्लोटिंग तत्वों के लिए उपयुक्त धीमी, फ्लोटी गति बनाती है।
अवमंदन (घर्षण)
स्प्रिंग प्रति चक्र कितनी ऊर्जा खोता है। क्रिटिकल डैम्पिंग पर, स्प्रिंग बिना दोलन के आराम पर पहुँच जाता है। अंडरडैम्प्ड स्प्रिंग्स (कम घर्षण) ओवरशूट करेंगे और उछलेंगे। अवमंदन अनुपात / (2 × sqrt (कठोरता × द्रव्यमान)) यह निर्धारित करता है कि आप कम नमी वाले, गंभीर रूप से नमी वाले, या अति नमी वाले हैं।
द्रव्यमान
एनिमेटेड तत्व कितनी जड़ता रखता है. अधिक द्रव्यमान एनीमेशन को भारी बनाता है और दिशा बदलने में अधिक समय लेता है। अधिकांश यूआई एनिमेशन 1.0 पर द्रव्यमान रखते हैं और कठोरता और नमी के माध्यम से नियंत्रण महसूस करते हैं।
प्रारंभिक वेग
यदि उपयोगकर्ता किसी तत्व को स्वाइप या फ़्लिंग करता है, तो स्प्रिंग को उस जेस्चर वेग के साथ प्रारंभ किया जा सकता है, जिससे जेस्चर और स्प्रिंग सेटलमेंट के बीच निर्बाध निरंतरता बनती है।
यूआई घटकों के लिए व्यावहारिक स्प्रिंग प्रीसेट
ये प्रीसेट सबसे आम यूआई इंटरैक्शन पैटर्न को कवर करते हैं।
- बटन टैप: कठोरता 500, अवमंदन 30 - तत्काल, तेज़, न्यूनतम उछाल
- कार्ड का विस्तार: कठोरता 280, अवमंदन 24, द्रव्यमान 1.2 - चिकना, भारित विस्तार
- दराज/शीट: कठोरता 340, भिगोना 28 - निर्णायक, थोड़ा जमने के साथ
- उछालभरी अधिसूचना: कठोरता 400, भिगोना 18 - चंचल ओवरशूट
- पृष्ठ संक्रमण: कठोरता 220, अवमंदन 22, द्रव्यमान 1.4 - सिनेमाई, भारित
उत्पादन कार्यान्वयन स्निपेट
// Spring presets in React with the Motion library (motion.dev).
// The same stiffness / damping / mass values can be saved as motion tokens.
import { motion } from 'motion/react';
const springs = {
snappy: { type: 'spring', stiffness: 500, damping: 30, mass: 1 },
smooth: { type: 'spring', stiffness: 280, damping: 24, mass: 1.2 },
bouncy: { type: 'spring', stiffness: 400, damping: 18, mass: 1 },
cinematic: { type: 'spring', stiffness: 220, damping: 22, mass: 1.4 },
};
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ y: open ? 0 : 24, scale: open ? 1 : 0.96 }}
transition={springs.smooth}
>
Smooth physics-based card reveal
</motion.div>
);
}