Редактор Studio: добавление анимации к иконкам кнопок
Используете
стилизованные кнопки? Добавьте анимацию иконок, чтобы создать эффектные акценты и сделать сайты клиентов интерактивными до мельчайших деталей.
Выбирайте из множества готовых анимированных иконок Wix Studio для быстрого эффекта или комбинируйте начальную и конечную иконки, чтобы создать собственную анимацию. Вы даже можете загрузить свои SVG-файлы для персонализации.
Как работает анимация иконок кнопок?
Добавление готовой анимации иконки
Выберите одну из наших впечатляющих анимаций иконок для быстрого редактирования. Выбрав нужный эффект, вы можете установить длительность.
Чтобы добавить готовую анимированную иконку:
- Перейдите в редактор.
- Нажмите на соответствующую стилизованную кнопку.
- Нажмите Настройки.
- Нажмите Анимированная в разделе Тип иконки.
- Выберите дальнейшее действие:
- Выберите нужную иконку в разделе Выбрать иконку
- Нажмите на иконку Добавить
, чтобы просмотреть весь ассортимент анимированных иконок в Медиаменеджере.
- (Необязательно) Перетащите ползунок, чтобы изменить длительность анимации.
Совет:
Наведите курсор на готовые иконки, чтобы посмотреть превью анимации.
Создание кастомной анимации иконок
Создавайте собственные анимации иконок для кнопок на сайте клиента. Выбрав начальную и конечную иконки, вы можете создать плавную анимацию, уникальную для сайта вашего клиента. Комбинируйте иконки Wix или используйте 2 собственных SVG-файла.
Чтобы создать кастомную анимацию:
- Перейдите в редактор.
- Нажмите на соответствующую стилизованную кнопку.
- Нажмите Настройки.
- Выберите Анимированная в разделе Тип иконки.
- Нажмите на иконку Добавить
и выберите Создать новую. - Настройте начальную и конечную иконки:
- Нажмите на иконку Добавить
в разделе Начальная иконка. - Выберите файл во вкладке Медиа от Wix или загрузите/выберите свой в разделе Файлы сайта.
- Нажмите Выбрать файл.
- Повторите шаги a–c для Конечной иконки.
- Нажмите на иконку Добавить
- (Необязательно) Нажмите Назад вверху и используйте ползунок, чтобы установить длительность.
Передумали?
Наведите курсор на начальную или конечную иконку в пользовательской панели и нажмите
Заменить иконку
, чтобы изменить ее.
, чтобы изменить ее.
Советы:
- Вы можете комбинировать собственный файл с иконкой Wix.
- Используйте бокс превью, чтобы убедиться, что эффект выглядит так, как вы задумали.
Дизайн иконки
Настройте иконку в соответствии с вашим видением дизайна, уникальным брендингом клиента и особенностями конкретной кнопки. Изменяйте размер иконки, ее цвет и поворачивайте ее, чтобы сделать кнопку более динамичной.
Вы можете настроить дизайн кнопки для состояния при наведении, что дает возможность добавить дополнительный уровень интерактивности — например, заставить иконку вращаться или менять цвет при наведении.
Чтобы настроить дизайн иконки:
- Перейдите в редактор.
- Нажмите на соответствующую стилизованную кнопку.
- Нажмите на иконку Открыть Инспектор
в правом верхнем углу редактора.
- Выберите нужное Состояние во вкладке Дизайн: Обычный или При наведении.
- Нажмите Иконка в разделе Дизайн.
- Используйте доступные параметры для настройки дизайна иконки:
- Измените размер иконки.
- Измените цвет и настройте прозрачность иконки.
- Поверните иконку под другим углом.
Требования и рекомендации для кастомных иконок
К пользовательским иконкам предъявляются определенные требования. Чтобы загрузить и использовать собственные файлы, они должны быть:
- Только черный цвет (#000000)
- В формате SVG
- Размером не более 250 КБ
Примечание:
Если вы создали SVG-файлы в Adobe Illustrator или Figma, перед экспортом их необходимо конвертировать в составной путь.
Также обратите внимание на рекомендации по созданию иконок. Мы рекомендуем следовать приведенным ниже правилам, чтобы анимация была максимально плавной.
- Убедитесь, что начальная и конечная иконки имеют одинаковое исходное положение.
- Проверьте, чтобы обе иконки имели одинаковое число баллов.
- Используйте заполненные иконки (без вырезов).
- Используйте несколько более мелких фигур для создания SVG-иконки, а не одну большую фигуру.
- Масштабируйте фигуры при изменении их размера, чтобы сохранить их качество.
- Используйте пиксельный режим программы, чтобы обеспечить выравнивание по пикселям на артборде (монтажной области).
- Если ваши иконки имеют очень разные формы, вы можете попробовать эти советы для еще более плавного перехода:
- Используйте морфинг-версии иконок (начальную иконку, которая была слегка преобразована в конечную, и наоборот).
- Скройте фигуры одной иконки на другой (например, скрытие фигур конечной иконки на начальной).
Важно:
Мы не можем предоставить помощь или устранение неполадок для SVG-файлов, созданных вами вне Wix.