Mo.JS உடன் அழகான குறியிடப்பட்ட வலை அனிமேஷன்களை உருவாக்குவது எப்படி

நீங்கள் தேடுகிறீர்கள் என்றால் உங்கள் சொந்த வலைத்தளத்தைத் தொடங்குங்கள் , அழகான தோற்றமுடைய அனிமேஷன்கள் அதை பிரகாசிக்கச் செய்யும். இதை அடைய பல வழிகள் உள்ளன அனிமேஷன் செய்யப்பட்ட GIF ஐ உருவாக்குகிறது தற்போதுள்ள படத்தின் ஒரு பகுதியிலிருந்து, புதிதாக மென்பொருளைப் பயன்படுத்தி உங்களை நீங்களே உருவாக்கக் கற்றுக்கொள்வது கலப்பான் அல்லது மாயா .

அனிமேஷன்களை நிரலாக்கமாக உருவாக்க நூலகங்களும் உள்ளன. வரலாற்று ரீதியாக, வெப் கோடர்கள் எளிய அனிமேஷன்களை உருவாக்க jQuery ஐப் பயன்படுத்தினார்கள், ஆனால் வலை உருவாக்கப்பட்டது மற்றும் HTML5 புதிய தரநிலை ஆனது, புதிய விருப்பங்கள் தோன்றின. உலாவியில் திசையன் அனிமேஷனுக்காக வடிவமைக்கப்பட்ட ஜாவாஸ்கிரிப்ட் நூலகங்களுடன், புதிய கட்டமைப்பின் கீழ் அனிமேஷனுக்கான சிஎஸ்எஸ் நூலகங்கள் நம்பமுடியாத சக்திவாய்ந்ததாக மாறியது.

---

---

இன்று நாம் குறியீட்டில் இருந்து அழகான படங்களை உருவாக்குவதற்கான புதிய குழந்தைகளில் ஒருவரான mo.js ஐப் பார்ப்போம். அழகான வடிவங்களை உருவாக்கும் பயனர் எதிர்வினை அனிமேஷன் தொடரை உருவாக்குவதற்கு முன், சில அடிப்படை செயல்பாடுகளை நாங்கள் உள்ளடக்குவோம்.

Mo.js ஐ உள்ளிடவும்

Mo.js என்பது இணையத்திற்கான மோஷன் கிராபிக்ஸ் எளிதாக உருவாக்க ஒரு நூலகம். இது மிகவும் குறியீட்டு அறிவு இல்லாதவர்களுக்கு அழகான விஷயங்களை உருவாக்குவதை எளிதாக்கும் வகையில் வடிவமைக்கப்பட்டுள்ளது, அதே நேரத்தில் மூத்த புரோகிராமர்கள் தங்களுக்குத் தெரியாது என்று ஒரு கலைப் பக்கத்தைக் கண்டறிய அனுமதிக்கிறது. அதன் பெயர் குறிப்பிடுவது போல, இது பிரபலமான ஜாவாஸ்கிரிப்ட் நிரலாக்க மொழியை அடிப்படையாகக் கொண்டது, இருப்பினும் இது எவரும் எளிதாக அடிப்படைகளை எடுக்கும் வகையில் செயல்படுத்தப்படுகிறது.

நாம் மேலும் செல்வதற்கு முன், இன்று நாம் எதை உருவாக்கப் போகிறோம் என்று பார்ப்போம்:

நாங்கள் பயன்படுத்துவோம் கோட்பென் இன்றைய திட்டத்திற்கு, ஒரே உலாவி சாளரத்தில் எல்லாவற்றையும் வேலை செய்ய இது அனுமதிக்கிறது. நீங்கள் விரும்பினால், நீங்கள் ஒன்றில் வேலை செய்யலாம் உங்கள் விருப்பப்படி எடிட்டர் மாறாக நீங்கள் படிப்படியான பயிற்சியைத் தவிர்க்க விரும்பினால், முழு குறியீடும் இங்கே கிடைக்கும்.

ஒரு புதிய பேனாவை அமைக்கவும், இந்த திரையில் நீங்கள் வரவேற்கப்படுவீர்கள்:

---

---

நாங்கள் தொடங்குவதற்கு முன், நீங்கள் சில மாற்றங்களைச் செய்ய வேண்டும். என்பதை கிளிக் செய்யவும் அமைப்புகள் மேல் வலதுபுறத்தில் உள்ள ஐகான், மற்றும் செல்லவும் ஜாவாஸ்கிரிப்ட் தாவல்.

நாங்கள் பயன்படுத்தப் போகிறோம் பாபேல் எங்கள் குறியீட்டு முன் செயலியாக, கீழ்தோன்றும் மெனுவிலிருந்து இதைத் தேர்ந்தெடுக்கவும். பாபெல் ஜாவாஸ்கிரிப்டை வழங்குவதோடு சேர்த்து கொஞ்சம் எளிதாகப் புரிந்துகொள்ள வைக்கிறது ECMAScript 6 பழைய உலாவிகளுக்கான ஆதரவு. இதன் பொருள் என்னவென்று உங்களுக்குத் தெரியாவிட்டால், கவலைப்படாதே , அது இங்கே நம் வாழ்க்கையை கொஞ்சம் எளிதாக்கும்.

---

---

நாங்கள் திட்டத்தில் mo.js நூலகத்தையும் இறக்குமதி செய்ய வேண்டும். தேடுவதன் மூலம் இதைச் செய்யுங்கள் mo.js இல் வெளிப்புற ஸ்கிரிப்டுகள்/பேனாக்களைச் சேர்க்கவும் உரை வரியில், அதைத் தேர்ந்தெடுக்கவும்.

இந்த இரண்டு விஷயங்களையும் வைத்து, கிளிக் செய்யவும் சேமித்து மூடு . தொடங்க நாங்கள் தயாராக இருக்கிறோம்!

Mo.js உடன் அடிப்படை வடிவங்கள்

நாம் கிராபிக்ஸ் தொடங்கும் முன், பார்வை பலகத்தில் அந்த கண்மூடித்தனமான வெள்ளை பின்னணியில் ஏதாவது செய்வோம். இந்த குறியீட்டை எழுதி பின்னணி வண்ண சொத்தை மாற்றவும் CSS ரொட்டி.

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

ஒரு வடிவத்தை உருவாக்குவது ஒரு எளிய செயல்முறையாகும், அதன் பின்னணியில் உள்ள கருத்து முழு நூலகத்தையும் இயக்குகிறது. இயல்புநிலை வட்ட வடிவத்தை அமைப்போம். இந்த குறியீட்டை உள்ளிடவும் ஜே.எஸ் ரொட்டி:

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

இங்கே, நாங்கள் ஒன்றை உருவாக்கியுள்ளோம் கான்ஸ்ட் பெயருடன் மதிப்பு redCirc மற்றும் அதை ஏ புதிய மாதங்கள். வடிவம் . நீங்கள் குறியீட்டுக்கு முற்றிலும் புதியவராக இருந்தால், இங்கே அடைப்புக்குறி வரிசையில் கவனம் செலுத்துங்கள், இறுதியில் அரைப்புள்ளி மறந்துவிடாதீர்கள்!

இதுவரை நாம் வேறு எந்த அளவுருக்களிலும் தேர்ச்சி பெறவில்லை isShowStart: உண்மை அதாவது, நாம் எந்த இயக்கத்தையும் ஒதுக்குவதற்கு முன்பே அது திரையில் தோன்றும். திரையின் மையத்தில் ஒரு இளஞ்சிவப்பு வட்டத்தை வைத்திருப்பதை நீங்கள் காண்பீர்கள்:

இந்த வட்டம் இயல்புநிலை வடிவம் mo.js க்கு எங்கள் குறியீட்டில் ஒரு வரியைச் சேர்ப்பதன் மூலம் இந்த வடிவத்தை நாம் எளிதாக மாற்றலாம்:

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

