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

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

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

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

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

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


  5. (В отдельной вкладке браузера) Скопируйте URL-адрес сохраненной анимации из вашей учетной записи 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
Важная информация:
Анимации Lottie автоматически конвертируются в файлы JSON при их импорте на сайт Wix. По техническим причинам не все поля файла могут быть включены. Поэтому анимации Lottie могут выглядеть немного иначе на опубликованном сайте Wix (например, (отображая уменьшенный диапазон/количество движений). 

Была ли статья полезна?

|