Mo.JS . के साथ सुंदर कोडित वेब एनिमेशन कैसे बनाएं

यदि आप देख रहे हैं अपनी खुद की वेबसाइट शुरू करें , सुंदर दिखने वाले एनिमेशन इसे चमकदार बना सकते हैं। इसे हासिल करने के कई तरीके हैं, बस एनिमेटेड GIF बनाना मौजूदा फिल्म के एक टुकड़े से, जैसे सॉफ्टवेयर के साथ खरोंच से अपना खुद का बनाना सीखने के लिए ब्लेंडर या माया .

प्रोग्रामेटिक रूप से एनिमेशन बनाने के लिए पुस्तकालय भी उपलब्ध हैं। ऐतिहासिक रूप से, वेब कोडर्स ने सरल एनिमेशन बनाने के लिए jQuery का उपयोग किया, लेकिन जैसे-जैसे वेब विकसित हुआ और एचटीएमएल 5 नया मानक बन गया, नए विकल्प सामने आए। एनीमेशन के लिए सीएसएस पुस्तकालय नए ढांचे के तहत अविश्वसनीय रूप से शक्तिशाली बन गए, साथ ही ब्राउज़र में वेक्टर एनीमेशन के लिए विशेष रूप से डिजाइन किए गए जावास्क्रिप्ट पुस्तकालयों के साथ।

---

---

कोड से सुंदर इमेजरी बनाने के लिए आज हम ब्लॉक में नए बच्चों में से एक mo.js को देखेंगे। सुंदर पैटर्न बनाने वाली उपयोगकर्ता प्रतिक्रियाशील एनीमेशन श्रृंखला बनाने से पहले हम कुछ बुनियादी कार्यों को कवर करेंगे।

Mo.js दर्ज करें

Mo.js आसानी से वेब के लिए मोशन ग्राफ़िक्स बनाने के लिए एक लाइब्रेरी है। यह उन लोगों के लिए सुंदर चीजों को सरल बनाने के लिए डिज़ाइन किया गया है जो बहुत अधिक कोड प्रेमी नहीं हैं, जबकि अनुभवी प्रोग्रामर को एक कलात्मक पक्ष की खोज करने की इजाजत देता है जिसे वे कभी नहीं जानते थे। जैसा कि इसके नाम से पता चलता है, यह लोकप्रिय जावास्क्रिप्ट प्रोग्रामिंग भाषा पर आधारित है, हालांकि इसे इस तरह से लागू किया गया है कि कोई भी मूल बातें आसानी से उठा सकता है।

इससे पहले कि हम आगे बढ़ें, आइए एक नजर डालते हैं कि आज हम क्या बनाने जा रहे हैं:

हम उपयोग करेंगे कोडपेन आज के प्रोजेक्ट के लिए, क्योंकि यह हमें एक ही ब्राउज़र विंडो में सब कुछ पर काम करने की अनुमति देता है। यदि आप चाहें, तो आप एक में काम कर सकते हैं अपनी पसंद का संपादक बजाय। यदि आप स्टेप बाय स्टेप ट्यूटोरियल को छोड़ना चाहते हैं, तो पूरा कोड यहां उपलब्ध है।

एक नया पेन सेट करें, और आपको इस स्क्रीन से बधाई दी जाएगी:

---

---

इससे पहले कि हम शुरू करें, आपको कुछ बदलाव करने होंगे। पर क्लिक करें समायोजन ऊपर दाईं ओर आइकन, और नेविगेट करें जावास्क्रिप्ट टैब।

हम उपयोग करने जा रहे हैं कोलाहल हमारे कोड प्री-प्रोसेसर के रूप में, इसलिए इसे ड्रॉप डाउन मेनू से चुनें। Babel प्रदान करने के साथ-साथ जावास्क्रिप्ट को समझने में थोड़ा आसान बनाता है ईसीएमएस्क्रिप्ट 6 पुराने ब्राउज़रों के लिए समर्थन। यदि आप नहीं जानते कि इसका क्या अर्थ है, चिंता मत करो , यह यहाँ हमारे जीवन को थोड़ा आसान बनाने वाला है।

