Перейти к содержимому
RU

21 иконка · interaction="loop"

Иконки с циклической анимацией

Эти иконки проигрываются непрерывно, пока они на экране, поэтому подходят для длящихся состояний: что-то загружается, действует предупреждение, терминал ждёт ввода. Если пользователь включил уменьшение движения, они останавливаются на первом кадре и выглядят как обычная иконка.

Все иконки со взаимодействием «Цикл»

Как это работает

Проигрывается непрерывно; если включено уменьшение движения, остаётся на статичном первом кадре.

Если пользователь включил уменьшение движения, иконка не запускается автоматически и остаётся на статичном первом кадре. Всё это берёт на себя React-компонент — вам остаётся только выбрать иконку.

Где использовать

  • Спиннеры загрузки и индикаторы прогресса
  • Активные предупреждения и ошибки
  • Индикаторы прямого эфира и записи
  • Подсказки «листайте вниз» в hero-блоках
  • Маркеры, привлекающие внимание к новым уведомлениям

По категориям

Использование в React

Перечисленные здесь иконки проигрывают это взаимодействие по умолчанию. Его можно задать и любой другой иконке — через проп interaction.

import UseAnimations from 'react-useanimations';
import settings from 'react-useanimations/lib/settings';

// Settings по умолчанию использует 'hover'
<UseAnimations animation={settings} interaction="loop" size={32} />

Зацикленные иконки запускаются сами и встают на паузу, когда уходят за пределы экрана. Замедлите анимацию через speed, проиграйте её один раз с loop={false} или оставьте неподвижной с autoplay={false}:

import infinity from 'react-useanimations/lib/infinity';

<UseAnimations animation={infinity} speed={0.5} />      // вдвое медленнее
<UseAnimations animation={infinity} loop={false} />     // проигрывается один раз и останавливается
<UseAnimations animation={infinity} autoplay={false} /> // статичный первый кадр

Все пропсы описаны в документации. Вне React иконки — это файлы Lottie JSON; на странице Lottie-иконки показано, как воссоздать взаимодействия с помощью lottie-web.

Частые вопросы

Какие иконки используют взаимодействие «Цикл»?

21 иконка: Alert circle, Alert octagon, Alert triangle, Error, Notification V3, Notification V4, More Horizontal, More Vertical, Checkmark, Help, Airplay, Terminal, Infinity, Loading circular, Loading V2 и ещё 6. Циклическую анимацию обычно используют для спиннеров загрузки, активных предупреждений, звенящего колокольчика и подсказки «листайте вниз».

Что происходит, если у пользователя включено уменьшение движения?

Если пользователь включил уменьшение движения, иконка не запускается автоматически и остаётся на статичном первом кадре. React-компонент читает prefers-reduced-motion и реагирует на изменение настройки, так что писать для этого код не нужно.

Как изменить взаимодействие иконки?

Каждая иконка проигрывает то взаимодействие, для которого её нарисовали. Передайте interaction="loop", чтобы так же вела себя любая другая иконка, или другое значение ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay'), чтобы сменить его. Воспроизведение настраивается пропсами autoplay, loop и speed.