Редактор Studio: добавление и настройка анимации Rive
4 мин. чтения
Добавьте анимацию Rive, чтобы сделать сайт клиента обильным, интерактивным и увлекательным. Используя нашу легкую интеграцию, вы можете включать готовые элементы из сообщества Rive или ваш собственный дизайн Rive.
После загрузки файла Rive настройте его прямо в редакторе — отрегулируйте размер, выберите конкретный артборд и конечный автомат, установите анимацию для автопроигрывания и многое другое. Это даст вам возможность создавать динамичный опыт, который привлекает посетителей и продвигает ваши проекты.
Еще не работали с Rive?
Посетите Rive Docs, чтобы узнать, как использовать платформу для создания анимации.
Шаг 1 | Добавьте элемент Rive
Начните с добавления элемента Rive из панели Добавить элементы. Затем вы можете изменить анимацию файла Rive по умолчанию, чтобы элемент ее отображал.
Прежде чем начать:
Мы рекомендуем заранее загрузить файл Rive в медиаменеджер сайта, чтобы подготовить его к интеграции. Однако вы также можете загрузить его сразу при настройке элемента.
Чтобы добавить элемент Rive:
- Перейдите в редактор.
- Нажмите Добавить элементы
в левой части редактора.
- Нажмите Медиа.
- Нажмите Rive.
- Нажмите значок Добавить на сайт
рядом с Анимация Rive.
![Скриншот из панели «Добавить элементы», вкладка «Rive», показывающий, где нужно нажать, чтобы добавить элемент.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/12/29/edbe499c-b1b2-434f-87f6-0541fbc3f207/d9312c2c-5345-44e5-a1ce-f80654388db4.png)
- Загрузите файл Rive:
- Нажмите Заменить файл.
- (В Медиаменеджере) Выберите соответствующий файл .riv или нажмите + Загрузка файлов, чтобы добавить его сразу.
- Нажмите Добавить на сайт.
![Нажатие Заменить файл на элементе Rive в редакторе Studio, чтобы загрузить свой файл .riv](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/12/29/7aaa332a-72d8-4801-819b-fd763c3523be/309a9f3f-2725-4faa-a733-bb60ebefeeb8.png)
Шаг 2 | Настройка элемента Rive
Настройте анимацию Rive, чтобы она идеально соответствовала видению клиента и дизайну сайта. Вы можете полностью контролировать интеграцию анимации на сайте — от выбора конкретного артборда до настройки выравнивания и воспроизведения.
Работа с экранами разных размеров:
По умолчанию настройки анимации Rive применяются к экранам всех размеров.
Чтобы настроить элемент Rive:
- Выберите элемент Rive в редакторе.
- Нажмите на значок Настроить
и настройте следующие параметры:
- Медиа: нажмите Заменить файл .riv, чтобы выбрать / загрузить другой файл.
- Артборд: если ваш файл Rive содержит несколько артбордов (т.е. отдельные холсты), вы можете выбрать тот, который хотите отобразить в этом элементе.
- Конечный автомат: если ваш файл Rive содержит несколько состояний (т. е. комбинации нескольких анимаций), вы можете выбрать тот, который будет воспроизводиться в этом элементе.
- Подогнать: выберите расположение анимации в ограничительной рамке элемента (например, заполнить, подогнать и т. д.)
- Выравнивание: выберите выравнивание анимации в ограничительной рамке элемента (например, по центру, внизу слева и т. д.).
- Автовоспроизведение: нажмите на переключатель, чтобы включить автовоспроизведение анимации.
- Включите сенсорную прокрутку: активируйте переключатель, чтобы разрешить прокрутку на устройствах с сенсорным экраном. Когда посетители будут прикасаться или перетаскивать элемент Rive, он запустит поведение прокрутки. В противном случае прокрутка может быть предотвращена по умолчанию при касаниях / перетаскивании.
- Опишите анимацию: напишите alt-текст для описания анимации. Если элемент декоративный (т. е. alt-текст не требуется), установите флажок рядом с Эта анимация декоративная, описание не требуется.
- (Необязательно) Используйте ручки перетаскивания элемента, чтобы изменить его размер.
Совет: анимация Rive будет заключена внутри ограничительной рамки элемента.
Нажмите Превью, чтобы просмотреть анимацию прямо на холсте.
![Панель настроек файла Rive в редакторе Studio. Курсор нажимает на раскрывающийся список Артборд.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2025/01/07/28485109-96b7-4391-9f4c-c12c5517d6e2/b2e8ff1e-4b17-408e-a647-b65b30a8cbc4.jpg)
Часто задаваемые вопросы
Нажимайте на вопросы ниже, чтобы получить дополнительную информацию.
Какой формат файла мне нужен для анимации Rive?
Могу ли я добавить несколько анимаций Rive на свою страницу?
Что делать, если моя анимация не отображается должным образом?
Как я могу сделать анимацию адаптивной?
Можно ли использовать адаптивное поведение, настроенное в Rive?