У мене є кілька ілюстрацій, зроблених в Illustrator, і я планую анімувати її для веб-сайту, над яким я працюю, я чув про інструментарій Create.js зі спалахом, але це найкращий спосіб перейти чи є інший " кращий "спосіб це зробити?
Ось приклад типу анімації, на яку я прагну: http://kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
Відповіді:
Існує маса способів оживити речі в Інтернеті. Є ще більше способів створити анімацію, а потім експортувати їх до веб-анімацій.
Існує величезна користь для проектування анімації у чомусь на кшталт AfterEffects або Animate CC (які можуть імпортувати файли Illustrator та Photoshop) з очевидних причин розподілу праці та використання графічного редактора.
Зважаючи на це, ви завжди повинні, нарешті, компілювати одне з наступних :
Обмежені можливості взаємодії:
Більш повноцінна інтерактивність:
Зараз я детально розберуся в кожну.
GIF - це хороший спосіб, коли анімація не потребує великої взаємодії, не потребує розміру динамічно і порівняно невелика. Добре зроблені GIF-файли можуть бути настільки ж детальними, як ілюстрація, яку ви пов’язали, не турбуючись про ефективність. Можлива навіть незначна взаємодія за допомогою прозорого накладення, розміщеного над ним (або просто його частини).
Бічна примітка: зараз існує .gifvформат, створений Imgur, який перетворює файли GIF під час руху у відеоформати WebM або MP4. Це збільшує продуктивність, значно зменшуючи розмір кінцевого файлу. Ви можете розглянути те саме.
Ще один спосіб зберегти гладку, але дуже стильну анімацію - це використовувати спрайт. Google використовує такий підхід для таких речей, як анімація з логотипом . Ще один чудовий приклад - старий веб-сайт Олександра Енгзелла, який використовував такий підхід з анімацією на хвору типографіку. Це оптимально, коли GIF буде занадто великим, але вам не потрібно багато взаємодії.
Я також бачив дуже цікаву анімацію JavaScript, що нагадує спрайт або GIF, який використовує Google (наведіть зображення Chrome у верхньому лівому куті - воно вимагає перебування в Chrome), але натомість використовує анімаційну маску. Я здогадуюсь, що вони використовували такий підхід для обмеження загального розміру файлу.
В останні роки ми отримали чудові можливості щодо відео. <video>Елемент давайте нам налаштувати так , як ми взаємодіємо і використовувати відео , як ніколи раніше. Тепер ми можемо легко використовувати повноекранні фонові відео та робити такі речі, як перейти кадр за кадром за прокруткою . Я також зауважив, що FaceBook використовує відео для деяких простих анімацій, коли вітає користувачів на стрічці навколо спеціальних заходів. Переваги полягають у тому, що він може бути стиснутий до досить невеликого розміру файлу і може робити більш широкий спектр анімації (все, що може зробити програмне забезпечення для редагування відео). Таким чином, якщо хтось може зробити хворе відео, тоді це досить легко перетворити на фантастичне доповнення до веб-сторінки.
Очевидно, що відео не підходить для більшості анімацій в Інтернеті (наприклад, переходи кнопок тощо), тому не використовуйте їх скрізь.
З урахуванням цього, якщо ви хочете, щоб анімація створювалася динамічно, коли вам потрібна більш ніж реальна основна взаємодія, коли ви хочете створити тривимірне середовище, а в багатьох інших випадках GIF, спрайт або відео просто не будуть вирізати. Після того, як це буде вирішено, є кілька інших варіантів, найкращий з яких залежить від вашої анімації та потреб.
У мене немає статистики, але більшість веб-анімацій, яких я бачив, використовують Canvas . Полотно чудово використовувати через його продуктивність та гнучкість у створенні. Він використовує лише один елемент веб-переглядача (DOM) через те, що він просто малює - як на справжньому полотні - речі один на одного. Слідкуючи за тим, що намальовано та де за допомогою JavaScript, ми можемо створити кілька приголомшливих анімацій та навіть ігор.
Однак основним недоліком використання Canvas є його відносна складність у масштабі. Часто, залежно від анімації, звичайно, складніше зробити чутливу анімацію Canvas, ніж використовувати інші засоби. Ще один недолік полягає в тому, що наявність великого вмісту на полотні не дуже зручна для SEO, тому що елементи полотна не піддаються скануванню (можна обійти це питання, поставивши якийсь візуально прихований HTML вмісту, якщо це застосовується). У цій же примітці, такі речі, як вибір тексту для користувачів, є складними з Canvas (особливо без використання такої бібліотеки, як CreateJS).
Основне використання Canvas - це логотипи Google , які часто роблять у Canvas. Коли у них є гра чи інтерактивна анімація, вони використовують Canvas щоразу, коли я дивився. Якщо взаємодії немає, вони використовуватимуть GIF або спрайт.
Існує велика кількість чудових бібліотек, які допомагають легше працювати з Canvas, хоча це, безумовно, не потрібно в залежності від того, що потрібно зробити. Серед тих, які створені лише для Canvas, є CreateJS (на який можна експортувати з Animate CC), Pixi.js , PaperJS , KineticJS і FabricJS (розміщені в порядку мого враження про них). Плагін After Effects на ім'я Lottie (раніше BodyMovin) також може експортувати на Canvas (або SVG [1] ) і має вбудований механізм анімації.
Звичайно, ви також можете легко поєднати великі бібліотеки анімацій, наприклад, GSAP і Canvas. Для чогось настільки детального, як ілюстрація, яку ви зв'язали, я б рекомендував використовувати якийсь тип фреймворку, але для багатьох речей вони насправді не потрібні, просто корисні - особливо якщо ви вже знаєте, як використовувати один із них.
Ще один неймовірно потужний спосіб анімації речей в Інтернеті легко чуйним способом - це використання SVG ( масштабована векторна графіка ). Вони добре виконують своє призначення - будучи масштабними векторами . Багато хто вважає, що використання SVG спочатку заплутане, але більшість речей, як система координат і перетворення SVG, мають чудові статті, що їх пояснюють.
Одне з багатьох чудових речей про SVG - це те, що він може анімуватись JavaScript, чистими CSS (включаючи :hoverштати, transforms, transitions та animations) або SMIL-анімацією ("рідний" спосіб анімації речей за допомогою SVG - але IE не робить " t його взагалі підтримувати, і воно поступово знецінюється ). Я рекомендую спробувати спочатку використовувати CSS, а потім JavaScript, коли це не (відносно) просто в CSS. Для морфінгу елементів SVG практично необхідно використовувати такий інструмент, як плагін MorphSVG для GSAP, якщо ви не добре лише з частковою підтримкою, і в цьому випадку SMIL може бути прийнятним.
Оскільки елементи SVG можуть бути в будь-якій формі, їх можна використовувати для створення деяких крутих ефектів . Сара Драснер зробила кілька корисних орієнтирів продуктивності щодо анімації SVG, які показують, які способи анімації SVG найкраще враховують ефективність.
Залежно від анімації (і потреби в підтримці браузера), може бути корисна бібліотека на зразок Snap.svg або GSAP, але часто - CSS і, якщо потрібно, невеликий спеціальний JS - все, що потрібно. З урахуванням цього, плагін After Effects під назвою Lottie (раніше BodyMovin) та розширення Flash під назвою Flash 2 SVG може бути дуже корисним для створення SVG-анімації.
Для більш детальної інформації перегляньте цю пов’язану публікацію, зокрема про анімацію елементів SVG.
PS Найкраще використовувати SVG-теги в <object>тезі або вбудовані безпосередньо в <svg>XML-елемент, якщо він інтерактивний і як фонове зображення, якщо він не інтерактивний, але є й інші способи це зробити.
На мій досвід, анімації та переходи CSS насамперед слід використовувати для елементів інтерфейсу та інших базових переходів та анімацій. Навіть тоді іноді використання анімаційних файлів JS, таких як GSAP або Velocity.js для анімації / переходів інтерфейсу користувача, доречно. Це дійсно залежить від типу поведінки, яку ви хочете, і від того, чи зручно це робити в CSS.
Хоча ми можемо створювати шалені речі за допомогою чистого CSS, загалом складніше створювати хитромудрі ілюстрації, як та, яку ви надаєте як приклад, використовуючи CSS, навіть під час маніпулювання зображеннями. Складну анімацію CSS часто підтримувати складніше, ніж їх аналоги JavaScript. Іншим недоліком є те, що анімації CSS важко змінити JavaScript, і вона не надто добре відтворюється при змішуванні з JavaScript.
Зважаючи на це, для простих взаємодій, що використовують переходи та анімації, зазвичай слід використовувати CSS; вам слід це зробити за замовчуванням. Щоб почати вчитися анімувати за допомогою CSS, перегляньте моє вступ до веб-анімації .
Ви також можете знайти корисні анімації та функції полегшення в таких бібліотеках, як Animate.css , з яких можна витягувати та додавати до власних проектів. Ви майже ніколи не будете потребувати всієї бібліотеки, візьміть лише потрібні вам частини.
Анімації на основі DOM на JavaScript досить прямо. Вони мають поганий представник через жахливі бібліотеки анімації, такі як jQuery's animate(), але вони можуть бути особливо ефективними, особливо при використанні API веб-анімації (обговорюється нижче) або спеціалізованій бібліотеці анімації, наприклад GSAP , Velocity.js або mo.js ( GSAP навіть має спеціальний плагін, який спеціально замінює jQuery .animate). Використовуючи таку бібліотеку, вони часто можуть перевершувати інші типи анімації для більш інтенсивної анімації, такі як анімація цілого ряду елементів.
Основна причина, чому вам потрібно буде використовувати анімацію, засновану на DOM, - це якщо у вас багато анімації користувачів або складних термінів із залученням вже створених елементів DOM. Найчастіше найчастіше спробувати використовувати щось на зразок Canvas над DOM з уже вказаних причин.
Бібліотеки на зразок GSAP дозволяють нам робити шалені речі, як повільна анімація на наводі , відстежуючи матриці анімації. Таким чином, анімації на основі DOM можуть бути більш налаштованими та інтерактивними, ніж будь-яка інша форма анімації, якщо це зроблено добре. Єдиний нижній бік полягає в тому, що іноді, залежно від того, як він побудований і що для цього потрібно, він не буде добре працювати.
WebGL - це спосіб створювати насамперед тривимірні твори. У ньому є кілька дивовижних проектів, які ви повинні перевірити. Це, очевидно, не використовується на кожній веб-сторінці, але важливо згадати.
Він насправді оживляє елементи DOM для створення 3D (та 2D) середовищ, які є приголомшливими через потенціал, який він має. Під час використання бібліотеки WebGL повертається до використання Canvas, але все ще не має великої підтримки на мобільних пристроях і може бути високою. Як правило, досить зрозуміло, коли вам потрібно використовувати WebGL чи ні.
З мого досвіду, використання бібліотеки WebGL практично необхідне. На щастя, є кілька хороших. На сьогоднішній день ThreeJS є найпоширенішим, за яким я бачив PixiJS . Рамка WebGL, як A-Frame, також може зробити її досить простою і створити основні речі.
Веб - анімації API є спробою стандартизувати як анімація впроваджена і підтримується в усіх браузерах спарених з поліпшеною продуктивністю. Він призначений для використання з елементами DOM, включаючи SVG. Він нагадує структурування анімації CSS (у формі JS), але додає такі можливості, як часова шкала та покращена продуктивність.
Це покращує продуктивність, розміщуючи анімації на композиційній нитці (для більш детальної інформації ознайомтеся з цим чудовим дописом на цю тему). Для ознайомлення з тим, як ним користуватися, ознайомтеся з документами Mozilla або цим вступним дописом .
Ви можете запитати: « Чи замінить це бібліотеки анімації JavaScript? » Відповідь - « Сподіваюсь, деякі ». Всім корисно, що вбудовані системи анімації браузера покращуються, і, як це роблять, деякі менш потужні бібліотеки анімації стануть марними. Зважаючи на це, більш потужні бібліотеки анімації все ще матимуть додаткові переваги, як ті, що зазначив GSAP . Потрібна вам бібліотека чи ні після того, як WAAPI широко підтримується, все ще визначається вашими потребами.
В даний час WAAPI не має належної підтримки, але сьогодні може використовуватися з поліфіном у виробництві. Схоже, це буде продовжувати покращуватися та отримувати більше підтримки.
Уникайте використання неефективних властивостей або спричинення пошкоджень / перефарбовування .
Не уникайте анімувати купу елементів на сторінці, оскільки вони більш інтенсивні, а також можуть змінитись згодом.
Використовуючи CSS, використовуйте transitionанімацію над можливістю, коли це можливо (в межах причини). Вони працюють краще і, як правило, легше працювати.
Розумно використовуйте will-changeвластивість для великих елементів, які ви збираєтеся анімувати, щоб браузер знав достроково. Щоб отримати детальнішу інформацію та пропозиції щодо цього, прочитайте щось подібне до цієї статті SitePoint на цю тему.
Уникайте setIntervalта requestAnimationFrameне працюйте під час синхронізації в JavaScript (хороші бібліотеки анімації, такі як GSAP, роблять це для вас, якщо ви використовуєте їх часові рамки).
Коли ви можете, використовуйте API веб-анімації, оскільки він має можливості для анімації іншими методами в JavaScript.
Ніколи не слід запускати Flash у кінцевому продукті . Анімації JavaScript ефективніші, більш динамічні, легше редагуються, не потребують завантаження, працюють на більшій кількості платформ (Flash не працює на більшості планшетів / телефонів) та чутливіші, ніж об'ємні старі Flash-файли. Вони також не дуже доступні і не є оптимальними для SEO.
Зважаючи на це, Animate CC (ребрендинг Flash) є корисним способом створення анімації та може експортувати на Canvas за допомогою Create.js .
Зазвичай існує кілька методів, які можна використовувати для створення анімації. Найкращий варіант залежить від того, що ви хочете зробити, а іноді не існує чіткого кращого методу. Часто мені трапляється використовувати декілька для одного проекту. Важливо - критично подумати , зрозуміти, як саме ви хочете, щоб анімація вела себе, і визначитися з методом, заснованим на цьому. Це також допомагає, якщо ви працювали в кожному трохи.
[1] - Lottie також може експортувати на рідні Android, iOS та React Native .
На моєму досвіді, роблячи статичні анімації (анімації, які не призначені для будь-якої взаємодії з користувачем), я виявив, що найкращим чином для мене було анімування ілюстрацій у After Effects, а потім експорт кінцевого результату у файл .GIF. Це робить анімацію абсолютно зручною для браузера та гарантує однакову візуалізацію на будь-якому пристрої.
Якщо ви шукаєте щось, з чим може взаємодіяти користувач, я вважаю, Canvas - це справді шлях, і для цього CreateJS, здається, є правильним для роботи з бібліотекою EaseJS.
У будь-якому випадку, згідно з вашим прикладом, ви можете так само добре зробити це з анімованим файлом GIF і отримати точно такий же результат.
Якщо ви працюєте з After Effects, ви можете використовувати плагін Bodymovin . Це робить вашу роботу для мобільного та веб-використання. У вас буде файл .json та lottie.js, який ви можете використовувати у своєму HTML. Але спочатку вам доведеться вимкнути дозволити сценаріям писати файли та отримати доступ до мережі в загальних налаштуваннях. Закінчивши це, перейдіть до Window , Extensions та знайдіть Bodymovin . Виберіть композицію, встановіть місце для збереження та натисніть візуалізацію. Помістіть файли .json та lottie.js у свій HTML, і ваша робота буде виконана. Я думаю, що GIF - це не найкраще рішення, оскільки для завантаження йому потрібно більше часу.
Ви можете завантажити його тут: http://aescripts.com/bodymovin Просто додайте свою ціну, або якщо ви хочете її безкоштовно, ви можете просто покласти $ 0,00 ...
Ось підручник із використання Bodymovin та налаштування анімації на своєму веб-сайті за допомогою Visual Studio: youtube.com/watch?v=YmPsCD5jRDw&t=282s
Якщо ви знаєте основи HTML та CSS, то вам це повинно бути легко. Цей підручник мені допоміг, я сподіваюся, що це може вам допомогти.