Как да използвам Velocity за лесно добавяне на анимации

Движението привлича вниманието ни; това е вроден механизъм за оцеляване, който е служил добре на нашите предци в продължение на хиляди години. Позволяваше им да открият хищници, които им се прикриват. В днешно време това е предимно остатъчен инстинкт, който ние уеб дизайнерите използваме, за да привлечем вниманието и интереса на потребителите на нашите сайтове.

Добавянето на анимация и преходи като непрозрачност избледнява, промени в цвета, мащабиране и 3D движение, превръща иначе плоския, статичен колаж от думи и изображения в динамичен и интересен сайт. Абсолютно трябва да добавяте анимации към дизайна на уебсайта си - когато се прилага пестеливо и с цел, това ги прави по-добри.



wd паспорта ми ултра срещу паспорта ми

Но как можете да направите това точно? Има два начина за добавяне на анимация към сайт, с CSS и с JavaScript.



CSS е идеален за малки сайтове, които не изискват много персонализирано кодиране, и за опростени потребителски взаимодействия, като малки стилистични промени за състоянията на задържане на елементите. (Или ако просто нямате желание да правите програмиране!)

За всичко отвъд тези прости взаимодействия, най-добрият начин за добавяне на анимация към даден сайт е с JavaScript, а най-добрата модерна анимационна библиотека за това е Velocity.js .



Тази статия е уникална с това, че ще използва основен подход към изучаването на уеб анимация. Ако сте уеб дизайнер, който не се занимава много с JavaScript, но винаги е искал силата на усъвършенстваната анимация, продължете да четете.

Какво е Velocity.js?

Кликнете върху изображението, за да видите демонстрацията на Velocity.js

Кликнете върху изображението, за да видите демонстрацията на Velocity.js

Velocity е безплатна, лека библиотека, която ви позволява лесно да добавяте анимации към вашите сайтове, вариращи от най-простата анимация до най-сложната. Скоростта превъзхожда всички останали анимационни библиотеки, лесна е за използване и имитира синтаксиса на най-популярната JavaScript библиотека jQuery. Той също така се поддържа добре от всички браузъри и устройства и е приет от големи компании като Uber и WhatsApp .



Скоростта се използва най-добре с jQuery, но не е задължително. Какво е jQuery? jQuery е JavaScript библиотека, предназначена да опрости избора и манипулирането на HTML елементи. На практика се прие, че jQuery се използва в повечето уеб проекти - това е толкова популярно.

jQuery има свои собствени инструменти за анимация, изложени чрез своята функция „анимиране“, но поради това колко монолитен е jQuery, той създава разкъсани анимации. Освен това не е толкова богат на функции, колкото Velocity. Velocity ви позволява да се възползвате от възможността за избор на елементи на jQuery и да пропуснете миналите недостатъци на анимацията на jQuery. Разликата, особено при създаването на лесен работен процес за анимация, е нощ и ден.

Velocity предлага някои големи предимства пред CSS и jQuery базирани анимации, които ще разгледам, след като преминем през основите на използването му. За да ви дадат предварителен преглед на това, което предстои, тези предимства включват превъртане на анимации, обръщане на анимация, движение на базата на физика и верига на анимация. Някои доста готини неща.

Засега нека да започнем как да го използваме.

Как да използвам Velocity?

Първата стъпка е да изтеглите кода от Уебсайт за скорост (копирайте и поставете кода в текстов редактор и го запазете като 'velocity.min.js'). Като алтернатива можете да го изтеглите директно във вашия HTML (както е показано в примера на кода по-долу).

Така или иначе, включете файла Velocity с помощта на таг преди затварящия таг на тялото на вашия документ и преди JavaScript файла, в който ще кодирате ('script.js'):

… …

Забележка : Ако използвате jQuery, уверете се, че сте включили jQuery преди Velocity. Скоростта се адаптира, като се има предвид наличието на jQuery.

След като кодът бъде включен в таг на скрипт, можете да започнете да използвате скорост () функция във вашия файл 'script.js'.

Как да стартирам тази функция?

Използвате функцията Velocity за елемент jQuery (ако приемем, че използвате jQuery). Например, да кажем, че имате следния абзац, който искате да анимирате:

This is an example element you can select and animate.

Можем да го изберем с jQuery с идентификатора на абзаца („пример“) и да го съхраним в променлива:

var $element = $('#example');

Това създава обект на елемент jQuery с име $ element, който представлява този абзац. Вече можем да изпълняваме извиквания на функция за скорост на този елемент, като използваме тази променлива $ element:

$element.velocity( … some command here … );

Добре, и какви са аргументите, които приема?

Аргументи

Скоростта приема един или повече аргументи. Първият аргумент е задължителен. Може да е името на някой от предварително дефинирани команди (примери за следване) или обект с различни CSS свойства, които трябва да бъдат анимирани.

// Object defining the animation's final values of width (50%), and left (500px) $element.velocity({ width: '500px', left: '500px' });

Забележка: Редът на свойствата в обект от данни е без значение. Всичко в анимацията се случва по едно и също време.

