English
简体中文
Español
Português (Brasil)
Deutsch
Français
日本語
한국어
Čeština
Tiếng Việt
Bahasa Indonesia
Türkçe6 взаимодействий · 300 иконок
Взаимодействия анимированных иконок
Каждая иконка поставляется с микровзаимодействием, для которого её нарисовали: она крутится в цикле, переключается или повторяется по клику либо проигрывается при наведении. React-компонент всё это подключает и учитывает уменьшение движения, а проп interaction переключает любую иконку на другое взаимодействие.
- interaction="loop"Иконки с циклической анимацией21 иконкаПроигрывается непрерывно; если включено уменьшение движения, остаётся на статичном первом кадре.Циклическую анимацию обычно используют для спиннеров загрузки, активных предупреждений, звенящего колокольчика и подсказки «листайте вниз».
- interaction="click-toggle"Иконки-переключатели с анимацией по клику37 иконокПереключается между двумя состояниями по клику, а при включённом уменьшении движения — сразу, без анимации.Иконки-переключатели обычно управляют звуком, показом пароля, открытием меню, воспроизведением и лайками.
- interaction="click-replay"Иконки с анимацией по клику64 иконкиПроигрывается заново с начала при каждом клике, если не включено уменьшение движения.Анимация по клику обычно подтверждает отправку, сохранение, обновление, скачивание, добавление в корзину и форматирование.
- interaction="hover"Иконки с анимацией при наведении21 иконкаПроигрывается вперёд на mouseenter и назад на mouseleave.Анимацию при наведении обычно используют для пунктов навигации, кнопок удаления, настроек, управления масштабом и ссылок на соцсети.
- interaction="hover-replay"Иконки с разовой анимацией при наведении144 иконкиПроигрывается один раз на mouseenter, если не включено уменьшение движения. Уход курсора анимацию не останавливает, а повторное наведение во время проигрывания не запускает её заново.Разовая анимация при наведении обычно оживляет ссылки со стрелками, списки возможностей, кнопки панелей инструментов и карточки лендинга.
- interaction="hover-loop"Иконки с циклической анимацией при наведении13 иконокПроигрывается в цикле, пока на иконку наведён курсор, после mouseleave доигрывает текущий цикл, а при уменьшении движения остаётся статичной.Циклическую анимацию при наведении обычно используют для ссылок на соцсети, приглашений в сообщество, ссылок на портфолио и выбора языка.
Как выбрать взаимодействие
- Длящееся состояние, например загрузка или активное предупреждение: цикл.
- Элемент «вкл/выкл», например звук, меню или показ пароля: переключение по клику, с
activeдля контролируемого состояния. - Разовое действие, например отправка, сохранение или обновление: повтор по клику.
- Намёк на то, что откроет ссылка: наведение, анимация откатывается назад, когда курсор уходит.
- Панели инструментов и списки, по которым быстро проводят курсором: повтор при наведении, анимация доигрывает сама.
- Ссылки, на которых хочется задержаться, например иконки соцсетей: цикл при наведении.
Уменьшение движения
React-компонент учитывает prefers-reduced-motion и реагирует на изменение настройки. Касания сенсорного экрана никогда не запускают hover-анимации.
loop: иконка не запускается автоматически и остаётся на статичном первом кадре.click-toggle: клик сразу переключает иконку в другое состояние, без промежуточной анимации.click-replay: клики по-прежнему доходят до вашего обработчика, но анимация не проигрывается.hover: наведение не запускает анимацию.hover-replay: наведение не запускает анимацию.hover-loop: иконка при наведении остаётся статичной.