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

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

Экран запускаЭкран запуска

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

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

Требования к изображению

  • Максимальный размер файла: 24 Кбайта.

  • Размер изображения: 96×96 px.

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

Работа Lottie-анимаций отличается на разных платформах. Мы рекомендуем сверяться с таблицей поддерживаемых функций и тестировать экраны загрузки на разных платформах.

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

Внимание! Android не поддерживает 3D-анимацию на Lottie-экранах.

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

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

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

Если анимация не воспроизводится

Если на сайте rlottie анимация не работает, добавьте "ddd": 0 в каждый объект в массиве layers.

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

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

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

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

Настройка экрана запускаНастройка экрана запуска