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

4 мин. чтения
Добавьте анимацию Rive, чтобы сделать сайт клиента обильным, интерактивным и увлекательным. Используя нашу легкую интеграцию, вы можете включать готовые элементы из сообщества Rive или ваш собственный дизайн Rive.
После загрузки файла Rive настройте его прямо в редакторе — отрегулируйте размер, выберите конкретный артборд и конечный автомат, установите анимацию для автопроигрывания и многое другое. Это даст вам возможность создавать динамичный опыт, который привлекает посетителей и продвигает ваши проекты.
Еще не работали с Rive?
Посетите Rive Docs, чтобы узнать, как использовать платформу для создания анимации.

Шаг 1 | Добавьте элемент Rive

Начните с добавления элемента Rive из панели Добавить элементы. Затем вы можете изменить анимацию файла Rive по умолчанию, чтобы элемент ее отображал. 
Прежде чем начать:
Мы рекомендуем заранее загрузить файл Rive в медиаменеджер сайта, чтобы подготовить его к интеграции. Однако вы также можете загрузить его сразу при настройке элемента.

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

  1. Перейдите в редактор.
  2. Нажмите Добавить элементы  в левой части редактора.
  3. Нажмите Медиа.
  4. Нажмите Rive.
  5. Нажмите значок Добавить на сайт рядом с Анимация Rive.
Скриншот из панели «Добавить элементы», вкладка «Rive», показывающий, где нужно нажать, чтобы добавить элемент.
  1. Загрузите файл Rive:
    1. Нажмите Заменить файл.
    2. (В Медиаменеджере) Выберите соответствующий файл .riv или нажмите + Загрузка файлов, чтобы добавить его сразу.
    3. Нажмите Добавить на сайт.
Нажатие Заменить файл на элементе Rive в редакторе Studio, чтобы загрузить свой файл .riv

Шаг 2 | Настройка элемента Rive

Настройте анимацию Rive, чтобы она идеально соответствовала видению клиента и дизайну сайта. Вы можете полностью контролировать интеграцию анимации на сайте — от выбора конкретного артборда до настройки выравнивания и воспроизведения.
Работа с экранами разных размеров:
По умолчанию настройки анимации Rive применяются к экранам всех размеров.

Чтобы настроить элемент Rive:

  1. Выберите элемент Rive в редакторе.
  2. Нажмите на значок Настроить  и настройте следующие параметры:
    • Медиа: нажмите Заменить файл .riv, чтобы выбрать / загрузить другой файл.
    • Артборд: если ваш файл Rive содержит несколько артбордов (т.е. отдельные холсты), вы можете выбрать тот, который хотите отобразить в этом элементе.  
    • Конечный автомат: если ваш файл Rive содержит несколько состояний (т. е. комбинации нескольких анимаций), вы можете выбрать тот, который будет воспроизводиться в этом элементе. 
    • Подогнать: выберите расположение анимации в ограничительной рамке элемента (например, заполнить, подогнать и т. д.)
    • Выравнивание: выберите выравнивание анимации в ограничительной рамке элемента (например, по центру, внизу слева и т. д.).
    • Автовоспроизведение: нажмите на переключатель, чтобы включить автовоспроизведение анимации.
    • Включите сенсорную прокрутку: активируйте переключатель, чтобы разрешить прокрутку на устройствах с сенсорным экраном. Когда посетители будут прикасаться или перетаскивать элемент Rive, он запустит поведение прокрутки. В противном случае прокрутка может быть предотвращена по умолчанию при касаниях / перетаскивании.
    • Опишите анимацию: напишите alt-текст для описания анимации. Если элемент декоративный (т. е. alt-текст не требуется), установите флажок рядом с Эта анимация декоративная, описание не требуется
  3. (Необязательно) Используйте ручки перетаскивания элемента, чтобы изменить его размер.
    Совет: анимация Rive будет заключена внутри ограничительной рамки элемента. 
Нажмите Превью, чтобы просмотреть анимацию прямо на холсте. 
Панель настроек файла Rive в редакторе Studio. Курсор нажимает на раскрывающийся список Артборд.

Часто задаваемые вопросы

Нажимайте на вопросы ниже, чтобы получить дополнительную информацию.