Анимация интерфейса мобильных приложений уже стала их неотъемлемой частью — она упрощает навигацию внутри приложения, делая его более удобным для пользователя.
Для каких целей используется анимация в 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 — библиотека, которая позволяет реализовать анимированное колесо обзора.
Выводы
В зависимости от ситуации, некоторые анимации проще создать с помощью существующих библиотек, но если ваша идея имеет много специфических деталей, вам понадобится индивидуальное решение. Вышеупомянутое, безусловно, будет способствовать процессу разработки вашего приложения, уменьшая финансовые и временные затраты.
Тем не менее, вы всегда должны помнить о главном:
- анимация должна быть функциональной и улучшать пользовательский опыт;
- анимированными должны быть только соответствующие элементы. Анимация каждой детали не имеет смысла. Кроме того, реализация тяжелых элементов снизит производительность вашего приложения и ухудшит взаимодействие с пользователем;
- внедряйте анимацию, если у вас есть такая возможность, это также сыграет вам на руку.
Свежее
Как CRO и гибкий подход к обновлению дизайна помогают монетизировать трафик. Подход Netpeak Ukraine
Из статьи вы узнаете, как оптимизация коэффициента конверсий способствует увеличению прибыли без дополнительных затрат на рекламу
Что такое партнерская программа от Netpeak Ukraine, и Как к ней присоединиться
Рассказываем, как партнерская программа Netpeak Ukraine помогает бизнесам находить надежных подрядчиков, получать новых клиентов и увеличивать прибыль через реферальное и технологическое сотрудничество
Mobile-First Indexing. Все, что нужно знать об индексации сайта для мобильных устройств
В этой статье расскажу, что такое мобильная индексация, как ее выполнить для вашего сайта и преодолеть типичные сложности с помощью удобных инструментов