Како направити лепе кодиране веб анимације помоћу Мо.ЈС -а

Ако желите да покренути сопствену веб страницу , анимације прелепог изгледа могу учинити да заблиста. Постоји више начина да се то постигне, од једноставног прављење анимираног ГИФ -а од дела постојећег филма, до учења да направите свој производ од нуле помоћу софтвера попут Блендер или Маиа .

На располагању су и библиотеке за програмско креирање анимација. Историјски гледано, веб кодери су користили јКуери за креирање једноставних анимација, али како се веб развијао и ХТМЛ5 постао нови стандард, појавиле су се свеже опције. ЦСС библиотеке за анимацију постале су невероватно моћне у новом оквиру, заједно са ЈаваСцрипт библиотекама посебно дизајнираним за векторску анимацију у прегледачу.

---

---

Данас ћемо гледати мо.јс, једно од новије деце у блоку за стварање прелепих слика из кода. Покрићемо неколико основних функција, пре него што направимо корисничку реактивну серију анимација која ствара прелепе обрасце.

Унесите Мо.јс

Мо.јс је библиотека за лако креирање графике покрета за веб. Дизајнирано је тако да олакша стварање лепих ствари онима који нису превише упућени у кодекс, док програмерима ветеранима омогућава да открију уметничку страну за коју нису ни знали да је имају. Као што му име говори, заснован је на популарном програмском језику ЈаваСцрипт, иако је имплементиран на такав начин да свако може лако да савлада основе.

Пре него што наставимо даље, погледајмо шта ћемо данас створити:

Користићемо ЦодеПен за данашњи пројекат, будући да нам омогућава да радимо на свему у истом прозору прегледача. Ако желите, можете радити у уредник по вашем избору уместо тога. Ако желите да прескочите водич корак по корак, цео код је доступан овде.

Подесите нову оловку и дочекаће вас овај екран:

---

---

Пре него што почнемо, мораћете да унесете неколико измена. Кликните на Подешавања у горњем десном углу и идите до ЈаваСцрипт таб.

Користићемо Бабел као наш предпроцесор кода, па изаберите ово из падајућег менија. Бабел чини ЈаваСцрипт мало лакшим за разумевање, заједно са пружањем ЕЦМАСцрипт 6 подршка за старије прегледаче. Ако не знате шта то значи, не брини , само ће нам овде мало олакшати живот.

---

---

Такође морамо да увеземо библиотеку мо.јс у пројекат. Учините то тако што ћете тражити мо.јс у Додајте спољне скрипте/оловке текстуалног упита и одабиром.

Када су ове две ствари на месту, кликните Сними и затвори . Спремни смо за почетак!

Основни облици са Мо.јс

Пре него што почнемо са графиком, учинимо нешто у вези са том заслепљујућом белом позадином у окну за приказ. Промените својство боје позадине уписивањем овог кода у ЦСС хлеб.

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

Креирање облика је једноставан процес, а концепт иза њега покреће читаву библиотеку. Подесимо подразумевани облик круга. Унесите овај код у ЈС хлеб:

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

Овде смо створили цонст вредност са именом редЦирц и доделио га а нови мојс.облик . Ако сте потпуно нови у кодирању, обратите пажњу на редослед заграда овде и не заборавите тачку -зарез на крају!

До сада нисмо прошли ниједан параметар осим исСховСтарт: труе , што значи да ће се појавити на екрану чак и пре него што му доделимо било какво кретање. Видећете да је поставио ружичасти круг у центар екрана:

Овај круг је подразумевани Облик за мо.јс. Овај облик можемо лако променити додавањем линије нашем коду:

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

Променом радијус власништво, и додавање непрозирност и трајање својства, дали смо упутства за облик које треба спровести током времена. Су Делта објеката, који садрже информације о почетку и завршетку ових својстава.

Приметићете да се још ништа не дешава. То је зато што нисмо додали .игра() функцију да му кажемо да изврши наша упутства. Додајте га између заграда и тачке и запете и видећете да ваш круг оживљава.

Сада смо негде стигли, али да то учинимо заиста посебним, погледајмо још неколико дубљих могућности.

Наручивање и олакшавање помоћу Мо.јс -а

Тренутно, чим се круг појави, почиње да бледи. Ово ће савршено функционисати, али било би лепо имати мало више контроле.

То можемо учинити помоћу .онда() функција. Уместо да мењамо радијус или непрозирност, учинимо да наш облик остане тамо где почиње, пре него што се промени након одређеног времена.

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, такође смо доделили олакшавање засновано на синусном таласу са грех.ин . Мо.јс има разне уграђене криве за ублажавање, са могућношћу да напредни корисници додају своје. У овом случају, скала се временом дешава према синусном таласу који се нагиње нагоре.

За визуелни преглед различитих кривина, погледајте еасингс.нет . Комбинујте ово са строкеВидтх променом на 0 током нашег задатог трајања, а ви ћете имати много динамичнији ефекат нестајања.

Облици су основа за све у Мо.јс -у, али они су само почетак приче. Погледајмо Рафали .

Пуцање потенцијала у Мо.јс -у

ДО Бурст ин Мо.јс је збирка облика који извиру из централне тачке. Ово ћемо учинити основом наше готове анимације. Подразумевани низ можете позвати на исти начин на који радите облик. Направимо варнице:

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 ових облика сада имају иста својства. Почиње да изгледа прилично добро! Ово је прва ствар коју ће корисник видети када кликне мишем.