ஒரு பொருளுக்கு அதிக பண்புகளைச் சேர்க்க, அதைப் பிரிக்க நாம் கமாவைப் பயன்படுத்துகிறோம். இங்கே, நாங்கள் ஒரு சேர்த்தோம் வடிவம் சொத்து, மற்றும் அது என வரையறுக்கப்பட்டது 'செவ்வக' . உங்கள் பேனாவைச் சேமிக்கவும், அதற்கு பதிலாக இயல்புநிலை வடிவத்தை ஒரு சதுரமாக மாற்றுவதை நீங்கள் காண்பீர்கள்.

மதிப்புகளுக்கு அனுப்பும் இந்த செயல்முறை வடிவம் நாம் அவற்றை எவ்வாறு தனிப்பயனாக்குகிறோம் என்பதுதான் பொருள். இப்போது எங்களிடம் ஒரு சதுரம் உள்ளது, அது உண்மையில் அதிகம் செய்யாது. எதையாவது அனிமேஷன் செய்ய முயற்சிப்போம்.

இயக்கத்தின் அடிப்படைகள்

இன்னும் கொஞ்சம் ஈர்க்கக்கூடிய ஒன்றைப் பெற ஒரு வட்டத்தை அமைப்போம், அதைச் சுற்றி சிவப்பு பக்கவாதம் மற்றும் உள்ளே நிரப்புதல் இல்லை.

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

நீங்கள் பார்க்க முடியும் என, நாங்கள் ஒரு ஒதுக்கப்பட்டுள்ளது அகலம் பக்கவாதத்திற்கான மதிப்பு, மற்றும் ஒரு ஆரம் வட்டத்திற்கு. விஷயங்கள் ஏற்கனவே கொஞ்சம் வித்தியாசமாகத் தொடங்குகின்றன. உங்கள் வடிவம் புதுப்பிக்கப்படவில்லை என்றால், நீங்கள் எந்த காற்புள்ளிகளையும் அல்லது ஒற்றை மேற்கோள் மதிப்பெண்களையும் தவறவிடவில்லை என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள் 'வலை' அல்லது 'இல்லை' , மற்றும் நீங்கள் கிளிக் செய்தீர்கள் என்பதை உறுதிப்படுத்தவும் சேமிக்க பக்கத்தின் மேல்.

இதற்கு ஒரு அனிமேஷனைச் சேர்ப்போம். மேலே உள்ள எடுத்துக்காட்டில், இந்த சிவப்பு வட்டம் பயனர் கிளிக் செய்யும் இடத்தில் தோன்றும். காலப்போக்கில் ஆரம் மற்றும் ஒளிபுகாநிலையை மாற்றுவதன் மூலம் இதை நாம் செய்ய முடியும். குறியீட்டை மாற்றியமைப்போம்:

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

மாற்றுவதன் மூலம் ஆரம் சொத்து மற்றும் சேர்த்தல் ஒளிபுகாநிலை மற்றும் காலம் பண்புகள், காலப்போக்கில் செயல்படுத்த வடிவ வழிமுறைகளை வழங்கியுள்ளோம். இவை டெல்டா பொருள்கள், இந்த பண்புகளுக்கான தொடக்க மற்றும் இறுதி தகவல்களை வைத்திருக்கும்.

இன்னும் எதுவும் நடக்கவில்லை என்பதை நீங்கள் கவனிப்பீர்கள். இதற்கு காரணம் நாங்கள் சேர்க்கவில்லை .பிளே () எங்கள் அறிவுறுத்தல்களைச் செயல்படுத்தச் சொல்லும் செயல்பாடு. இறுதி அடைப்புக்குறிகளுக்கும் அரைப்புள்ளிகளுக்கும் இடையில் சேர்க்கவும், உங்கள் வட்டம் உயிர்ப்பிக்கப்படுவதை நீங்கள் காண வேண்டும்.

இப்போது நாம் எங்காவது சென்று கொண்டிருக்கிறோம், ஆனால் அது மிகவும் சிறப்பானதாக இருக்க, இன்னும் சில ஆழமான சாத்தியக்கூறுகளைப் பார்ப்போம்.

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 ms காத்திருங்கள் .பிறகு() செயல்பாடு அடைப்புக்குறிக்குள் சில வழிமுறைகளைச் சேர்ப்போம்:

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