---

---

हमें परियोजना में mo.js पुस्तकालय आयात करने की भी आवश्यकता है। इसे खोजकर करें मो.जेएस में बाहरी स्क्रिप्ट/पेन जोड़ें टेक्स्ट प्रॉम्प्ट, और इसे चुनना।

इन दो चीजों के साथ, क्लिक करें सहेजें और बंद करें . हम आरंभ करने के लिए तैयार हैं!

Mo.js . के साथ मूल आकार

इससे पहले कि हम ग्राफिक्स के साथ शुरुआत करें, आइए दृश्य फलक में उस सफेद पृष्ठभूमि के बारे में कुछ करें। इस कोड को में लिखकर बैकग्राउंड कलर प्रॉपर्टी बदलें सीएसएस रोटी।

body{
background: rgba(11,11,11,1);
}

एक आकृति बनाना एक सरल प्रक्रिया है, और इसके पीछे की अवधारणा पूरे पुस्तकालय को संचालित करती है। आइए एक डिफ़ॉल्ट सर्कल आकार सेट करें। में इस कोड को दर्ज करें जे एस रोटी:

const redCirc = new mojs.Shape({
isShowStart:true
});

यहाँ, हमने एक बनाया है स्थिरांक नाम के साथ मूल्य रेडसर्क और इसे a . को सौंपा नए mojs.आकार . यदि आप कोडिंग के लिए बिल्कुल नए हैं, तो यहां ब्रैकेट ऑर्डर पर ध्यान दें, और अंत में अर्धविराम को न भूलें!

अब तक हम बिना किसी पैरामीटर के पास हुए हैं isShowStart:सच , जिसका अर्थ है कि यह स्क्रीन पर तब भी दिखाई देगा जब हमने इसे कोई गति सौंपी है। आप देखेंगे कि उसने स्क्रीन के केंद्र में एक गुलाबी वृत्त रखा है:

यह मंडल डिफ़ॉल्ट है आकार मो.जे.एस के लिए हम अपने कोड में एक लाइन जोड़कर इस आकृति को आसानी से बदल सकते हैं:

const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});

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

मूल्यों में पारित करने की यह प्रक्रिया आकार वस्तु यह है कि हम उन्हें कैसे अनुकूलित करते हैं। अभी हमारे पास एक वर्ग है जो वास्तव में बहुत कुछ नहीं करता है। आइए कुछ एनिमेट करने का प्रयास करें।

मोशन की मूल बातें

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

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});

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

आइए इसमें एक एनिमेशन जोड़ें। ऊपर के उदाहरण में, यह लाल वृत्त प्रकट होता है जहां उपयोगकर्ता क्लिक करता है, बाहर की ओर लुप्त होने से पहले। ऐसा करने का एक तरीका समय के साथ त्रिज्या और अस्पष्टता को बदलना है। आइए कोड को संशोधित करें:

radius: {15:30},
opacity: {1:0},
duration:1000

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

आप देखेंगे कि अभी कुछ भी नहीं हो रहा है। ऐसा इसलिए है क्योंकि हमने जोड़ा नहीं है ।प्ले Play() यह हमारे निर्देशों को पूरा करने के लिए कहने के लिए कार्य करता है। इसे अंतिम कोष्ठक और अर्धविराम के बीच जोड़ें, और आपको अपने सर्कल को जीवंत होते देखना चाहिए।

अब हम कहीं पहुंच रहे हैं, लेकिन इसे वास्तव में विशेष बनाने के लिए, आइए कुछ और गहन संभावनाओं को देखें।

Mo.js . के साथ आदेश देना और आसान बनाना

अभी, जैसे ही घेरा दिखाई देता है, वह फीका पड़ने लगता है। यह पूरी तरह से ठीक काम करेगा, लेकिन थोड़ा और नियंत्रण रखना अच्छा होगा।

हम इसे के साथ कर सकते हैं ।फिर() समारोह। हमारी त्रिज्या या अस्पष्टता में परिवर्तन होने के बजाय, आइए एक निर्धारित समय के बाद बदलने से पहले, अपने आकार को वहीं रखें जहां यह शुरू होता है।

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();

