Якщо ви хочете запустити свій власний сайт, красиві анімації можуть зробити його сяючим. Є кілька способів домогтися цього, від простого створення анімованого GIF-файлу з фрагмента існуючого фільму до навчання створенню власного з нуля за допомогою таких програм, як Blender або Maya.
Є також бібліотеки, доступні для створення анімації програмно. Історично веб-кодери використовували jQuery для створення простих анімацій, але в міру розвитку мережі, і HTML5 став новим стандартом, з'явилися нові опції. Бібліотеки CSS для анімації стали неймовірно потужними в новому середовищі, поряд з бібліотеками JavaScript, розробленими спеціально для векторної анімації в браузері.
Сьогодні ми розглянемо mo.js, одного з нових хлопців у блоці для створення красивих зображень з коду. Ми розглянемо кілька основних функцій, перш ніж створювати серію анімації, що реагує на користувача, яка створює красиві шаблони.
Введіть Mo.js
Mo.js - це бібліотека для легкого створення графіки для Інтернету. Він призначений для того, щоб зробити створення красивих речей простим для тих, хто не дуже розбирається в коді, і в той же час дозволяє досвідченим програмістам відкрити для себе творчу сторону, якої вони ніколи не знали. Як випливає з назви, він заснований популярною мовою програмування JavaScript, хоча і реалізований таким чином, що будь-хто може легко освоїти основи.
Перш ніж йти далі, давайте подивимося, що ми збираємося створити сьогодні:
Ми будемо використовувати CodePen для сьогоднішнього проекту, оскільки він дозволяє нам працювати над усім в одному вікні браузера. Якщо ви бажаєте, ви можете замість цього працювати в редакторі за вашим вибором. Якщо ви хочете пропустити підручник пошти, повний код доступний тут.
Встановіть нове перо, і ви побачите цей екран:
Перш ніж ми почнемо, вам потрібно зробити пару змін. Натисніть значок «Параметри» у верхньому правому куті та перейдіть на вкладку JavaScript.
Ми будемо використовувати Babel в якості нашого препроцесора коду, тому виберіть його з випадаючого меню. Babel робить JavaScript трохи легше для розуміння, поряд з наданням ECMAScript 6 підтримки старих браузерів. Якщо ви не знаєте, що це означає, не хвилюйтеся, це тільки полегшить наше життя.
Нам також потрібно імпортувати бібліотеку mo.js в проект. Зробіть це, виконавши пошук mo.js у текстовому вікні Add External Scripts/Pens і вибравши його.
Встановивши ці дві речі, натисніть Зберегти і закрити. Ми готові почати!
Основні форми з 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' });
Щоб додати більше властивостей до об'єкта, ми використовуємо ком, щоб відокремити його. Тут ми додали властивість shape і визначили її як «прямокутник». Збережіть ручку, і ви побачите, що фігура за замовчуванням зміниться на квадрат.
Цей процес передачі значень в об'єкт Shape - це те, як ми їх налаштовуємо. Прямо зараз у нас є квадрат, який насправді мало що робить. Давайте спробуємо анімувати що-небудь.
Основи руху
Щоб отримати щось, що виглядає трохи більш вражаюче, давайте створимо коло з червоним штрихом навколо нього і без заливки всередині.
const redCirc = new mojs. Shape({ isShowStart:true, stroke:'red', strokeWidth:5, fill:'none', radius:15 });
Як ви можете бачити, ми також призначили значення ширини для обведення і радіус для кола. Речі вже починають виглядати трохи інакше. Якщо ваша фігура не оновлюється, переконайтеся, що ви не пропустили ні коми, ні одинарні лапки навколо «червоного» або «жодного», і переконайтеся, що ви натиснули «Зберегти» вгорі сторінки.
Давайте додамо анімацію до цього. У наведеному вище прикладі це червоне коло з'являється там, де користувач клацає, а потім зникає назовні. Один із способів зробити це - змінити радіус і непрозорість з плином часу. Давайте змінимо код:
radius: {15:30}, opacity: {1:0}, duration:1000
Змінюючи властивість radius і додаючи властивості непрозорості та тривалості, ми дали інструкції форми, які потрібно виконати з плином часу. Це об'єкти Delta, що містять початкову та кінцеву інформацію для цих властивостей.
Ви помітите, що поки нічого не відбувається. Це тому, що ми не додали функції play (), щоб вона виконувала наші інструкції. Додайте це між кінцевими дужками і крапкою з комою, і ви повинні побачити, як ваше коло оживає.
Зараз ми чогось домагаємося, але щоб зробити його дійсно особливим, давайте розглянемо ще кілька можливостей.
Замовлення і полегшення з Mo.js
Прямо зараз, як тільки з'являється коло, він починає зникати. Це буде прекрасно працювати, але було б непогано мати трохи більше контролю.
Ми можемо зробити це за допомогою функції .then (). Замість того, щоб змінити радіус або непрозорість, давайте залишимо нашу форму там, де вона починається, перш ніж змінювати через заданий проміжок часу.
const redCirc = new mojs. Shape({ isShowStart:true, stroke:'red', strokeWidth:5, fill:'none', radius: 15, duration:1000 }).then({ //do more stuff here }).play();
Тепер наша фігура з'явиться зі значеннями, які ми їй присвоїли, почекайте 1000 мс, перш ніж виконувати що-небудь, що ми додали в функцію .then (). Давайте додамо кілька інструкцій у дужках:
//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 і попросивши його відтворити, ми отримуємо ефект 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 і sparks до цього слухача.
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 (). Функція відтворення аналогічна функції відтворення, хоча вона вказує, що анімація повинна починатися заново з самого початку при кожному натисканні.
Функція налаштування передає значення нашому об'єкту, щоб ви могли щось змінити при його спрацьовуванні. У цьому випадку ми передаємо координати сторінки, де була натиснута миша, і відповідно призначаємо координати x і y нашої анімації. Збережіть свій код і спробуйте натиснути на екран. Ви помітите кілька проблем.
По-перше, наша початкова анімація все ще відображається в середині екрану, навіть якщо користувач нічого не натискає. По-друге, анімація не запускається в точці миші, а зміщується вниз і вправо. Ми можемо легко виправити обидві ці речі.
Наша форма і сплеск мають .play () в кінці відповідних блоків коду. Нам це більше не потрібно, так як .replay () викликається в обробнику подій. Ви можете видалити play () з обох блоків коду. З тієї ж причини ви також можете вилучити isShowStart: true, оскільки нам більше не потрібно показувати його на початку.
Щоб виправити проблему позиціонування, нам потрібно встановити значення положення для наших об'єктів. Як ви пам'ятаєте з нашої найпершої фігури, mo.js за замовчуванням поміщає їх у центр сторінки. Коли ці значення об'єднуються з розташуванням миші, створюється зсув. Щоб позбутися цього зсуву, просто додайте ці рядки в об'єкти redCirc і sparks:
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)', } }); -во 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();
Функція 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 } }); в 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 дітей з червоними або помаранчевими лініями. Різниця тут у тому, що ми передаємо властивість delay функції stagger (10). Це додає 10 мс затримки між викидами кожної дитини, надаючи ефект обертання, який ми шукаємо.
Функція stagger не використовує жодних випадкових значень, тому цього разу вам не потрібно буде створювати функцію в обробнику подій. Давайте подивимося, що у нас є в дії:
Ми могли б легко зупинитися тут, але давайте просто додамо ще один сплеск, щоб завершити цей проект.
Розумні квадрати
Для цього останнього сплеску давайте зробимо що-небудь, використовуючи прямокутники. Додайте цей об'єкт у ваш код і прослуховувач подій:
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 або іншого дорогого програмного забезпечення.
Ця бібліотека корисна для тих, хто працює як в
