header-logo
Узнайте как использовать Wix для создания своего сайта и бизнеса.
Создавайте и управляйте своим сайтом, используя интуитивно понятные функции Wix.
Управляйте подписками, планами и счетами.
Управляйте своим бизнесом и общайтесь с пользователями.
Узнайте, как приобрести, подключить или перенести домен на свой сайт.
Получите инструменты для развития вашего бизнеса и присутствия в интернете.
Повышайте свою видимость с помощью инструментов SEO и маркетинга.
Получайте расширенные функции, которые помогут вам работать более эффективно.
Находите решения, узнавайте об известных неполадках или свяжитесь с нами.
placeholder-preview-image
Совершенствуйте навыки с помощью наших курсов и учебных статей.
Получайте рекомендации по веб-дизайну, маркетингу и многому другому.
Узнайте, как увеличить органический трафик из поисковых систем.
Создайте собственный сайт на нашей полнофункциональной платформе.
Найдите подходящего специалиста, который поможет вам достичь целей.
placeholder-preview-image

Редактор Studio: Добавление и настройка файлов анимации Lottie

4 мин.
LottieFiles – это отличный источник высококачественных анимаций, которые вы можете добавить на сайт вашего клиента. После импорта анимации через ее JSON URL-адрес вы можете изменить ее размер и решить, будет ли она воспроизводиться непрерывно. 
Прежде чем начать:
Для того, чтобы импортировать анимацию, у вас должен быть аккаунт LottieFiles. 

Импорт анимации из LottieFiles

Вы можете импортировать столько анимаций Lottie, сколько вам нужно, чтобы оживить дизайн сайта. После сохранения анимации в учетной записи LottieFiles вы можете скопировать JSON URL-адрес и вставить его прямо в редакторе Studio. Анимация будет мгновенно добавлена в качестве нового элемента на странице.
GIF, показывающий, что можно вставить анимацию из Lottie прямо в редактор Studio.
Вы также можете добавить новый элемент Lottie-анимации и вставить соответствующий URL-адрес в панели настроек. 
Важно:
Wix поддерживает URL-адреса Lottie только в формате JSON.

Чтобы добавить элемент анимации Lottie:

  1. Нажмите Добавить элементы  в левой части редактора.
  2. Нажмите Медиа.
  3. Нажмите Lottie.
  4. Нажмите значок Добавить на сайт рядом с Lottie-анимация.


  5. (В отдельной вкладке браузера) Скопируйте URL-адрес сохраненной анимации в формате JSON из вашего аккаунта LottieFiles.
  6. Вставьте URL-адрес анимации в редакторе:
    1. Нажмите на элемент Lottie в редакторе.
    2. Нажмите на значок Настроить .
    3. Вставьте URL-адрес в поле URL-адрес анимации?
    4. Нажмите Enter на клавиатуре.
Что дальше?
Нажмите Предпросмотр в верхней части панели настроек, чтобы увидеть, как она выглядит перед публикацией сайта.
Добавление нового элемента lottie в редактор и вставка ссылки на анимацию в панели настроек
Работа с экранами разных размеров:
Вы можете настроить размер Lottie-анимации для каждого размера экрана, чтобы она выглядела идеально на любом экране. 

Изменение анимации Lottie

Если вы хотите изменить анимацию Lottie, вы можете сделать это, вставив другой URL-адрес в панель настроек элемента. 

Чтобы изменить анимацию:

  1. Выберите элемент Lottie-анимации.
  2. Нажмите на значок Настроить .
  3. Вставьте новый URL-адрес в поле URL-адрес анимации?
GIF, показывающий, куда вставить скопированный URL-адрес анимации Lottie, и как он мгновенно меняется на холсте, когда вы это делаете

Настройка воспроизведения анимации в режиме автоповтора

Вы можете выбрать, как анимация Lottie будет воспроизводиться на сайте клиента — только один раз или в зацикленном повторе. 

Чтобы настроить воспроизведение анимации:

  1. Выберите элемент Lottie-анимации.
  2. Нажмите на значок Настроить .
  3. Нажмите на переключатель Автоповтор, чтобы включить или отключить его.
Скриншот переключателя на панели настроек, который контролирует способ воспроизведения анимации lottie

Добавление alt-текста к анимации Lottie

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

Чтобы добавить alt-текст к анимации:

  1. Выберите элемент Lottie-анимации.
  2. Нажмите на значок Настроить .
  3. Прокрутите вниз до раздела Текст анимации.
  4. Введите текстовое описание в поле Напишите alt-текст для анимации.
  5. Нажмите Enter на клавиатуре.
Добавление alt-текста к элементу анимации Lottie
Важная информация:
На сайтах Wix поддерживаются только файлы Lottie в формате JSON. По техническим причинам не все поля файлов JSON могут содержаться. Поэтому анимация Lottie может выглядеть немного по-другому на опубликованном сайте Wix (например, отображая уменьшенный диапазон / количество движения). 
GIF, показывающий, что можно вставить анимацию из Lottie прямо в редактор Studio.
Добавление нового элемента lottie в редактор и вставка ссылки на анимацию в панели настроек
GIF, показывающий, куда вставить скопированный URL-адрес анимации Lottie, и как он мгновенно меняется на холсте, когда вы это делаете
Скриншот переключателя на панели настроек, который контролирует способ воспроизведения анимации lottie
Добавление alt-текста к элементу анимации Lottie