अब, हमारा आकार हमारे द्वारा निर्दिष्ट मानों के साथ दिखाई देगा, हम जो कुछ भी डालते हैं उसे करने से पहले 1000 एमएस तक प्रतीक्षा करें ।फिर() समारोह। आइए कोष्ठकों के बीच कुछ निर्देश जोड़ें:

//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500

यह कोड एनीमेशन का एक और महत्वपूर्ण हिस्सा पेश करता है। जहां हमने निर्देश दिया है स्केल 1 से 2 में बदलने के लिए, हमने साइन वेव आधारित सहजता को भी असाइन किया है sin.in . Mo.js में विभिन्न प्रकार के सहज वक्र अंतर्निहित हैं, उन्नत उपयोगकर्ताओं के लिए स्वयं को जोड़ने की क्षमता के साथ। इस मामले में, समय के साथ पैमाना ऊपर की ओर घुमावदार साइन वेव के अनुसार होता है।

विभिन्न कर्व्स के विज़ुअल रन डाउन के लिए, चेक आउट करें easings.net . इसे के साथ मिलाएं रेखा की चौड़ाई हमारी निर्धारित अवधि में 0 में बदल रहा है, और आपके पास बहुत अधिक गतिशील गायब होने वाला प्रभाव है।

Mo.js में आकृतियाँ हर चीज़ का आधार होती हैं, लेकिन वे केवल कहानी की शुरुआत होती हैं। चलो देखते है फटने .

Mo.js . में क्षमता के साथ फटना

प्रति फोड़ना Mo.js में केंद्रीय बिंदु से निकलने वाली आकृतियों का एक संग्रह है। हम इन्हें अपने तैयार एनिमेशन का आधार बनाने जा रहे हैं। आप एक डिफ़ॉल्ट बर्स्ट को उसी तरह कॉल कर सकते हैं जैसे आप एक आकृति करते हैं। आइए कुछ चिंगारी बनाते हैं:

const sparks = new mojs.Burst({
}).play();

आप देख सकते हैं, बस एक खाली जोड़ कर फोड़ना ऑब्जेक्ट और इसे खेलने के लिए कहने पर, हमें डिफ़ॉल्ट बर्स्ट प्रभाव मिलता है। हम बर्स्ट को एनिमेट करके उसके आकार और रोटेशन को प्रभावित कर सकते हैं RADIUS तथा कोण गुण:

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();

पहले से ही, हमने अपने बर्स्ट में एक कस्टम त्रिज्या और स्पिन जोड़ लिया है:

उन्हें चिंगारी की तरह दिखने के लिए, आइए बर्स्ट द्वारा उपयोग की जाने वाली आकृतियों को और बर्स्ट द्वारा उत्पन्न की जाने वाली आकृतियों को बदलें। आप बर्स्ट के बच्चों के गुणों को संबोधित करके ऐसा करते हैं।

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();

आप देखेंगे कि बच्चे के गुण वही हैं जो आकार के गुणों के साथ हम पहले ही काम कर चुके हैं। इस बार हमने एक क्रॉस को आकार के रूप में चुना है। इन सभी 50 आकृतियों में अब समान गुण हैं। यह काफी अच्छा दिखने लगा है! यह पहली चीज है जिसे उपयोगकर्ता माउस पर क्लिक करने पर देखेगा।

हालांकि पहले से ही हम देख सकते हैं कि हमारे शुरुआती का लाल स्ट्रोक रेडसर्क आकार बहुत लंबा रह रहा है। इसकी अवधि बदलने का प्रयास करें ताकि दोनों एनिमेशन एक साथ फिट हों। इसे कुछ इस तरह दिखना चाहिए:

हम अपने एनीमेशन के साथ समाप्त होने से बहुत दूर हैं, लेकिन आइए इसे उपयोगकर्ता-प्रतिक्रियाशील बनाने के लिए कुछ समय दें।

मुख्य कार्यक्रम

