Home-theater-designers
Ако търсите стартирайте свой собствен уебсайт , красиво изглеждащите анимации могат да я накарат да блести. Има много начини за постигане на това, от просто създаване на анимиран GIF от парче съществуващ филм, до това да се научите да правите свои собствени от нулата със софтуер като Блендер или Мая .
Налични са и библиотеки за създаване на анимации програмно. Исторически уеб кодерите са използвали jQuery за създаване на прости анимации, но с развитието на мрежата и HTML5 стана новият стандарт, се появиха нови опции. CSS библиотеките за анимация станаха невероятно мощни при новата рамка, заедно с JavaScript библиотеките, проектирани специално за векторна анимация в браузъра.
Днес ще разгледаме mo.js, едно от най -новите деца в блока за създаване на красиви изображения от код. Ще разгледаме няколко основни функции, преди да създадем потребителска реактивна анимационна поредица, която създава красиви модели.
Въведете Mo.js
Mo.js е библиотека за лесно създаване на графики за движение в мрежата. Той е създаден, за да направи създаването на красиви неща просто за тези, които не са прекалено разбираеми в кода, като същевременно позволява на програмистите -ветерани да открият артистична страна, която никога не са подозирали, че имат. Както подсказва името му, той се основава на популярния език за програмиране на JavaScript, въпреки че е реализиран по такъв начин, че всеки може лесно да научи основите.
Преди да продължим по -нататък, нека да разгледаме какво ще създадем днес:
Ще използваме CodePen за днешния проект, тъй като ни позволява да работим върху всичко в един и същ прозорец на браузъра. Ако предпочитате, можете да работите в редактор по ваш избор вместо. Ако искате да пропуснете урок стъпка по стъпка, пълният код е достъпен тук.
Настройте нова писалка и ще бъдете посрещнати с този екран:
Преди да започнем, ще трябва да направите няколко промени. Кликнете върху Настройки в горния десен ъгъл и отидете до JavaScript раздел.
Ще използваме Вавилон като наш предварително обработващ код, затова изберете това от падащото меню. Babel прави JavaScript малко по -лесен за разбиране, заедно с предоставянето ECMAScript 6 поддръжка за по -стари браузъри. Ако не знаете какво означава това, не се притеснявай , това просто ще направи живота ни малко по -лесен тук.
Също така трябва да импортираме библиотеката mo.js в проекта. Направете това, като потърсите mo.js в Добавете външни скриптове/химикалки текстово подкана и го изберете.
С тези две неща на място щракнете Запази и затвори . Готови сме да започнем!
Основни форми с Mo.js
Преди да започнем с графиките, нека да направим нещо за този ослепително бял фон в прозореца за изглед. Променете свойството на цвета на фона, като напишете този код в CSS хляб.
body{
background: rgba(11,11,11,1);
}Създаването на форма е прост процес и концепцията зад нея управлява цялата библиотека. Нека зададем форма на кръг по подразбиране. Въведете този код в JS хляб:
const redCirc = new mojs.Shape({
isShowStart:true
});Тук създадохме const стойност с името redCirc и го възложи на а нов mojs.Shape . Ако сте съвсем нов в кодирането, обърнете внимание на реда на скобите тук и не забравяйте запетая в края!
Досега не сме подавали никакви параметри, освен isShowStart: true , което означава, че ще се появи на екрана дори преди да сме му задали някакво движение. Ще видите, че е поставил розов кръг в центъра на екрана:
Този кръг е по подразбиране Форма за mo.js. Можем лесно да променим тази форма, като добавим ред към нашия код:
const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});За да добавим още свойства към обект, използваме запетая, за да го разделим. Тук добавихме a форма имот и го определи като a 'право' . Запазете писалката си и вместо това ще видите формата по подразбиране да се промени в квадрат.
Този процес на предаване на стойности на Форма обект е как ги персонализираме. В момента имаме квадрат, който всъщност не прави много. Нека се опитаме да анимираме нещо.
Основи на движението
За да получите нещо, което изглежда малко по -впечатляващо, нека поставим кръг, с червен шрифт около него и без запълване вътре.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});Както можете да видите, ние също сме задали a ширина стойност на хода и а радиус за кръга. Нещата вече започват да изглеждат малко по -различно. Ако формата ви не се актуализира, уверете се, че не сте пропуснали запетаи или единични кавички 'мрежа' или 'нито един' и се уверете, че сте кликнали запишете в горната част на страницата.
Нека добавим анимация към това. В горния пример този червен кръг се появява там, където потребителят кликва, преди да избледнее навън. Един от начините, по които можем да направим това да се случи, е чрез промяна на радиуса и непрозрачността с течение на времето. Нека променим кода:
radius: {15:30},
opacity: {1:0},
duration:1000Чрез промяна на радиус собственост и добавяне непрозрачност и продължителност свойства, дадохме инструкции за формата, които да изпълняваме с течение на времето. Това са Делта обекти, съдържащи начална и крайна информация за тези свойства.
Ще забележите, че все още нищо не се случва. Това е така, защото не сме добавили .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 ms, преди да извършите всичко, което поставим в .тогава() функция. Нека добавим някои инструкции между скобите:
//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500Този код въвежда друга важна част от анимацията. Където сме инструктирали мащаб за да промените от 1 на 2, ние също сме присвоили облекчаване на базата на синусоида с sin.in . Mo.js има вградени различни криви за облекчаване, с възможност за напреднали потребители да добавят свои собствени. В този случай скалата във времето се случва според синусоида, извита нагоре.
За визуално изтичане на различни криви, проверете easings.net . Комбинирайте това с strokeWidth промяна на 0 през зададената от нас продължителност и имате много по -динамичен изчезващ ефект.
Формите са основата за всичко в Mo.js, но те са само началото на историята. Нека да разгледаме Изблици .
Избухване с потенциал в Mo.js
ДА СЕ Избухвам в Mo.js е колекция от форми, излъчвани от централна точка. Ще направим това в основата на нашата завършена анимация. Можете да извикате избухване по подразбиране по същия начин, по който правите фигура. Нека направим няколко искри:
const sparks = new mojs.Burst({
}).play();Можете да видите, просто като добавите празно Избухвам обект и му казваме да играе, получаваме по подразбиране burst ефект. Можем да повлияем на размера и завъртането на пакета, като анимираме неговия радиус и ъгъл Имоти:
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();
});Двете функции, които наричаме тук, са .tune () и .replay () . Функцията за повторение е подобна на функцията за възпроизвеждане, въпреки че посочва, че анимацията трябва да започва отново от началото всеки път, когато се щракне върху нея.
The мелодия функцията предава стойности на нашия обект, така че можете да промените нещата, когато се задейства. В този случай преминаваме в координатите на страницата, където е щракната мишката, и съответно присвояваме позицията x и y на нашата анимация. Запазете кода си и опитайте да щракнете върху екрана. Ще забележите няколко проблема.
Първо, нашата първоначална анимация все още се показва в средата на екрана, дори ако потребителят не кликне върху нищо. Второ, анимацията не се задейства в точката на мишката, а се измества надолу и надясно. Можем лесно да поправим и двете неща.
Нашата форма и взрив имат .play () в края на съответните им кодови блокове. Вече не се нуждаем от това .replay () се извиква в манипулатора на събития. Можете да премахнете .play () от двата блока код. По същата причина можете да премахнете isShowStart: true също, тъй като вече нямаме нужда от това да се показва в началото.
За да разрешим проблема с позиционирането, ще трябва да зададем стойности на позицията за нашите обекти. Както ще помните от първата ни форма, 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
}
});Основната промяна тук е, че добавихме 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)',
}
});Този взрив ще създаде линии, които започват червено и избледняват до прозрачност, свивайки се с течение на времето. Това, което прави този компонент интересен, е, че случайни стойности се използват за определяне на някои от неговите свойства.
The степенна смяна дава на обекта -дете начален ъгъл. Чрез рандомизиране на това, той дава напълно различен изблик при всяко щракване. Случайните стойности се използват и за радиус и забавяне функции, които да добавят към хаотичния ефект.
Ето ефекта сам по себе си:
Тъй като тук използваме случайни стойности, трябва да добавим допълнителен метод към нашия манипулатор на събития за обекта:
redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();The генериране () функцията изчислява нови случайни стойности всеки път, когато се извика събитието. Без това формата ще избере случайни стойности при първото извикване и ще продължи да използва тези стойности за всяко следващо обаждане. Това би разрушило напълно ефекта, така че не забравяйте да добавите това!
Можете да използвате произволни стойности за почти всеки елемент от mo.js обекти и те са лесен начин за създаване на уникални анимации.
можете ли да използвате messenger без facebook
Случайността обаче не е единственият начин да добавите динамични движения към анимациите. Нека да разгледаме залитане функция.
Зашеметяващи линии
За да покажете как залитане функцията работи, ще направим нещо малко като колело на Екатерина. Създайте нов пакет с тези параметри:
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 ms забавяне между емисиите на всяко дете, което му дава въртящия ефект, който търсим.
Функцията за залитане не използва никакви случайни стойности, така че няма да имате нужда от генерира този път в манипулатора на събития. Нека видим всичко, което имаме досега в действие:
Лесно бихме могли да спрем дотук, но нека просто добавим още един изблик, който да завърши този проект.
Интелигентни квадрати
За този последен пакет, нека направим нещо с помощта на правоъгълници. Добавете този обект към вашия код и слушател на събития:
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 обхваща основните инструменти, необходими за създаването на красиви анимации. Начинът, по който се използват тези инструменти, може да създаде почти всичко, а за много задачи уеб библиотеките са проста алтернатива на използването Photoshop , After Effects или друг скъп софтуер.
Тази библиотека е полезна за тези, които работят както в програмирането, така и в уеб разработката, обработката на събития, използвана в проекта, може лесно да се използва за създаване на реактивни бутони и текст на уебсайтове или в приложения. Забавлявайте се с него: няма грешки, само щастливи инциденти!
Дял Дял Туит електронна поща Струва ли си да надстроите до Windows 11?Windows е преработен. Но достатъчно ли е това, за да ви убеди да преминете от Windows 10 към Windows 11?
Прочетете Напред Свързани теми- Програмиране
- JavaScript
Иън Бъкли е журналист на свободна практика, музикант, изпълнител и видео продуцент, живеещ в Берлин, Германия. Когато не пише или е на сцената, той се занимава с „направи си сам“ електроника или код с надеждата да стане луд учен.
Още от Иън БъклиАбонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!
Щракнете тук, за да се абонирате