Анимация интерфейса мобильных приложений уже стала их неотъемлемой частью — она упрощает навигацию внутри приложения, делая его более удобным для пользователя.
Для каких целей используется анимация в 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 — библиотека, которая позволяет реализовать анимированное колесо обзора.
Выводы
В зависимости от ситуации, некоторые анимации проще создать с помощью существующих библиотек, но если ваша идея имеет много специфических деталей, вам понадобится индивидуальное решение. Вышеупомянутое, безусловно, будет способствовать процессу разработки вашего приложения, уменьшая финансовые и временные затраты.
Тем не менее, вы всегда должны помнить о главном:
- анимация должна быть функциональной и улучшать пользовательский опыт;
- анимированными должны быть только соответствующие элементы. Анимация каждой детали не имеет смысла. Кроме того, реализация тяжелых элементов снизит производительность вашего приложения и ухудшит взаимодействие с пользователем;
- внедряйте анимацию, если у вас есть такая возможность, это также сыграет вам на руку.
Свежее
Обзор изменений в GA4: различие между ключевыми событиями (Key events) и конверсиями (Conversions)
Увидели оповещение в GA4 об изменении в конверсиях? Давайте разбираться что именно изменилось и как это повлияет на вашу аналитику
Как добиться роста органического трафика на 195% за полгода в высококонкурентной нише — кейс BAYADERA
Показываем на практике как повысить видимость сайта и небрендовый органический трафик
Кто такой конечный пользователь, и Почему он важен
Он нужен не только для настройки рекламы, но и при разработке продукта или услуги. Разбираемся, кто он такой и как его найти