उपयोगकर्ता द्वारा क्लिक की जाने वाली स्थिति में हमारे एनिमेशन को ट्रिगर करने के लिए हम एक ईवेंट हैंडलर का उपयोग करेंगे। अपने कोड के ब्लॉक के अंत में, इसे जोड़ें:

document.addEventListener( 'click', function(e) {
});

कोड का यह टुकड़ा माउस क्लिक को सुनता है, और हमारे लिए कोष्ठक में दिए गए निर्देशों को पूरा करता है। हम अपना जोड़ सकते हैं रेडसर्क तथा स्पार्क्स इस श्रोता को आपत्ति।

document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});

हम यहां जिन दो कार्यों को कहते हैं वे हैं: ।तराना() तथा .रीप्ले () . रीप्ले फ़ंक्शन प्ले फ़ंक्शन के समान है, हालांकि यह निर्दिष्ट करता है कि एनीमेशन को हर बार क्लिक करने पर फिर से शुरू से शुरू होना चाहिए।

NS तराना फ़ंक्शन हमारे ऑब्जेक्ट में मानों में गुजरता है ताकि ट्रिगर होने पर आप चीजों को बदल सकें। इस मामले में हम पृष्ठ निर्देशांक में गुजर रहे हैं जहां माउस क्लिक किया गया था, और तदनुसार हमारे एनीमेशन की x और y स्थिति निर्दिष्ट कर रहे थे। अपना कोड सहेजें, और स्क्रीन पर क्लिक करने का प्रयास करें। आपको कुछ समस्याएं दिखाई देंगी।

सबसे पहले, हमारा प्रारंभिक एनीमेशन अभी भी स्क्रीन के बीच में दिखाई देता है, भले ही उपयोगकर्ता कुछ भी क्लिक न करे। दूसरे, माउस बिंदु पर एनीमेशन चालू नहीं होता है, लेकिन ऑफसेट नीचे और दाईं ओर होता है। इन दोनों चीजों को हम आसानी से ठीक कर सकते हैं।

हमारे आकार और फट में है ।प्ले Play() उनके संबंधित कोड ब्लॉक के अंत में। हमें इसकी अब और आवश्यकता नहीं है .रीप्ले () ईवेंट हैंडलर में बुलाया जा रहा है। आप कोड के दोनों ब्लॉक से .play() को हटा सकते हैं। उसी कारण से, आप हटा सकते हैं isShowStart: सच भी, क्योंकि अब हमें शुरुआत में दिखाने के लिए इसकी आवश्यकता नहीं है।

स्थिति की समस्या को ठीक करने के लिए हमें अपनी वस्तुओं के लिए स्थिति मान निर्धारित करने की आवश्यकता होगी। जैसा कि आपको हमारे पहले आकार से याद होगा, mo.js उन्हें डिफ़ॉल्ट रूप से पृष्ठ के केंद्र में रखता है। जब इन मानों को माउस की स्थिति के साथ जोड़ दिया जाता है, तो यह ऑफ़सेट बनाता है। इस ऑफसेट से छुटकारा पाने के लिए, बस इन पंक्तियों को दोनों में जोड़ें रेडसर्क तथा स्पार्क्स वस्तुएं:

left: 0,
top: 0,

अब केवल स्थिति मान जो हमारी वस्तुएं लेती हैं, वे हैं ईवेंट श्रोता द्वारा पारित माउस स्थिति मान। अब चीजें बहुत बेहतर काम करनी चाहिए।

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

साइकेडेलिक प्राप्त करना

आइए कुछ कताई त्रिकोणों से शुरू करते हैं। यहाँ विचार एक कृत्रिम निद्रावस्था का स्ट्रोबोस्कोपिक प्रभाव बनाना था, और इसे स्थापित करना वास्तव में काफी आसान है। इन मापदंडों के साथ एक और बर्स्ट जोड़ें:

const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});

यहां सब कुछ अब तक काफी परिचित होना चाहिए, हालांकि कुछ नए बिंदु हैं। आप देखेंगे कि आकृति को त्रिभुज के रूप में परिभाषित करने के बजाय, हमने इसे a . कहा है बहुभुज की संख्या निर्दिष्ट करने से पहले अंक इसमें 3 के रूप में है।

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

