{"id":13650,"url":"\/distributions\/13650\/click?bit=1&hash=b4a44ea9299acb416ac92e110a87e80acc960de1a8f124e06d52ec1ea62c252a","title":"\u041a\u0430\u043a \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u043e\u043c \u043a\u0430\u043a \u0432 Sims","buttonText":"","imageUuid":"","isPaidAndBannersEnabled":false}
Сервисы
Surf

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

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

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

Вы в блоге Surf. Мы более 12 лет работаем с мобильными технологиями и 3,5 — с Flutter. Разработали на нём приложения для Росбанк, СМП Банка, Риглы и KFC, видеостриминговый сервис The Hole.

💼 Рассказываем об этом в кейсах.

О чём в этой статье:

Что такое анимации и зачем они нужны в мобильном приложении?

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

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

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

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

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

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

В приложении «Бетховена» анимированные картинки домашних питомцев появляются, когда клиент заходит в пустую корзину или происходит ошибка (например, нет связи с интернетом)

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

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

Когда 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 отлично справился с анимациями в The Hole — крупнейшем видеостриминговом приложении в России

Полная свобода для дизайна

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

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

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

0
Комментарии
Читать все 0 комментариев
null