இந்த குறியீடு அனிமேஷனின் மற்றொரு முக்கியமான பகுதியை அறிமுகப்படுத்துகிறது. எங்கே நாங்கள் அறிவுறுத்தியுள்ளோம் அளவு 1 லிருந்து 2 ஆக மாற்ற, சைன் அலை அடிப்படையிலான தளர்வை நாங்கள் ஒதுக்கியுள்ளோம் sin.in . மேம்பட்ட பயனர்கள் தங்களைச் சேர்க்கும் திறனுடன் Mo.js ஆனது பலவிதமான தளர்த்தும் வளைவுகளைக் கொண்டுள்ளது. இந்த வழக்கில், காலப்போக்கில் அளவானது ஒரு சைன் அலை மேல்நோக்கி வளைந்தபடி நடக்கிறது.

பல்வேறு வளைவுகளின் ஒரு காட்சி ரன், பார்க்கவும் ஈஸிங்ஸ்.நெட் . உடன் இதை இணைக்கவும் பக்கவாதம் அகலம் எங்கள் நிர்ணயிக்கப்பட்ட காலப்பகுதியில் 0 க்கு மாறுகிறது, மேலும் நீங்கள் மிகவும் மாறும் காணாமல் போகும் விளைவைக் கொண்டிருக்கிறீர்கள்.

Mo.js இல் உள்ள எல்லாவற்றுக்கும் வடிவங்கள் அடிப்படை, ஆனால் அவை கதையின் ஆரம்பம் மட்டுமே. பார்க்கலாம் வெடிப்புகள் .

Mo.js இல் சாத்தியமான வெடிப்பு

TO வெடிப்பு Mo.js என்பது ஒரு மையப் புள்ளியிலிருந்து வெளிப்படும் வடிவங்களின் தொகுப்பாகும். எங்கள் முடிக்கப்பட்ட அனிமேஷனின் அடிப்படையில் நாங்கள் இதை உருவாக்கப் போகிறோம். நீங்கள் ஒரு வடிவத்தை உருவாக்கும் அதே வழியில் இயல்புநிலை வெடிப்பை அழைக்கலாம். சில தீப்பொறிகளை உருவாக்குவோம்:

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

ஒரு காலி சேர்ப்பதன் மூலம் நீங்கள் பார்க்க முடியும் வெடிப்பு பொருள் மற்றும் அதை விளையாடச் சொன்னால், இயல்புநிலை வெடிப்பு விளைவைப் பெறுகிறோம். வெடிப்பின் அளவு மற்றும் சுழற்சியை அதன் அனிமேஷன் மூலம் நாம் பாதிக்கலாம் ஆரம் மற்றும் கோணம் பண்புகள்:

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 வடிவங்களும் இப்போது ஒரே பண்புகளைக் கொண்டுள்ளன. இது நன்றாகத் தெரிய ஆரம்பித்துவிட்டது! மவுஸை க்ளிக் செய்யும்போது பயனர் பார்க்கும் முதல் விஷயம் இதுதான்.

ஏற்கனவே இருந்தாலும், எங்கள் ஆரம்பத்தின் சிவப்பு பக்கவாதம் என்று நாம் பார்க்க முடியும் redCirc வடிவம் மிக நீண்டதாக இருக்கும். இரண்டு அனிமேஷன்களும் ஒன்றாக பொருந்தும் வகையில் அதன் கால அளவை மாற்ற முயற்சிக்கவும். இது இது போன்ற தோற்றத்துடன் முடிவடைய வேண்டும்:

எங்கள் அனிமேஷனுடன் நாங்கள் முடிவடையவில்லை, ஆனால் அதை பயனர் எதிர்வினை செய்ய சிறிது நேரம் ஒதுக்குவோம்.

முக்கிய நிகழ்வு

பயனர் கிளிக் செய்யும் நிலையில் எங்கள் அனிமேஷன்களைத் தூண்டுவதற்கு ஒரு நிகழ்வு கையாளுபவரை நாங்கள் பயன்படுத்துவோம். உங்கள் குறியீடு தொகுதியின் முடிவில், இதைச் சேர்க்கவும்:

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

இந்த குறியீடு சுட்டி கிளிக்குகளைக் கேட்கிறது, மேலும் எங்களுக்கான அடைப்புக்குறிக்குள் உள்ள எந்த வழிமுறைகளையும் நிறைவேற்றுகிறது. நாம் எங்களை சேர்க்கலாம் redCirc மற்றும் தீப்பொறிகள் இந்த கேட்பவருக்கு பொருள்.

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

நாம் இங்கு அழைக்கும் இரண்டு செயல்பாடுகள் . ட்யூன் () மற்றும் .மறு() . ரீப்ளே செயல்பாடு நாடக செயல்பாட்டைப் போன்றது, இருப்பினும் அனிமேஷன் ஒவ்வொரு முறையும் கிளிக் செய்யும்போதே மீண்டும் தொடங்க வேண்டும் என்று குறிப்பிடுகிறது.

தி இசைக்கு செயல்பாடு எங்கள் பொருளுக்கு மதிப்புகளில் செல்கிறது, எனவே அது தூண்டப்படும்போது நீங்கள் விஷயங்களை மாற்றலாம். இந்த வழக்கில் நாம் சுட்டியை கிளிக் செய்த பக்க ஆயங்களை கடந்து, அதற்கேற்ப எங்கள் அனிமேஷனின் x மற்றும் y நிலையை ஒதுக்குகிறோம். உங்கள் குறியீட்டைச் சேமித்து, திரையில் கிளிக் செய்யவும். நீங்கள் சில பிரச்சனைகளை கவனிப்பீர்கள்.

முதலாவதாக, பயனர் எதையும் கிளிக் செய்யாவிட்டாலும், எங்கள் ஆரம்ப அனிமேஷன் திரையின் நடுவில் இன்னும் காட்டப்படும். இரண்டாவதாக, அனிமேஷன் மவுஸ் புள்ளியில் தூண்டப்படவில்லை, ஆனால் கீழே மற்றும் வலதுபுறம் ஈடுசெய்யப்படுகிறது. இந்த இரண்டு விஷயங்களையும் நாம் எளிதாக சரிசெய்யலாம்.

எங்கள் வடிவம் மற்றும் வெடிப்பு உள்ளது .பிளே () அந்தந்த குறியீடு தொகுதிகளின் முடிவில். எங்களுக்கு இது இனி தேவையில்லை .மறு() நிகழ்வு கையாளுபவர் அழைக்கப்படுகிறார். குறியீட்டின் இரண்டு தொகுதிகளிலிருந்தும் .play () ஐ நீக்கலாம். அதே காரணத்திற்காக, நீங்கள் அகற்றலாம் isShowStart: உண்மை மேலும், தொடக்கத்தில் காண்பிக்க நமக்கு இது இனி தேவையில்லை.

பொருத்துதல் சிக்கலை சரிசெய்ய நாம் நமது பொருள்களுக்கான நிலை மதிப்புகளை அமைக்க வேண்டும். எங்கள் முதல் வடிவத்திலிருந்து நீங்கள் நினைவில் கொள்வது போல், mo.js அவற்றை இயல்பாக பக்கத்தின் மையத்தில் வைக்கிறது. இந்த மதிப்புகள் சுட்டி நிலையுடன் இணைந்தால், அது ஆஃப்செட்டை உருவாக்குகிறது. இந்த ஆஃப்செட்டில் இருந்து விடுபட, இந்த வரிகளை இரண்டிலும் சேர்க்கவும் redCirc மற்றும் தீப்பொறிகள் பொருள்கள்:

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
}
});

இங்குள்ள முக்கிய மாற்றம் என்னவென்றால், நாங்கள் ஒரு சேர்த்திருக்கிறோம் தாமதம் 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)',
}
});

இந்த வெடிப்பு சிவப்பு நிறத்தில் தொடங்கி வெளிப்படைத்தன்மைக்கு மங்கி, காலப்போக்கில் சுருங்கி வரிகளை உருவாக்கும். இந்த கூறு சுவாரஸ்யமானது என்னவென்றால், அதன் சில பண்புகளைத் தீர்மானிக்க சீரற்ற மதிப்புகள் பயன்படுத்தப்படுகின்றன.

தி டிகிரி ஷிப்ட் குழந்தைக்கு ஒரு தொடக்க கோணத்தை அளிக்கிறது. இதை சீரற்றதாக்குவதன் மூலம், இது ஒவ்வொரு கிளிக்கிலும் முற்றிலும் மாறுபட்ட வெடிப்பை அளிக்கிறது. சீரற்ற மதிப்புகளும் பயன்படுத்தப்படுகின்றன ஆரம் மற்றும் தாமதம் குழப்பமான விளைவை சேர்க்க செயல்பாடுகள்.

அதன் விளைவு இதோ:

நாங்கள் இங்கே சீரற்ற மதிப்புகளைப் பயன்படுத்துவதால், பொருளுக்கு எங்கள் நிகழ்வு கையாளுபவருக்கு கூடுதல் முறையைச் சேர்க்க வேண்டும்:

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

தி உருவாக்கு () நிகழ்வு அழைக்கப்படும் ஒவ்வொரு முறையும் செயல்பாடு புதிய சீரற்ற மதிப்புகளைக் கணக்கிடுகிறது. இது இல்லாமல், வடிவம் முதல் முறையாக அழைக்கப்படும் சீரற்ற மதிப்புகளைத் தேர்ந்தெடுக்கும், மேலும் ஒவ்வொரு அடுத்த அழைப்பிற்கும் அந்த மதிப்புகளைப் பயன்படுத்துவதைத் தொடரும். இது விளைவை முற்றிலும் அழித்துவிடும், எனவே இதைச் சேர்ப்பதை உறுதிசெய்க!

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 குழந்தைகளை உருவாக்குகிறது, அவை சிவப்பு அல்லது ஆரஞ்சு கோடுகள். வித்தியாசம் இங்கே நாம் கடந்து செல்கிறோம் தாமதம் சொத்து a தடுமாறும் (10) செயல்பாடு இது ஒவ்வொரு குழந்தையின் உமிழ்வுக்கும் இடையில் 10ms தாமதத்தை சேர்க்கிறது, இது நாம் தேடும் சுழல் விளைவை அளிக்கிறது.

தடுமாறும் செயல்பாடு எந்த சீரற்ற மதிப்புகளையும் பயன்படுத்தாது, எனவே உங்களுக்கு ஒரு தேவையில்லை உருவாக்க இந்த முறை நிகழ்வு கையாளுபவரின் செயல்பாடு. இதுவரை நம்மிடம் உள்ள அனைத்தையும் பார்ப்போம்:

நாம் எளிதாக இங்கே நிறுத்தலாம், ஆனால் இந்த திட்டத்தை முடிக்க இன்னும் ஒரு வெடிப்பு சேர்க்கலாம்.

ஸ்மார்ட் சதுரங்கள்

இந்த கடைசி வெடிப்புக்கு, செவ்வகங்களைப் பயன்படுத்தி ஏதாவது செய்வோம். இந்த பொருளை உங்கள் குறியீடு மற்றும் நிகழ்வு கேட்பவரிடம் சேர்க்கவும்:

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 க்கு மாறுவதற்கு இது போதுமானதா?

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

• நிரலாக்க
• ஜாவாஸ்கிரிப்ட்

எழுத்தாளர் பற்றி இயன் பக்லி(216 கட்டுரைகள் வெளியிடப்பட்டன)

இயன் பக்லி ஜெர்மனியின் பெர்லினில் வசிக்கும் ஒரு ஃப்ரீலான்ஸ் பத்திரிகையாளர், இசைக்கலைஞர், கலைஞர் மற்றும் வீடியோ தயாரிப்பாளர் ஆவார். அவர் எழுதாதபோது அல்லது மேடையில் இருக்கும்போது, ​​அவர் ஒரு பைத்தியக்கார விஞ்ஞானி ஆவார் என்ற நம்பிக்கையில் DIY எலக்ட்ரானிக்ஸ் அல்லது குறியீட்டுடன் டிங்கரிங் செய்கிறார்.

இயன் பக்லேயிடமிருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்