यदि कोड आपके लिए काम नहीं कर रहा है, तो सुनिश्चित करें कि आपने त्रिभुज ऑब्जेक्ट को ईवेंट श्रोता वर्ग में जोड़ा है जैसा कि हमने पिछली वस्तुओं के साथ किया था।

सुंदर साइकेडेलिक! आइए इसका अनुसरण करने के लिए एक और बर्स्ट जोड़ें।

नृत्य पेंटागन

हम अपने के लगभग समान कुछ का उपयोग कर सकते हैं त्रिभुज इसके बाद आने वाले फट को बनाने के लिए वस्तु। यह थोड़ा संशोधित कोड चमकीले रंग का अतिव्यापी कताई हेक्सागोन उत्पन्न करता है:

const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});

यहाँ मुख्य परिवर्तन यह है कि हमने a . जोड़ा है विलंब 500ms का, ताकि त्रिभुजों के बाद तक फटना शुरू न हो। कुछ मूल्यों को बदलकर, यहाँ विचार त्रिकोण के विपरीत दिशा में फट स्पिन बनाने का था। सुखद दुर्घटना से, जब तक पंचकोण दिखाई देते हैं, तब तक त्रिभुजों का स्ट्रोबोस्कोपिक प्रभाव ऐसा प्रतीत होता है जैसे वे एक साथ घूम रहे हों।

एक छोटी सी यादृच्छिकता

आइए एक प्रभाव जोड़ें जो यादृच्छिक मूल्यों का उपयोग करता है। इन गुणों के साथ एक बर्स्ट बनाएँ:

const redSparks = new mojs.Burst({
left: 0, top: 0,
count:8,
radius: { 150: 350 },
angle: {0:90 ,easing:'cubic.out'},
children: {
shape: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});

यह फटने वाली रेखाएँ बनाएगी जो लाल रंग से शुरू होती हैं और समय के साथ सिकुड़ती हुई पारदर्शिता के लिए फीकी पड़ जाती हैं। इस घटक को जो दिलचस्प बनाता है वह यह है कि इसके कुछ गुणों को निर्धारित करने के लिए यादृच्छिक मूल्यों का उपयोग किया जाता है।

NS डिग्री शिफ्ट बच्चे को एक प्रारंभिक कोण देता है। इसे रैंडमाइज करके यह हर क्लिक पर बिल्कुल अलग बर्स्ट देता है। यादृच्छिक मूल्यों का भी उपयोग किया जाता है RADIUS तथा विलंब अराजक प्रभाव को जोड़ने के लिए कार्य करता है।

यहाँ प्रभाव अपने आप में है:

चूंकि हम यहां यादृच्छिक मानों का उपयोग कर रहे हैं, इसलिए हमें ऑब्जेक्ट के लिए अपने ईवेंट हैंडलर में एक अतिरिक्त विधि जोड़ने की आवश्यकता है:

redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();

NS उत्पन्न () फ़ंक्शन हर बार ईवेंट कहे जाने पर नए यादृच्छिक मानों की गणना करता है। इसके बिना, आकार पहली बार बुलाए जाने पर यादृच्छिक मानों का चयन करेगा, और प्रत्येक बाद की कॉल के लिए उन मानों का उपयोग करना जारी रखेगा। यह पूरी तरह से प्रभाव को बर्बाद कर देगा, इसलिए सुनिश्चित करें कि आप इसे जोड़ते हैं!

आप mo.js ऑब्जेक्ट के लगभग हर तत्व के लिए यादृच्छिक मानों का उपयोग कर सकते हैं, और वे अद्वितीय एनिमेशन बनाने का एक आसान तरीका हैं।

टोरेंट डाउनलोड स्पीड कैसे बढ़ाएं

हालांकि एनिमेशन में गतिशील आंदोलनों को जोड़ने का एकमात्र तरीका यादृच्छिकता नहीं है। आइए देखें लड़खड़ाहट समारोह।

चौंका देने वाली पंक्तियाँ

यह दिखाने के लिए कि कैसे लड़खड़ाहट समारोह काम करता है, हम कैथरीन व्हील की तरह कुछ बनाने जा रहे हैं। इन मापदंडों के साथ एक नया बर्स्ट बनाएं:

const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});

