Анимации в мобильном приложении: почему многие считают, что Flutter с ними не справляется, но это не так

Тормозящее и подвисающее на привычных функциях мобильное приложение раздражает пользователя и снижает конверсию, а значит, и прибыль бизнеса.

Расскажем, как кроссплатформенный фреймворк Flutter научился работать с анимациями и обеспечивать UX не хуже, чем в нативных приложениях.

• Что такое анимации и зачем они нужны в мобильном приложении?
• Что не так с анимациями в приложениях, разработанных при помощи Flutter
  

Анимации объясняют логику приложения пользователям. Вот примеры анимации в мобильных приложениях:

Визуальная обратная связь (визуальный фидбек):пользователь получает ожидаемый визуальный отклик после взаимодействия с элементом приложения. Например, при заполнении обязательного поля кнопка отправки формы меняет цвет и становится активной. Или иконка при нажатии увеличивается, показывая, что приложение реагирует на действие пользователя.

Визуальная подсказка: пользователь понимает, как взаимодействовать с элементом благодаря анимированной подсказке. Используется, когда в приложении появляется непредсказуемый паттерн взаимодействия.

Функциональное изменение: элемент меняется после действия пользователя. Понятный всем пример: при добавлении товара в корзину рядом со значком корзины начинает отображаться число добавленных товаров.

Анимация состояния системы: используется для длительных процессов, чтобы пользователь понимал, что происходит в этот момент. Один из популярных примеров — прогресс-бар при загрузке обновления или анимация звуковой волны при записи звука.

Забавная анимация: может использоваться при ошибках работы приложения, чтобы снизить негатив пользователя, или в других юзкейсах. Имеет скорее эмоциональное, чем функциональное значение, так как помогает сформировать образ бренда.

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

Когда Flutter только появился на рынке, у него, как у многих молодых технологий, возникли некоторые проблемы роста. В том числе, он не всегда обеспечивал плавные анимации. От этого страдало качество и общий внешний вид приложений.

Flutter — это кроссплатформенный фреймворк, разработанный компанией Google. Технология позволяет создавать приложения для шести наиболее популярных платформ: iOS, Android, Windows, macOS, Linux и Web — с помощью единой кодовой базы. Другими словами, около 80–95% кодовой базы проекта можно переиспользовать.

По сравнению с нативными технологиями Flutter позволяет сэкономить:

• 45,6% на разработке;
• 70,5% на тестировании (в том числе на автоматизированных тестах);
• 33,3% на дизайне приложения.

Flutter вырос, проблема решилась, а недоверие осталось: до сих пор некоторые наши клиенты считают, что Flutter не способен обеспечить плавные анимации и высокое качество UX, аналогичное нативному приложению. Давайте посмотрим, почему это не так.

Под капотом у Flutter — Skia. Это графический движок, который хорошо себя показал в работе. А с выходом третьей версии Flutter разработчикам стало доступно ещё более мощное решение — графический движок Impeller.

Impeller обеспечивает постоянное число кадров в секунду и плавно отображает анимации. С помощью Impeller можно разработать пользовательский интерфейс для экранов ProMotion с частотой 120 Гц — с повышенной плавностью взаимодействия с пользователем. С новым движком исчезают задержки в анимации, «дерганье», «рывки». Разработчикам стало проще сделать так, чтобы все переходы (в т. ч. переходы между экранами) были плавными.

Flutter Web использует два веб-модуля отрисовки: HTML и CanvasKit. Таким образом, у фреймворка есть два способа обеспечить высокое качество визуала. Если запустить веб-приложение в браузере, оно автоматически использует CanvasKit. HTML-модуль запускается, когда пользователь открывает мобильное приложение.

CanvasKit похож на холст, на котором отображаются добавленные на него графические компоненты и анимации, и отображаются они очень быстро. HTML 5 берёт код и строит HTML-дерево, в результате чего получает изначально задуманную нами визуальную структуру приложения. Этот модуль по умолчанию используется для мобильных приложений и помогает спасти систему смартфона от перегрузки.

Если в приложении нужно реализовать сложные графические эффекты, можно использовать CanvasKit не только для веб, но и для мобильных версий. Этот модуль может отображать графические компоненты на смартфонах, сохраняя при этом их качество и обеспечивая пользователям плавность анимаций.

Flutter Web поддерживает механизм, при котором расшифровка изображений происходит через браузер. Он автоматически использует ImageDecoder API в поддерживающих его браузерах (этот API есть в большинстве браузеров на основе Chromium). Изображения расшифровываются асинхронно от основного потока с помощью встроенных в браузер кодеков изображений. API выполняет расшифровку изображений в два раза быстрее и никогда не блокирует основной поток, что исключает любые помехи, ранее возникавшие из-за изображений.

Когда пользователь переходит на страницу, Flutter оповещает браузер, который её открыл, об изображениях, которые нужно на ней отобразить, и браузер начинает их отрисовывать. В результате, всё выглядит плавно и работает безупречно. Такой механизм позволяет отображать множество изображений и анимаций с более высокой производительностью. Именно поэтому мы предложили Flutter для разработки видеостримингового приложения The Hole, через которое проходит более 50 000 запросов в секунду.

Flutter позволяет кастомизировать любые компоненты и виджеты, а значит, с ним возможно реализовать любые дизайн-решения. Кроме того, разработчики могут быстро писать собственные виджеты с нуля или использовать в работе любые из множества доступных пакетов и модулей, которые появились за время активного развития Flutter.

Помимо того, Flutter поддерживает различные виды устройств. Например, доступны новые фичи и виджеты для написания приложений на складных устройствах.

Google продолжает развивать Flutter. И фреймворк обрастает всё новыми возможностями, становясь масштабной платформой, на которой можно разработать не только мобильное приложение, не отличимое по качеству от нативного, но и веб и десктоп версию своего сервиса. Проблемы с анимациями остались в прошлом, и теперь Flutter обеспечивает высокую производительность, плавные переходы и нативный UX даже в таких высоконагруженных приложениях, как видеостриминговые.