Вторият аргумент, който не е задължителен, също е обект. Той съдържа опции за анимация като продължителност, облекчаване и забавяне и завършване (функция, която се изпълнява след завършване на анимацията):

// Animates an element to a width of 300px over 500ms after a 1000ms delay. $element.velocity({ width: '300px' }, { duration 500, delay: 1000 });

За разлика от CSS, където можете да предавате множество числови стойности в CSS свойство като margin ( поле: „10px 5px 8px 12px“ ), с Velocity трябва да използвате една стойност за CSS свойство. Следователно трябва да зададете всеки компонент поотделно: {marginRight: '10px', marginTop: '5px' ...} .

Това може да изглежда като недостатък, но всъщност е от полза. Това не само е по-четливо и изрично, но също така ви позволява да задавате отделни типове улеснения за всяко под-свойство, вместо да бъдете принудени да имате един тип облекчаване за всички тях. Това ви дава директен контрол върху повече части от вашата анимация!

Забележка: CSS свойства, съдържащи множество думи ( поле-ляво и Цвят на фона ) не може да бъде тире, но трябва да бъде написано с камила ( marginLeft и Цвят на фона ).

Стойности на имоти

Ако не предоставите тип единица, Velocity ще приеме такава за вас (обикновено ms, px и deg). Въпреки това бих препоръчал да бъдете изрични, за да можете да различавате типовете единици с един поглед всеки път, когато вие или ваш колега погледнете назад през вашия код. Ако стойността съдържа нещо различно от числова стойност (% или букви), тогава трябва да използвате кавички.

// Okay, only numerical value $element.velocity('scroll', { duration: 500 }) // Okay, uses quotes $element.velocity('scroll', { duration: '500ms' }) // Not okay, contains 'ms' without quotes $element.velocity('scroll', { duration: 500ms })

Какъв е този „облекчаващ“ бизнес?

Досега съм използвал думата „облекчаване“ и може би сте объркани, какво означава това. Улесненията определят скоростта на анимацията на различни етапи през цялото времетраене. Например, облекчаването на „улеснение“ постепенно се ускорява в началото на анимацията и след това остава постоянно, докато приключи. Облекчаването на „облекчаване“ започва с линейна скорост и постепенно се забавя близо до края на анимацията. 'Линейното' облекчаване има постоянна скорост през цялото времетраене и изглежда много дразнещо и роботизирано.

За удобство посочвате облекчаване с опцията „облекчаване“:

// Animate an element to a width of 500px with an easing of 'ease-in-out' $element.velocity({ width: 500 }, { easing: 'ease-in-out' });

Улесненията стават много по-сложни, но за краткост ще спра до тук. Прочетете скоростта документация за повече информация.

Оковаване

Създаването на поредица от последователни анимации в CSS изисква ръчно изчисляване на закъсненията и продължителността на времето за всяка отделна анимация. И ако някоя от тези стъпки трябва да бъде променена, всички анимации, следващи тази стъпка, също трябва да бъдат преизчислени и променени.

Скоростта позволява просто свързване на анимации една след друга, само чрез извикване на функцията за скорост една след друга:

$element // Animates the element to a height of 300px over 1000ms .velocity({ height: 300 }, { duration: 1000 }) // Animates the element to a left position of 200px over 600ms after the width is finished animating .velocity({ top: 200 }, { duration: 600 }) // Fades the element over 200ms out after it is done moving .velocity({ opacity: 0 }, { duration: 200 });

Ето пример за Codepen на вериги.

Забележка: Ще забележите, че само последното повикване за скорост има ';' в края на реда. Това е изключително важно. За да обедините анимациите във вериги, всички повиквания „скорост“ трябва да се извършват заедно на един и същ елемент и не можете да прекратите командния ред с точка и запетая. JavaScript игнорира празното пространство, така че тези обаждания ще изглеждат така: $ element.velocity (...). скорост (...). скорост (...) .

Назад към характеристиките

Това трябва да ви даде поглед към скоростта и как да я използвате. Сега, когато няма да бъдете претоварени, нека се върнем към описването на онези страхотни предимства, които предоставя над CSS и jQuery.

Превъртане на страницата

Сайтовете с една страница са тенденция в уеб дизайна сега, където сайтът е разделен на секции, а не на отделни страници. В резултат на това щракването върху навигационната връзка просто кара страницата да превърта надолу до съответния раздел. Без анимация това е моментален и дразнещ скок, който предоставя на потребителя никакъв контекст къде се намира това съдържание спрямо останалата част от страницата.

CSS не може да извършва превъртане, така че това е едно от най-популярните приложения за JS анимации.

За да извършите превъртане с Velocity, просто стартирайте функцията 'velocity' с командата 'scroll' на елемента, до който искате да превъртите:

$element.velocity('scroll', { duration: 1200 });

Това извикване кара браузъра да превърта надолу до горния ръб на избрания елемент над 1200ms. Само с jQuery това би било много по-сложна, многоредова функция. Ще ви спестя главоболието, предизвикано от объркване, като не го включвам тук.

Ето пример на Codepen за превъртане.

Обръщане на анимация

