मोशन यूआई के साथ एनिमेशन और बदलाव कैसे बनाएं

एनिमेशन और बदलाव डिजाइनरों को परिवर्तन की कल्पना करने और सामग्री को अलग करने की अनुमति देते हैं। एनिमेशन और संक्रमण प्रभाव बढ़ रहे हैं कुछ बदलने पर उपयोगकर्ताओं को पहचानने में मदद करें साइट पर, उदाहरण के लिए वे एक बटन पर क्लिक करते हैं और स्क्रीन पर जानकारी का एक नया टुकड़ा दिखाई देता है। ऐप और वेबसाइटों के लिए आंदोलन को जोड़ने से उपयोगकर्ता अनुभव में सुधार होता है, क्योंकि यह उपयोगकर्ताओं को अनुमति देता है अधिक सहज तरीके से सामग्री की समझ बनाएं.

हम या तो स्क्रैच से या पुस्तकालयों या चौखटे का उपयोग करके एनिमेशन और बदलाव बना सकते हैं। हमारे लिए अच्छी खबर है, लोगों को आगे बढ़ाने के लिए, Zurb, फाउंडेशन के निर्माता, पिछले अक्टूबर खुली खट्टा मोशन यूआई, अपने एनीमेशन और सास के आधार पर संक्रमण पुस्तकालय.

यह मूल रूप से फाउंडेशन फॉर एप्स के साथ बंडल किया गया था, और अब, स्टैंडअलोन रिलीज के लिए इसे एक सुधार मिला, जिसमें ए भी शामिल है एनीमेशन कतार प्रणाली तथा लचीला सीएसएस पैटर्न. मोशन UI, फाउंडेशन फ्रेमवर्क के कुछ घटकों को भी अधिकार देता है, जैसे ऑर्बिट स्लाइडर, टॉगलर स्विचर और रिवाइल मोडल, इसलिए यह एक बहुत मजबूत उपकरण है.

शुरू करना

हालांकि Motion UI एक Sass लाइब्रेरी है, लेकिन आपको आवश्यक रूप से Sass के साथ इसका उपयोग करने की आवश्यकता नहीं है, क्योंकि Zurb डेवलपर्स को एक आसान स्टार्टर किट प्रदान करता है जिसमें केवल संकलित CSS होता है। आप इसे मोशन यूआई के होम पेज से डाउनलोड कर सकते हैं, और पूर्वनिर्धारित सीएसएस एनीमेशन और ट्रांस्फ़ॉर्म कक्षाओं का उपयोग करके जल्दी से प्रोटोटाइप शुरू कर सकते हैं.

स्टार्टर किट में केवल Motion UI नहीं है, लेकिन साथ ही साथ फाउंडेशन फ्रेमवर्क है, जिसका अर्थ है कि यदि आप चाहें तो आप फाउंडेशन ग्रिड और फाउंडेशन की अन्य सभी फंक्शन्स का उपयोग कर सकते हैं।.

स्टार्टर किट भी एक के साथ भेज दिया है index.html ऐसी फ़ाइल जो आपको फ्रेमवर्क का त्वरित परीक्षण करने की अनुमति देती है.

यदि आपको अधिक परिष्कृत समायोजन की आवश्यकता है और मोशन यूआई के शक्तिशाली सैस मिश्रणों का लाभ उठाना चाहते हैं, तो आप स्रोत वाले पूर्ण संस्करण को स्थापित कर सकते हैं .एससीएसएस एनपीएम या बोवर वाली फाइलें.

मोशन यूआई के प्रलेखन अभी भी आधे-बेक्ड हैं। आप इसे जीथब पर यहां पा सकते हैं, या यदि आप चाहें तो इसमें योगदान कर सकते हैं.

त्वरित प्रोटोटाइप

प्रोटोटाइप शुरू करने के लिए, आप संपादित कर सकते हैं index.html स्टार्टर किट की फ़ाइल, या अपनी स्वयं की HTML फ़ाइल बनाएँ। आप फाउंडेशन ग्रिड का उपयोग करके लेआउट का निर्माण कर सकते हैं, लेकिन मोशन यूआई को फाउंडेशन फ्रेमवर्क के बिना एक स्टैंडअलोन लाइब्रेरी के रूप में भी इस्तेमाल किया जा सकता है.

मोशन यूआई में पूर्वनिर्धारित सीएसएस कक्षाओं के 3 मुख्य प्रकार हैं:

1. संक्रमण वर्ग - HTML तत्व में स्लाइडिंग, फ़ेडिंग और हिंगिंग प्रभाव जैसे संक्रमण जोड़ना संभव बनाता है.
2. एनिमेशन क्लासेस - आप अलग-अलग झटकों, आकर्षक और कताई प्रभाव का उपयोग करने में सक्षम हैं
3. संशोधक कक्षाएं - संक्रमण और एनीमेशन दोनों वर्गों के साथ मिलकर काम करती हैं, और वे आपको गति, समय और अपने आंदोलन की देरी को समायोजित करने देती हैं.

HTML का निर्माण

पूर्वनिर्धारित सीएसएस कक्षाओं के बारे में महान बात यह है कि उनका उपयोग केवल कक्षाओं के रूप में ही नहीं बल्कि अन्य HTML विशेषताओं के रूप में भी किया जा सकता है। उदाहरण के लिए आप कर सकते हैं उन्हें जोड़ें मूल्य की विशेषता टैग, या आप कर सकते हो उन्हें अपने रिवाज में इस्तेमाल करें डेटा-* गुण भी.

नीचे दिए गए कोड स्निपेट में मैंने इस बाद वाले विकल्प को चुना अलग व्यवहार और संशोधक वर्ग. मैंने इस्तेमाल किया धीमा तथा आराम संशोधक वर्गों के रूप में विशेषताएँ, और एक रिवाज बनाया डेटा-एनीमेशन के लिए विशेषता स्केल-में-अप संक्रमण। मुझे क्लिक करें बटन प्रभाव को ट्रिगर करने के लिए है.

 
 मुझे क्लिक करें  

JQuery के साथ एनिमेशन और बदलाव खेलना

मोशन यूआई में एक छोटा जावास्क्रिप्ट पुस्तकालय भी शामिल है जो एक निश्चित घटना होने पर संक्रमण और एनिमेशन खेल सकता है.

पुस्तकालय स्वयं स्टार्टर किट में पाया जा सकता है गति- ui- स्टार्टर> जेएस> विक्रेता> गति- ui.js पथ.

यह एक बनाता है MotionUI ऑब्जेक्ट जिसमें दो विधियाँ हैं: animateIn () तथा animateOut (). संक्रमण या एनीमेशन विशेष रूप से HTML तत्व (a) से बंधा है हमारे उदाहरण में टैग) को निम्न तरीके से jQuery के साथ चालू किया जा सकता है:

 $ (फ़ंक्शन () $ ("बटन")। क्लिक करें (फ़ंक्शन () var $ एनीमेशन = $ ("बूम")। डेटा ("एनीमेशन"); MotionUI.animateIn ($ ("# बूम") , $ एनीमेशन);););

ऊपर कोड स्निपेट में, हमने एक्सेस किया डेटा-एनीमेशन jQuery के अंतर्निहित का उपयोग करके विशेषता डेटा() विधि, तो कहा जाता है animateIn () की विधि MotionUI वस्तु.

यहाँ पूर्ण कोड और परिणाम है। मैंने फाउंडेशन फ्रेमवर्क के बिल्ट-इन बटन कक्षाओं का उपयोग किया मुझे क्लिक करें बटन, और साथ ही कुछ बुनियादी सीएसएस जोड़ा.

जैसा कि मोशन यूआई काफी लचीला है, आप कई अन्य तरीकों से भी बदलाव और एनिमेशन जोड़ और ट्रिगर कर सकते हैं.

ऊपर के उदाहरण में उदाहरण के लिए हमें आवश्यक रूप से उपयोग करने की आवश्यकता नहीं है डेटा-एनीमेशन कस्टम विशेषता, लेकिन बस के साथ व्यवहार वर्ग जोड़ सकते हैं addClass () करने के लिए jQuery विधि निम्नलिखित तरीके से तत्व:

 $ ( '# बूम') addClass ( 'पैमाने में ऊपर')।

सास के साथ अनुकूलन

मोशन यूआई के पूर्व-निर्मित सीएसएस कक्षाएं डिफ़ॉल्ट मानों का उपयोग करती हैं जिन्हें सास की मदद से आसानी से अनुकूलित किया जा सकता है। प्रत्येक संक्रमण और एनीमेशन के पीछे एक सास मिक्सिन है, जो प्रभाव की सेटिंग्स को बदलना संभव बनाता है। इस तरह आप आसानी से एक पूरी तरह से कस्टम एनीमेशन या संक्रमण बना सकते हैं.

अनुकूलन स्टार्टर किट के साथ काम नहीं करेगा, हालांकि, यदि आप अपनी आवश्यकताओं के अनुसार प्रभाव कॉन्फ़िगर करना चाहते हैं, तो आपको सैस संस्करण स्थापित करना होगा.

एक संक्रमण या एनीमेशन को अनुकूलित करने के लिए, सबसे पहले आपको जरूरत है संबंधित मिक्सिन खोजें. _classes.scss फ़ाइल में संबंधित मिश्रण के साथ संकलित सीएसएस कक्षाओं के नाम हैं.

हमारे उदाहरण में हमने इस्तेमाल किया .स्केल-में-अप विशेषता, और एक नज़र डालकर _classes.scss, हम जल्दी से पता लगा सकते हैं कि यह उपयोग करता है मुई-जूम mixin:

 // बदलाव @mixin गति- ui- बदलाव … // स्केल .scale-in-up @include मुई-ज़ूम (में, 0.5, 1); 

Motion UI का उपयोग करता है मुई- मिश्रणों के लिए उपसर्ग, और प्रत्येक मिश्रण की अपनी फ़ाइल होती है। मोशन यूआई में बहुत आत्म-व्याख्यात्मक नामकरण परंपराएं हैं, इसलिए हम जल्दी से खोज सकते हैं मुई-जूम में मिश्रण _zoom.scss फ़ाइल:

 @ मिक्सिन मुई-ज़ूम ($ स्थिति: $, से: 1.5, $ से: 1, $ फीका: नक्शा-प्राप्त ($ गति-यूआई-सेटिंग्स, स्केल-एंड-फेड), $ अवधि: अशक्त, $ समय: अशक्त, $ देरी: अशक्त) …

उसी तकनीक का उपयोग करके आप संबंधित सास चर के मूल्यों को बदलकर एनीमेशन या संक्रमण की हर सुविधा को आसानी से नियंत्रित कर सकते हैं.

संशोधक कक्षाएं कॉन्फ़िगर करना

संशोधन और बदलाव के व्यवहार (गति, समय, और देरी) को नियंत्रित करने वाले संशोधक वर्ग भी संबंधित चर के मूल्यों को संशोधित करके सैस के साथ विन्यास योग्य हैं। _settings.scss फ़ाइल.

आपके बदलाव करने के बाद, मोशन यूआई करेगा नए मानों को डिफ़ॉल्ट के रूप में उपयोग करें हर एनीमेशन और संक्रमण में, इसलिए आपको संबंधित मिश्रण को एक-एक करके कॉन्फ़िगर नहीं करना पड़ेगा.