19 найкращих бібліотек UI/UX анімацій для Android

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

Для яких цілей використовується анімація в Android:

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

Варто пам’ятати, що занадто вигадливі ефекти відволікають і збивають користувача з пантелику. Тому розробникам слід дотримуватись золотої середини.

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

1. AndroidViewAnimations

І почнемо ми з AndroidViewAnimations. Це проста у користуванні бібліотека для Android, яка дозволяє створити анімацію «струсу» екрана. Її розробник був натхненний бібліотекою для iOS, оскільки на той час в Android не було аналога. Бібліотека дозволяє реалізовувати найрізноманітніші анімації, в тому числі:

• стрибки;
• затухання;
• перевертання;
• обертання;
• слайд;
• масштабування.

Більше того, кожен вид анімації має власні підрозділи з різними ефектами.

2. ListViewAnimations

ListViewAnimations — ще одна бібліотека з відкритим вихідним кодом, яка дозволяє розробникам створювати ListView з анімацією. Вона має наступні можливості:

• анімація появи елементів у ListView, GridView, інших AbsListView;
• вбудовані анімації: Alpha, змах вправо (SwingRightIn), змах вліво (SwingLeftIn), змах вниз (SwingBottomIn), масштабування (ScaleIn);
• можна самостійно додати інші анімації;
• підтримує StickyListHeaders; крім того, ви можете без проблем додати інші реалізації;
• змахнути-відмінити (Swipe-to-Dismiss), змахнути-відмінити з контекстним скасуванням;
• упорядкування за допомогою перетягування (Drag-and-Drop);
• анімований процес додавання елементів;
• ви можете плавно розширювати елементи, щоб відкрити більше вмісту.

3. AndroidImageSlider

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

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

4. Transition Everywhere

Transition Everywhere — це бекпорт Transitions API для Android 4.0 і вище. Він дозволяє змінювати тривалість, інтерполятор і затримку запуску для аніматорів усередині Transition. Має декілька типів переходів:

• слайд (Slide);
• детонація і розповсюдження (Explode and Propagation);
• зміна переходу зображення (Change Image Transfor);
• рух по заданому шляху (Path motion);
• назва переходу (Transition Name);
• масштабування (Scale);
• поворот (Rotate).

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

5. Android Ripple Background

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

6. Aphid FlipView

Aphid FlipView — це компонент інтерфейсу для реалізації анімації перегортання. Які варіанти пропонуються:

• гортання по горизонталі;
• перезавантаження вмісту під час гортання;
• інший формат растрового зображення для анімації, який можна використовувати для зменшення пікового споживання пам’яті.

7. FragmentTransactionExtended

FragmentTransactionExtended — це бібліотека з набором користувацьких анімацій між фрагментами. У порівнянні з FragmentTransaction, яка приймає лише прості анімації, її список розширено за рахунок більш складних ефектів наступних анімацій:

• маштабування;
• затухання;
• слайд;
• ковзання;
• складання;
• обертання;
• збільшення.

8. KenBurnsView

KenBurnsView — ця бібліотека є розширенням до ImageView, яка, у свою чергу, створює ефект занурення, анімуючи малюнок за допомогою Ken Burns Effect.

Переваги бібліотеки:

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

9. Reachability

Reachability — бібліотека, яка забезпечує легкий доступ до верхньої частини екрану мобільного телефону. Її розробника надихнула анімація, реалізована в iPhone 6 та iPhone 6 Plus. Тут ви можете переміщати як сам екран, так і наведення.

10. AnimationEasingFunctions

AnimationEasingFunctions була створена на основі AndroidViewAnimation за допомогою Easing Functions. Вона полегшує процес анімації та робить її більш реалістичною. Ви можете реалізувати її як у вигляді градації, так і у вигляді планеру.

11. EasyAndroidAnimarions

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

12. InterfaceInteraction

InterfaceInteraction створена за підтримки PhysicsLayout. Бібліотека «фіксує» будь-який інтерфейс (увесь екран або вікно) і «перекидає» його елементи, ніби під впливом гравітації. В результаті їх можна переміщати з боку в бік під нахилом. Ефект гравітації ґрунтується на даних акселерометра пристрою. Метод зупинки повертає всі елементи інтерфейсу на місце.

Ще одна особливість — анімація струсу для елементів інтерфейсу.
Ці ефекти можна легко використовувати, щоб зробити цікавішим будь-який додаток.

13. ViewRevealAnimator

ViewRevealAnimator — перегляд з ефектом відкриття в стилі льодяника. Він дозволяє створити плавний анімований перехід між елементами.

14. ArcAnimator

ArcAnimator — це бібліотека, яка допомагає створювати анімацію переходу у вигляді дуги для Android 2.3. і вище.

15. SearchMenuAnim

SearchMenuAnim дозволяє створити чіткий і легкий перехід від іконки пошуку до поля пошуку.

16. Cross View

Cross View анімує перехресний перегляд у вашому додатку. Бібліотека дозволяє вам визначати колір в залежності від статусу. Ви також можете встановити тривалість анімації в мілісекундах.

17. WoWoViewPager

WoWoViewPager поєднує в собі Перегляд сторінок (View Pager) і Анімації, щоб забезпечити простий спосіб створення довідкових сторінок програми. Він підтримує деякі прості анімації, а саме:

• переклад;
• масштаб;
• альфа;
• анімації кольору фону;
• gif-малюнок;
• SVG-малюнок;
• малювання шляхів.

18. Lottie

Lottie — бібліотека, яка аналізує анімації Adobe After Effects, експортовані у форматі JSON за допомогою Bodymovin, та відтворює їх нативно на мобільних пристроях.

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

Головною перевагою Lottie є підтримка великої кількості функцій After Effects.

19. FerrisWheelView

FerrisWheelView — бібліотека, яка дозволяє реалізувати анімоване колесо огляду.

Висновки

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

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