यहाँ सब कुछ अब तक परिचित है, एक फटने से 50 बच्चे पैदा होते हैं जो लाल या नारंगी रंग की रेखाएँ होती हैं। यहाँ अंतर यह है कि हम पास करते हैं विलंब संपत्ति ए डगमगाता है(10) समारोह। यह प्रत्येक बच्चे के उत्सर्जन के बीच 10ms की देरी को जोड़ता है, जिससे हम जिस कताई प्रभाव की तलाश कर रहे हैं उसे दे रहे हैं।

स्टैगर फ़ंक्शन किसी भी यादृच्छिक मान का उपयोग नहीं करता है, इसलिए आपको a . की आवश्यकता नहीं होगी उत्पन्न इस बार इवेंट हैंडलर में कार्य करें। आइए देखें कि अब तक हमारे पास कार्रवाई में क्या है:

हम यहां आसानी से रुक सकते हैं, लेकिन इस प्रोजेक्ट को पूरा करने के लिए बस एक और बर्स्ट जोड़ते हैं।

स्मार्ट वर्ग

इस आखिरी फटने के लिए, आयतों का उपयोग करके कुछ बनाते हैं। इस ऑब्जेक्ट को अपने कोड और ईवेंट श्रोता में जोड़ें:

const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});

आज हमने जो काम किया है उसमें यह वस्तु कुछ भी नया नहीं जोड़ती है, इसे केवल यह दिखाने के लिए शामिल किया गया है कि कैसे जटिल ज्यामितीय पैटर्न को कोड के माध्यम से आसानी से बनाया जा सकता है।

जब यह इस ट्यूटोरियल को लिखने के परीक्षण चरणों में बनाया गया था तब यह इस ऑब्जेक्ट का इच्छित परिणाम नहीं था। एक बार कोड चलने के बाद, यह स्पष्ट हो गया कि मैंने उद्देश्य से कहीं अधिक सुंदर चीज़ पर ठोकर खाई है!

इस अंतिम वस्तु को जोड़ने के साथ, हम कर रहे हैं। आइए पूरी बात को कार्रवाई में देखें।

Mo.js: वेब एनिमेशन के लिए एक शक्तिशाली उपकरण

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

यह पुस्तकालय प्रोग्रामिंग और वेब विकास दोनों में काम करने वालों के लिए उपयोगी है, परियोजना में उपयोग किए जाने वाले ईवेंट हैंडलिंग का उपयोग वेबसाइटों या ऐप्स में प्रतिक्रियाशील बटन और टेक्स्ट बनाने के लिए आसानी से किया जा सकता है। इसके साथ मज़े करो: कोई गलती नहीं है, केवल सुखद दुर्घटनाएं हैं!

साझा करना साझा करना कलरव ईमेल क्या यह विंडोज 11 में अपग्रेड करने लायक है?

विंडोज़ को नया रूप दिया गया है। लेकिन क्या यह आपको विंडोज 10 से विंडोज 11 में शिफ्ट होने के लिए मनाने के लिए काफी है?

आगे पढ़िए संबंधित विषय

• प्रोग्रामिंग
• जावास्क्रिप्ट

लेखक के बारे में इयान बकले(२१६ लेख प्रकाशित)

इयान बकले बर्लिन, जर्मनी में रहने वाले एक स्वतंत्र पत्रकार, संगीतकार, कलाकार और वीडियो निर्माता हैं। जब वह लिख नहीं रहा होता है या मंच पर नहीं होता है, तो वह पागल वैज्ञानिक बनने की उम्मीद में DIY इलेक्ट्रॉनिक्स या कोड के साथ छेड़छाड़ कर रहा होता है।

इयान बकले की और फ़िल्में या टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें