Центр поддержки Wix
    Главная
  1. Создание сайта
  2. Editor X
  3. Добавление эффектов и анимации
    4. Editor X: добавление и настройка файлов анимации Lottie

Editor X: добавление и настройка файлов анимации Lottie

3 мин. чтения
Editor X переходит на Wix Studio, нашу новую платформу для агентств и фрилансеров.Подробнее о Wix Studio
Lottie Files - отличный источник высококачественных анимаций, которые вы можете добавить на сайт Editor X. После импорта анимации через ее URL-адрес вы можете изменить ее размер и решить, будет ли она воспроизводиться непрерывно.
Содержание:
Прежде чем начать:
Чтобы импортировать анимацию, у вас должен быть аккаунт LottieFiles.

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

Вы можете импортировать столько анимаций, сколько вам нужно, чтобы оживить дизайн сайта. После того, как вы добавите элемент Lottie Animation в Editor X, вставьте URL-адрес анимации в панель настроек, чтобы увидеть, как она выглядит на вашей странице.

Чтобы импортировать анимацию Lottie:

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

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

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

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

  1. Нажмите на анимацию Lottie в Editor X.
  2. Нажмите на значок Настроить .
  3. Вставьте новый URL-адрес в поле URL-адрес анимации?
Изменение URL-адреса Lottie Animation из панели настроек элемента в Editor X

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

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

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

  1. Нажмите на анимацию Lottie в Editor X.
  2. Нажмите на значок Настроить .
  3. Нажмите на переключатель рядом с Автоповтором, чтобы включить или отключить его.
Нажмите на переключатель, чтобы настроить воспроизведение анимации Lottie в непрерывном цикле.

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

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

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

  1. Нажмите на анимацию Lottie в Editor X.
  2. Нажмите на значок Настроить .
  3. Введите или вставьте текстовое описание в поле Напишите alt-текст для анимации.
  4. Нажмите Enter на клавиатуре.
Написание alt-текста для анимации Lottie в панели настроек элемента в Editor X.

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

|
В этой статье
  • Импорт анимации из LottieFiles
  • Изменение анимации Lottie
  • Настройка воспроизведения анимации в режме автоповтора
  • Добавление alt-текста к анимации Lottie