अपने प्रोजेक्ट के लिए, पूरी तरह से कस्टम ऐनिमेशन बनाएं.
कभी-कभी आप सीएसएस में शामिल ईज़िंग कीवर्ड का इस्तेमाल नहीं करना चाहेंगे या फिर आप वेब ऐनिमेशन या JavaScript फ़्रेमवर्क का इस्तेमाल कर रहे होंगे. ऐसे मामलों में, आम तौर पर अपने कर्व (या समीकरण) को तय किया जा सकता है. साथ ही, इससे आपके प्रोजेक्ट के ऐनिमेशन के स्टाइल पर काफ़ी कंट्रोल मिलता है.
खास जानकारी
- कस्टम ईज़िंग की मदद से, अपने प्रोजेक्ट को ज़्यादा दिलचस्प बनाया जा सकता है.
- ऐसे क्यूबिक बेज़ियर कर्व बनाए जा सकते हैं जो डिफ़ॉल्ट ऐनिमेशन कर्व (आसान-आसान से बाहर निकलना, आसान-आसान से अंदर आना वगैरह) से मिलते-जुलते हों, लेकिन अलग-अलग जगहों पर ज़ोर दिए गए हों.
- जब आपको ऐनिमेशन के दिखने के समय और उसके व्यवहार पर ज़्यादा कंट्रोल चाहिए, तब JavaScript का इस्तेमाल करें. उदाहरण के लिए, इलास्टिक या बाउंस ऐनिमेशन.
सीएसएस की मदद से ऐनिमेशन करते समय, आपको दिखेगा कि समय बताने के लिए, क्यूबिक बेज़ियर कर्व को तय किया जा सकता है. असल में, ease, ease-in, ease-out, और linear कीवर्ड, पहले से तय किए गए बेज़ियर कर्व से मैप होते हैं. इनकी जानकारी सीएसएस ट्रांज़िशन स्पेसिफ़िकेशन और वेब ऐनिमेशन स्पेसिफ़िकेशन में दी गई है.
बेज़ियर कर्व में चार मान या संख्याओं के दो जोड़े होते हैं, जिनमें से हर जोड़ा एक घन बेज़ियर कर्व के नियंत्रण बिंदुओं के X और Y निर्देशांक बताता है. बेज़ियर कर्व के शुरुआती बिंदु में निर्देशांक (0, 0) होते हैं और आखिरी बिंदु में निर्देशांक (1, 1) होते हैं. आप दो नियंत्रण बिंदुओं के X और Y मान सेट कर सकते हैं. दो कंट्रोल पॉइंट के लिए X वैल्यू 0 और 1 के बीच होनी चाहिए. साथ ही, हर कंट्रोल पॉइंट की Y वैल्यू, [0, 1] की सीमा से ज़्यादा हो सकती है. हालांकि, खास जानकारी में यह साफ़ नहीं है कि यह कितना होगा.
हर कंट्रोल पॉइंट की X और Y वैल्यू बदलने से, आपको काफ़ी अलग कर्व मिलता है. इसलिए, आपके ऐनिमेशन का फ़ील भी काफ़ी अलग होता है. उदाहरण के लिए, अगर पहला कंट्रोल पॉइंट नीचे दाएं हिस्से में है, तो ऐनिमेशन शुरू होने में ज़्यादा समय लगेगा. अगर यह सबसे ऊपर बाईं ओर है, तो यह जल्दी शुरू हो जाएगा. इसके उलट, अगर दूसरा कंट्रोल पॉइंट ग्रिड के सबसे नीचे दाईं ओर है, तो आखिर में कंट्रोल पॉइंट तेज़ चलेगा. अगर यह सबसे ऊपर बाईं ओर है, तो खत्म होने में समय लगेगा.
तुलना के लिए, यहां दो कर्व दिए गए हैं: सामान्य ईज़-इन-आउट कर्व और कस्टम कर्व:
कस्टम ईज़िंग वाला ऐनिमेशन देखना
कस्टम कर्व का सीएसएस है:
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
पहले दो नंबर, पहले कंट्रोल पॉइंट के X और Y निर्देशांक होते हैं. वहीं, दूसरे दो नंबर, दूसरे कंट्रोल पॉइंट के X और Y निर्देशांक होते हैं.
कस्टम कर्व बनाना बहुत मज़ेदार काम है. इसकी मदद से, आपको ऐनिमेशन का एहसास बेहतर बनाने का मौका मिलता है. उदाहरण के लिए, ऊपर दिए गए कर्व से पता चलता है कि यह कर्व, आसानी से शुरू होने और खत्म होने वाले कर्व जैसा है. हालांकि, इसमें आसानी से शुरू होने या "शुरू करना" वाला हिस्सा छोटा है और आखिर में धीमा होने वाला हिस्सा लंबा है.
इस ऐनिमेशन कर्व टूल के साथ एक्सपेरिमेंट करें और देखें कि कर्व से ऐनिमेशन पर क्या असर पड़ता है.
ज़्यादा कंट्रोल के लिए JavaScript फ़्रेमवर्क का इस्तेमाल करना
कभी-कभी आपको एक क्यूबिक बेज़ियर कर्व से भी ज़्यादा कंट्रोल की ज़रूरत होती है. अगर आपको इलास्टिक बाउंस का एहसास चाहिए, तो आपको JavaScript फ़्रेमवर्क का इस्तेमाल करना चाहिए, क्योंकि सीएसएस या वेब ऐनिमेशन की मदद से ऐसा करना मुश्किल होता है.
TweenMax
GreenSock’s TweenMax एक बेहतरीन फ़्रेमवर्क है. अगर आपको चीज़ों को बहुत हल्का रखना है, तो TweenLite का इस्तेमाल करें. इसकी वजह यह है कि आपको एक छोटी JavaScript लाइब्रेरी में बहुत ज़्यादा कंट्रोल मिलता है. साथ ही, यह एक बेहतरीन कोडबेस है.
TweenMax का इस्तेमाल करने के लिए, अपने पेज में यह स्क्रिप्ट शामिल करें:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
स्क्रिप्ट लागू होने के बाद, अपने एलिमेंट के लिए TweenMax को कॉल किया जा सकता है. साथ ही, उसे यह बताया जा सकता है कि आपको कौनसी प्रॉपर्टी चाहिए और आपको किस तरह की ईज़िंग चाहिए. आप ईज़िंग के कई विकल्प इस्तेमाल कर सकते हैं; यहां दिए गए कोड में इलास्टिक ईज़-आउट का इस्तेमाल किया गया है:
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
TweenMax दस्तावेज़ में, आपके पास मौजूद सभी विकल्पों के बारे में बताया गया है. इसलिए, इसे पढ़ना ज़रूरी है.