ऑफ़ रोड पर जाएं और अपने प्रोजेक्ट के लिए पसंद के मुताबिक ऐनिमेशन बनाएं.
कभी-कभी आप सीएसएस में शामिल ईज़िंग कीवर्ड का इस्तेमाल नहीं करना चाहेंगे या आप वेब ऐनिमेशन या 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 का 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 के दस्तावेज़ में आपको यहां मौजूद सभी विकल्पों के बारे में जानकारी मिलती है. इसलिए, इसे पढ़ना ज़रूरी है.