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