Мікроанімації та переходи в інтерфейсі: таймінг, easing, амплітуда

Що таке мікроанімація простими словами

Уяви дві кнопки. Перша мовчки змінює колір - клац, і все. Друга на частку секунди трохи просідає під пальцем, як справжня клавіша, і плавно відпускається. Вгадай, яка відчувається живою? Друга. А різниця - буквально пара десятих секунди руху. Ось це і є мікроанімація: малесенький відгук інтерфейсу на твою дію.

Мікро - бо вона крихітна й поодинці майже непомітна. Її завдання не показати фокус. Її завдання - тихо сказати: «почув, усе йде як треба». Хороша мікроанімація працює як кивок співрозмовника. Ти її не помічаєш. Але прибери - і розмова здається мертвою.

Одразу розведемо два слова, які вічно плутають. Мікроанімація - це відгук на дію: натиснув, навів, перемкнув. Перехід - плавна зміна одного стану іншим: меню виїхало, картка розкрилася. Логіка в них одна, тому тримаємо в одному уроці.

Навіщо потрібні анімації в інтерфейсі

Можна зібрати інтерфейс зовсім без руху - працювати він буде. А відчуватися буде дешево й нервово: незрозуміло, чи натиснулося, чи завантажилося, куди поділася картка. Анімація закриває ці діри майже безкоштовно.

• Зворотний звʼязок. Рух підтверджує: дія спрацювала. Без нього людина тисне кнопку вдруге - про всяк випадок.
• Зрозуміла навігація. Меню виїжджає, а не вистрибує ривком - і мозок одразу бачить, звідки воно взялося і куди повернеться. Різкі стрибки дезорієнтують.
• Відчуття якості. Плавні відгуки читаються як «зроблено з любовʼю». Та сама логіка, що в дорогої кнопки, тільки в динаміці.
• Чіткий бриф нейромережі. Замість «оживи якось» ти скажеш: «короткий hover з легким підйомом і плавним easing». Це і є різниця між новачком і тим, хто бачить деталі.

Девʼять із десяти бісячих анімацій - це не «замало руху». Це задовго, зарізко по плавності або зависока амплітуда. Перебір дратує сильніше, ніж повна відсутність.

З чого складається хороша анімація: три цеглини

Будь-яка мікроанімація тримається на трьох речах. Сам ефект - вторинний. Вирішують саме ці три параметри.

Таймінг анімації - скільки вона триває

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

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

Easing (плавність) - як анімація розганяється й гальмує

Найбільш недооцінений параметр. Easing Easing (плавність, крива прискорення) - закон, за яким змінюється швидкість анімації в часі. Лінійний easing - рівномірний рух від початку до кінця. «Ease-out» розганяється швидко і плавно гальмує до кінця - саме він найчастіше відчувається природним в інтерфейсах. - це про те, чи рухається елемент рівномірно, чи по-живому: з розгоном і гальмуванням.

У реальному світі ніщо не стартує й не гальмує миттєво. Машина розганяється. Мʼяч уповільнюється. Лінійна, рівна анімація ламає цю інтуїцію і одразу читається як «дешево, машинно». А рух, який швидко бере старт і мʼяко гальмує до кінця, здається природним. Його й хочеться майже завжди.

Амплітуда анімації - наскільки сильно елемент рухається

Третя цеглина - розмах руху. І тут знову править стриманість. Кнопка піднялася на пару пікселів, іконка хитнулася, картка трохи підросла - цього вистачає, щоб око зловило відгук.

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

Де мікроанімації доречні, а де ні

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

• Стани кнопок і посилань. Hover і натискання - класика. Легкий підйом, зміна кольору, ріст тіні. Це перше, що робить інтерфейс чутливим.
• Поява і зникнення. Тости, модалки, випадні меню, підказки. Хай виїжджають і тануть, а не блимають ривком - тоді ясно, звідки вони і куди йдуть.
• Перемикачі та галочки. Тумблер плавно перекочується, чекбокс коротко відмальовує галочку - крихітний, але приємний момент підтвердження.
• Завантаження та очікування. Скелетони-заглушки і плавні індикатори кажуть «працюю, зачекай» куди краще за застиглий екран.
• Зміна розділу чи екрана. Мʼякий перехід допомагає мозку зрозуміти, що одне змінилося іншим, а не телепортувалося.

Приклад: як оживити кнопку й модальне вікно

Зберемо відгук за тими самими трьома цеглинами - таймінг, плавність, амплітуда - і проговоримо все словами, щоб це можна було віддати нейромережі.

Додай кнопці мікроанімації. Під час наведення вона трохи піднімається і злегка світлішає, тінь мʼяко росте. Під час натискання - просідає на пару пікселів, тінь зменшується, ніби фізичну клавішу втиснули. Тривалість відгуків коротка, близько десятої частки секунди. Плавність - швидкий старт і мʼяке гальмування до кінця, без лінійного і без різкого обриву. Амплітуда маленька, рух ледь помітний. Передбач спокійний варіант без руху для режиму «зменшити рух».

Зроби плавну появу модального вікна. Фон-затемнення мʼяко проявляється, саме вікно трохи спливає знизу і злегка збільшується до нормального розміру. Тривалість - десь третина секунди на появі і помітно швидше на закритті. Плавність з мʼяким гальмуванням до кінця, без пружинного відскоку. Жодного блимання й різких стрибків. Для режиму «зменшити рух» вікно просто зʼявляється без зсуву і масштабування.

Часті помилки в мікроанімаціях

• Задовго. Анімація на пів секунди й більше перетворює жваву сторінку на липку. Скорочуй.
• Лінійна плавність. Рівномірний рух без розгону й гальмування видає «машину» і виглядає дешево. Додай мʼяке гальмування до кінця.
• Величезна амплітуда. Елементи літають через пів екрана і скачуть. Видно, але втомлює. Мікро - значить трішки.
• Анімується все підряд. Коли смикається кожна дрібниця, губиться головне і рябить в очах. Оживляй тільки те, що пояснює дію.
• Блимання замість переходу. Меню чи модалка вистрибують ривком - мозок не встигає зрозуміти, звідки вони взялися. Дай їм виїхати і плавно піти.
• Зникнення повільніше за появу. Чекати, поки щось ліниво виповзає з екрана, болісно. Прибирай елементи швидше, ніж показуєш.
• Ігнор «зменшити рух». Для частини людей анімація - фізичний дискомфорт. Завжди залишай спокійний запасний варіант.
• Пружина-відскок усюди. Ефектно один раз, бісить на десятий. Тримай пружину для рідкісних акцентів, а не для кожної кнопки.