Экран запуска приложения

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

Создание анимации

Подготовьте векторное изображение в формате Lottie. По сути это JSON-файл, который кодирует анимированное изображение. Получить файл можно разными способами:

• •
  Если у вас есть готовые SVG-файлы, воспользуйтесь онлайн-конвертером SVG в Lottie.
• •
  Создайте изображение в Adobe After Effects и экспортируйте его в JSON с помощью плагина Bodymovin или LottieFiles.

Ограничения изображения:

• •
  максимальный размер файла — 24 КБ,
• •
  размер изображения — 96×96 пикселей.

Проверка работоспособности анимации

Работа Lottie-анимаций может различаться на платформах. Чтобы увидеть, как будет отображаться анимация в приложении или на сайте ВКонтакте, используйте следующие способы проверки.

Приложение для Android

Для Android используется библиотека lottie-android от Airbnb. Анимации можно проверять с помощью предварительного просмотра на сайте LottieFiles. Поддерживаемые функции.

Приложение для iOS

Для iOS используется библиотека rlottie от Samsung. Анимации можно проверять с помощью предварительного просмотра на сайте rlottie. На всех платформах RLottie воспроизводится одинаково.

Мобильная и десктопная версии сайта

В десктопной версии сайта ВКонтакте используется библиотека lottie-web от Airbnb. Поддерживаемые функции.

Настройка экрана

Чтобы настроить экран запуска приложения:

1. 1.
   Откройте Мои приложения → Редактировать → Информация → Загрузка приложения.
2. 2.
   Укажите HEX-код фонового цвета. Пример: #54C45D.
3. 3.
   Загрузите изображение — файл в формате Lottie.
4. 4.
   Поставьте флажок Анимация, если изображение анимированное.
5. 5.
   Нажмите кнопку Сохранить изменения.

FAQ

Чем экран запуска отличается от скриншота?

Экран запуска — это заставка, которую пользователь видит, пока мини-приложение открывается. Мы показываем скриншот мини-приложения, когда оно недоступно (например, ещё не создано для текущей платформы) или когда нужно получить подтверждение, чтобы открыть мини-приложение (например, запросить дополнительные разрешения).

Как долго показывается экран запуска?

Экран показывается, пока мини-приложение не инициализирует VK Bridge, то есть вызовет событие VKWebAppInit.