В jQuery, за да се върнете обратно към първоначалното състояние на елемента преди да започне анимацията, трябва ръчно да анимирате свойствата му обратно до първоначалните им стойности. Например:

С jQuery:

как да превърна чертеж във вектор
// Animate a 100px tall element to a height of 200px over 500ms $element.animate({ height: '200px' }, { duration: 500 }); // Animate the element back to its original height value of 100px over 500ms $element.animate({ height: '100px' }, { duration: 500 });

С Velocity обаче просто трябва да изпълните обратната команда:

// Animate a 100px tall element to a height of 200px over 500ms $element.velocity({ height: '200px' }, { duration: 500 }); // Reverse previous animation – animate back to the original height of 100px over 500ms $element.velocity('reverse');

Това предишно извикване обръща анимацията към първоначалното състояние на избрания елемент преди анимацията - няма нужда да задавате стойностите ръчно.

Ето пример на Codepen за обръщане на анимация.

Движение, базирано на физика

Реалният свят не е перфектен или плавен - нито движението в реалния свят. Той има бързи части, бавни части, тегло, импулс и триене. За разлика от CSS, вие можете да имитирате физика от реалния свят във вашите JS-анимации, правейки нещата да изглеждат по-естествени. Линейното движение изглежда роботизирано (безжизнено) и дразнещо.

За да позволи реалистично движение, Velocity приема облекчаване, базирано на физиката на пролетта. Този тип облекчаване приема масив от стойност на опън (по подразбиране: 500) и стойност на триене (по подразбиране: 20) като свой параметър (вж. Документация за скоростта за повече информация).

// Animate the selected element to a height of 200px over the default 400ms using a spring physics easing. Spring tension is set to 250, and friction is set to 10. $element.velocity({ height: '200px', { easing: [ 250, 10 ] });

Високата стойност на напрежението увеличава общата скорост и подсказване на анимацията. Високата стойност на триене кара анимацията да се забавя по-бързо, намалявайки нейната скорост близо до края на анимацията. Промяната на тези стойности ще направи всяка анимация уникална, реалистична и интересна.

Примерната анимация по-горе ще бъде бавна и твърда (ниско напрежение) и ще забавя само бавно през цялото времетраене (ниско триене).

Ето пример на Codepen, използващ пролетна физика.

Голям финал

Добре, може би имате нужда от няколко примера за реални анимации и команди за скорост. Нека започнем с анимиране на ширината и височината на кутията, комбинирайки както верига, така и обръщане на анимация, и нека използваме следния елемент на кутията:

Със следния CSS стил:

#box { width: 100px; // Set box width to 100px height: 100px; // Set box height to 100px border: solid 1px #000; // Give the box a 1px solid black border to make it visible }

Можете да анимирате нейната ширина, последвана от височината, и след това да я върнете към първоначалните й размери със следните скоростни повиквания:

// Select the box element by ID $('#box') // Animate to a width of 200px over 500ms .velocity({ width: 200px }, { duration: 500 }) // Animate to a height of 50px over 300ms directly after width stops animating .velocity({ height: 50px }, { duration: 300 }) // Animate back to original width and height after height stops animating .velocity('reverse');

И сега нека добавим една от най-полезните, но лесни за добавяне функции: създаване на навигационни връзки, които превъртат надолу до съответния раздел на страницата.

Да предположим, че имате следните навигационни ленти и раздели на страницата:

Product ... About … ... ...

Искаме да добавим анимацията за превъртане към всяко събитие за кликване на навигационната връзка (клас на „nav-link“), което ще доведе до превъртане на страницата надолу до съответния раздел на страницата, чийто идентификатор се съдържа в href на връзката.

// Attach a click event to the 'nav-link' class $('.nav-link').on('click', function() { // Grab the target page section's ID from the link's (contained within 'this') href attribute var scrollTargetID = $(this).attr('href'); // Select this element by ID using jQuery var $scrollTarget = $(scrollTargetID); // Add the scroll animation to the element $scrollTarget.velocity('scroll', { duration: 1000 }); });

Има няколко примера за това как да използвате скоростта на действителните елементи на страницата, за повече примери вижте Документация на скоростта .

Сега излезте и направете мрежата динамична

Анимациите привличат вниманието ни и вдъхват живот на иначе статичната страница, а JavaScript е най-добрият начин да ги добавите към вашите проекти - а Velocity е най-добрата библиотека за анимация на JavaScript там. Ето защо написах тази статия.

Подобряването и разширяването на CSS анимациите е ограничено от редките актуализации на CSS стандарта. С JavaScript общността с отворен код произвежда десетки нови библиотеки, плъгини и актуализации всеки ден - разширявайки хоризонтите на вашите анимации чрез изобретяването на нови инструменти.

Скоростта има много повече функции от тези, демонстрирани тук, и ви приканвам да разгледате нейните документация . Сега експериментирайте!

Думи : Нийл О'Грейди

Нийл О'Грейди е ирландско-канадски уеб разработчик, дизайнер и писател на свободна практика. Той е писал по дизайнерски теми за Блог на Webflow , и на случайни мисли върху неговата личен блог .

Като този? Прочетете тези!