Већ можемо видети да је црвени потез нашег почетног слова редЦирц облик се предуго задржава. Покушајте да промените његово трајање тако да се обе анимације уклапају. Требало би да изгледа овако:

Још увек нисмо завршили са нашом анимацијом, али хајде да одвојимо тренутак да је учинимо кориснички реактивном.

Главни догађај

Користићемо управљач догађајима за покретање наших анимација на месту на које корисник кликне. На крају блока кода додајте ово:

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

Две функције које овде називамо су .туне () и .реплаи () . Функција понављања је слична функцији репродукције, мада специфицира да би анимација требало да почне из почетка сваки пут када се на њу кликне.

Тхе мелодија функција преноси вредности нашем објекту тако да можете променити ствари када се активира. У овом случају преносимо координате странице на које је кликнут миш и према томе додељујемо положај к и и нашој анимацији. Сачувајте код и покушајте да кликнете на екран. Приметићете неколико проблема.

Прво, наша почетна анимација се и даље приказује на средини екрана, чак и ако корисник ништа не кликне. Друго, анимација се не покреће у тачки миша, већ са помаком надоле и удесно. Лако можемо поправити обе ове ствари.

Наш облик и прасак имају .игра() на крају одговарајућих блокова кода. Ово нам више не треба као .реплаи () се позива у обрађивачу догађаја. Можете уклонити .плаи () из оба блока кода. Из истог разлога можете уклонити исСховСтарт: труе такође, пошто нам више не треба да се приказује на почетку.

Да бисмо решили проблем позиционирања, мораћемо да поставимо вредности положаја за наше објекте. Као што ћете запамтити из нашег првог облика, мо.јс их подразумевано ставља у центар странице. Када се ове вредности комбинују са положајем миша, он ствара помак. Да бисте се решили овог помака, једноставно додајте ове линије у оба редЦирц и варнице објекти:

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

Овде би све већ требало бити прилично познато, мада постоји неколико нових ствари. Приметићете да смо уместо да облик дефинишемо као троугао, назвали а полигон пре додељивања броја бодова има 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
}
});

Главна промена овде је што смо додали а одлагање од 500 мс, тако да рафал неће почети тек након троуглова. Променом неколико вредности, идеја је била да се рафал окрене у супротном смеру од троуглова. Срећном несрећом, до тренутка када се појављују петерокути, због стробоскопског ефекта троуглова изгледа као да се заједно окрећу.

Мала случајност

Додајмо ефекат који користи случајне вредности. Направите рафал са овим својствима:

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

Тхе Генериши() функција израчунава свеже случајне вредности сваки пут када се догађај позове. Без овога, облик би изабрао случајне вредности при првом позивању и наставио би да користи те вредности за сваки следећи позив. Ово би потпуно покварило ефекат, па обавезно додајте ово!

Можете користити насумичне вредности за скоро сваки елемент мо.јс објеката, а они су једноставан начин за прављење јединствених анимација.

бесплатни филмови без регистрације или преузимања

Насумичност, међутим, није једини начин додавања динамичких покрета анимацијама. Погледајмо тетурати функција.

Запањујуће линије

Да покаже како се тетурати функција функционише, направићемо нешто попут Цатхерине Вхеел -а. Направите нови низ са овим параметрима:

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) функција. Ово додаје 10 мс кашњења између емисије сваког детета, дајући му ефекат предења који тражимо.

Функција одступања не користи никакве случајне вредности, па вам неће требати Генериши функција овај пут у руковатељу догађаја. Погледајмо све што имамо до сада на делу:

Могли бисмо лако да се зауставимо овде, али хајде да додамо још један рафал да заокружимо овај пројекат.

Паметни квадрати

За овај последњи низ, направимо нешто користећи правоугаонике. Додајте овај објекат свом коду и слушачу догађаја:

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

Овај објекат не додаје ништа ново ономе на чему смо већ радили данас, укључен је само да би показао како се сложени геометријски обрасци могу лако створити помоћу кода.

Ово није био планирани исход овог објекта када је креиран у фазама тестирања писања овог водича. Када је код прошао, постало је јасно да сам налетео на нешто далеко лепше него што сам могао намерно да направим!

Са додавањем овог завршног објекта, завршили смо. Погледајмо целу ствар на делу.

Мо.јс: Моћан алат за веб анимације

Овај једноставан увод у мо.јс покрива основне алате потребне за стварање прекрасних анимација. Начин на који се ти алати користе може створити готово све, а за многе задатке веб библиотеке су једноставна алтернатива коришћењу Пхотосхоп , Афтер Еффецтс или други скупи софтвер.

Ова библиотека је корисна за оне који раде и на програмирању и на веб развоју, руковање догађајима које се користи у пројекту лако се може користити за креирање реактивних дугмади и текста на веб страницама или у апликацијама. Забавите се с тим: нема грешака, само срећне несреће!

Објави Објави Твеет Емаил Да ли је вредно надоградње на Виндовс 11?

Виндовс је редизајниран. Али да ли је то довољно да вас убеди да пређете са Виндовс 10 на Виндовс 11?

Прочитајте следеће Повезане теме

• Програмирање
• ЈаваСцрипт

О аутору Иан Буцклеи(216 објављених чланака)

Иан Буцклеи је слободни новинар, музичар, извођач и видео продуцент који живи у Берлину, Немачка. Кад не пише или је на сцени, петља са „уради сам“ електроником или кодом у нади да ће постати луди научник.

Више од Иана Буцклеија

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили