Принципи анімації для веба

Примітка перекладача: Поданий нижче матеріал містить значну кількість технічних термінів, при перекладі яких можуть виникнути неточності. Якщо ви помітили помилку, помилку або неточність перекладу   напишіть нам, і  оперативно все виправимо.

Крім того, у продовження теми сьогоднішньої публікації на один тиждень буде відкрито просунутий курс академії  CSS-анимациям, який зазвичай доступний за передплатою. Його опис розміщене в наприкінці топіка.




Фронтенд-дизайнери і розробники використовують CSS для створення стилів, позиціонування елементів   загалом, для того, щоб сайти виглядали красиво. Часто CSS застосовують і для додавання рухів на веб-сторінки, хоча справа зазвичай не йде далі плавних переходів або анімації.

На насправді анімація може бути потужним інструментом, який дозволяє відвідувачам сайту і клієнтам легше взаємодіяти з інтерфейсом продукту і швидше досягати своїх цілей. Цього можна досягти, якщо слідувати в своєї роботи деяким основоположним принципам.

Компанія Disney займається анімацією вже багато років і виробила такі рекомендації   1981 була опублікована книга «Ілюзія життя: Анімація Disney» («The Illusion of Life: Disney Animation»), якою перераховувалися 12 принципів анімації (про них писали Хабре). Вони описують те, як використовувати анімацію для створення у глядачів, що дивляться на екран, відчуття реального світу.

У сьогоднішньою статтею ми розглянемо кожен з дванадцяти цих принципів і обговоримо їх можливе застосування при створенні веб-сторінок. Всі код CSS і HTML можна скачати на Codepen.

Сплющення і розтягнення


У світі існує поняття «маси тіла»   і коли об'єкт рухається, його маса залишається незмінною. Коли м'яч вдариться об землю, він стане трохи ширше і сплюснеться, тому що у час фізичного контакту маса об'єкта перерозподіляється.

Цей ефект найбільш корисний при створенні фізичних об'єктів (наприклад, люди, годинник або подпрыгивающие м'ячі).

Звичайно, в у разі веб-сторінок це властивість можна і проігнорувати   DOM-елементи не обов'язково асоціюються з фізичними об'єктами і можуть як завгодно рости і зменшуватися в розміри на екрані. До наприклад, кнопка може збільшитися і трансформуватися в інформаційне вікно, а повідомлення про помилки з'являються і зникають.

Незважаючи на це, техніку «сплющивания і розширення» можна використовувати для створення відчуття наявності у елемента на сторінці фізичної маси. Навіть невеликі зміни можуть створити тонкий, але привертає погляд ефект.

Очікування


Руху не відбуваються раптово. У звичайному житті будь-якої дії передує певна підготовка, будь то сповільнюється перед падінням з сходинок м'яч або осіб, згинаючий коліна перед стрибком.

Цей ефект можна використовувати для того, щоб зробити руху об'єктів на веб-сторінці більш реалістичними. Саме очікування може бути реалізовано, до наприклад, в якості легкого похитування, яке дозволяє користувачам зрозуміти, що відбувається і допомагає їм легше слідкувати за переміщеннями об'єкта за екрану.

Фокусування


Цей ефект полягає в визначенні об'єкта в якості фокусу сцени, в  час як інші об'єкти звільняють місце для головного дії. Для створення такого ефекту потрібний об'єкт відповідним чином висувають на передній план або маскують супутні елементи, щоб сфокусувати погляд користувача на те, що він повинен побачити.

У термінах веба це означає використання напівпрозорого затемнення для певного контенту. Накладання більш темного шару на існуючу сторінку і подальше розміщення контенту передньому плані фокусує на ньому все увагу користувачів.

Інший підхід полягає в використанні рухів. Коли на сторінці одночасно рухаються кілька об'єктів, досить важко зрозуміти, на який з них дійсно варто дивитися. Якщо у такій ситуації зупинити всі об'єкти, крім одного «потрібного», то вся увага буде прикута до нього.

Рух можна використовувати і по-іншому. Наприклад, якщо користувач працює з яким-небудь документом, то невелике тремтіння і мигання кнопки «Зберегти» може спонукати людину натиснути на неї. Коли на екрані немає жодної активності, навіть невеликий рух дуже виділяється.

Руху «повний вперед» і «покрокове зміна»


Пряме рух характеризується повною відображенням всіх кадрів анімації. У свою чергу, покрокове зміна характеризується створенням послідовності ключових кадрів, інтервали між якими заповнюються пізніше, зазвичай з допомогою допоміжних засобів.

Другий підхід використовується у більшості веб-анімації: переходи між головними кадрами реалізуються браузером, який інтерполює різницю між кожним з них і домальовує стільки проміжних кадрів, скільки буде потрібно для того, щоб зробити підсумкову анімацію плавною.

Винятком є функція «Steps». При її використанні браузер «крокує» по вказаного числа дискретних кадрів. Таким способом можна створити послідовність зображень, а потім програти їх в браузері за одному з допомогою стилю «Straight Ahead Action».

Слідування і захлестывание


Не завжди дії відбуваються одночасно. Коли рухомий автомобіль різко гальмує, то з димом покришок «клює носом», а водій всередині продовжує рухатися, поки не відбудеться остаточна зупинка.

Цей ефект досягається за допомогою рухів прямування і захльостування — вони потрібні, щоб просигналізувати про те, що об'єкт зупинився. До наприклад, елемент, поміщений в список може трохи проїхати потрібне положення, а потім повернутися на правильну позицію.

Ефект зачеплення створюється з допомогою додання об'єктів різного темпу руху. Цей підхід використовується при переходах в iOS   деякі кнопки і елементи рухаються з різною швидкістю, в внаслідок переміщення стають більш реалістичними, ніж вони були в випадку руху з однаковою швидкістю. Комбінування рухів дає користувачеві час на те, щоб усвідомити зміни, що відбуваються.

У вебі це зазвичай досягається комбінуванням плавних переходів або CSS-анімації з різною швидкістю програвання.

Плавне прискорення і уповільнення


Об'єкти рідко переходять миттєво від стану спокою відразу до максимальної швидкості. Зазвичай на те, щоб розігнатися їм потрібно якийсь час   так само, як і для того, щоб зупинитися. Без поступового прискорення і уповільнення руху виглядають неприродно.

У термінології CSS прискорення і уповільнення відомо як easing або «функція плавності», яка описує зміну швидкості анімації.

Використовуючи функції плавності можна створювати прискорювані і уповільнення анімації і навіть більш складні ефекти (з допомогою функції
cubic-bezier
).

Дуги


Уповільнення і прискорення робить об'єкти більш реалістичними, але і ще один момент: в життя вони рідко рухаються по прямий, як правило рух йде по вигнутій дузі.

Домогтися такого руху по дузі з допомогою CSS можна парою різних способів. Один полягає в суміщення декількох анімацій. До наприклад, анімація подпрыгивающего м'яча може бути зроблена з допомогою рухів об'єкта вгору і вниз, і друге рух поєднане з пересуванням ще й вправо. Таким чином вийде, що м'ячик скаче по екрану.



Другий спосіб   поворот елемента. З допомогою зміни центра обертання і винесення його за межі початкового об'єкта також можна сформувати дугу.

Другорядне дію


Основна дія, що відбувається на екрані, можна підкреслити «другорядної» анімацією. Це може бути рух рук людини при ходьбі або тремтіння його голови при кожному кроці. Або піднімається з землі пил при кожному ударі м'яча.

У у разі веб-сайтів вторинні елементи можуть «роз'їжджатися», щоб виділити на що користувачеві дійсно потрібно звернути увагу (приклад використання   перетягування елемента для вставлення у середину списку).

Час виконання


З допомогою маніпуляції з тривалістю анімації можна зробити так, щоб великі об'єкти здавалися важкими, а невеликі   легкими.

У вебі домогтися цього можна простим зміною значень
animation-duration
та
transition-duration
.

З допомогою зміни тривалості анімації можна виділити її серед контенту веб-сторінки або під час взаємодії з користувачем.

Перебільшення


Цей прийом часто використовується для залучення уваги до певних дій і надання їм більшої драматичності в мультфільмах. Вовк, який намагається когось вкусити відкриває рот набагато ширше, ніж зазвичай — так набагато страшніше і солідніше.

На веб-сторінці об'єкти можна збільшувати і зменшувати, щоб виділити їх і привернути увагу користувача. Наприклад, при заповненні форми активне поле має сенс зробити більше, а неактивні в даний момент, навпаки, зменшити.

Обсяг


При роботі з об'ємними об'єктами необхідно враховувати правила перспективи   люди живуть в тривимірному світі, тому якщо щось виглядає не так, як вони чекають, це здається неправильним.

У сучасних браузерах є хороша підтримка тривимірних трансформацій. Це означає, що розробник може створити анімацію, яка буде повертати об'єкти і переміщати їх  екрану, а вже сам браузер створить плавні переходи між станами.

Привабливість


У світі мистецтва увагу до деталей може створювати особливу атмосферу   виникає, наприклад, при погляді на картину. Точно також і в світі веба якісні і добре підібрані анімації дозволяють сайту виглядати більш привабливо і авторитетно. Великих успіхів у подібній роботі домоглася, до наприклад, команда сервісу Stripe.

Висновок
Використання принципів, описаних вище дозволить веб-розробникам створювати більш якісні і приємно виглядають анімації. Якщо анімація враховує фізичний вага об'єкта, виділяє зміни, ній використовуються вторинні руху, а  час виконання скрупульозно розраховано   це значно поліпшить загальне враження від сторінки.



А тепер про курс за анімації

Як ми вже сказали в початку статті, в продовження теми публікації ми окрываем для безкоштовного доступу один з просунутих курсів HTML Academy, який присвячений анімації.

У курсі «Анімація» розглядаються основи анімації на CSS. Ви будете рухати, повертати і видозмінювати об'єкти, попутно освоюючи прийоми роботи анімації в CSS.

Всі завдання розроблені у рамках однієї сюжетної лінії (легенди), згідно з якою ви можете допомогти людству пройти шлях розвитку цивілізації аж до польотів у космос.



Побачимося в Академії!

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.