21 ikon · interaction="loop"

Animované ikony ve smyčce

Tyto ikony se přehrávají nepřetržitě, dokud jsou na obrazovce, takže se hodí pro stavy, které trvají: něco se načítá, platí varování, terminál čeká. Když uživatel preferuje omezený pohyb, zastaví se na prvním snímku a fungují jako běžná statická ikona.

Všechny ikony s interakcí „smyčka“

Jak se chová

Přehrává se nepřetržitě; když uživatel preferuje omezený pohyb, zůstane na statickém prvním snímku.

Když uživatel preferuje omezený pohyb, ikona se automaticky nespustí a zůstane na statickém prvním snímku. O to všechno se postará React komponenta, vy jen vyberete ikonu.

Kde ji použít

Spinnery načítání a indikátory průběhu
Aktivní varování a chybové stavy
Indikátory živého vysílání a nahrávání
Výzvy k posunu dolů v úvodních sekcích
Upoutání pozornosti na nové notifikace

Podle kategorie

Upozornění · 4
Alert circle, Alert octagon, Alert triangle, Error
Notifikace · 2
Notification V3, Notification V4
Navigace · 2
More Horizontal, More Vertical
Akce · 2
Checkmark, Help
Média · 1
Airplay
Vývoj · 1
Terminal
Načítání · 5
Infinity, Loading circular, Loading V2, Loading V3, Loading V4
Ostatní · 4
Activity, Arrow down, Arrow up, Scroll down

Použití v Reactu

Ikony v tomto seznamu přehrávají tuto interakci ve výchozím nastavení. Použít ji může i kterákoli jiná ikona: stačí jí předat prop interaction.

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

// Settings jinak používá 'hover'
<UseAnimations animation={settings} interaction="loop" size={32} />

Smyčky se spouštějí automaticky a mimo viditelnou část stránky se pozastaví. Zpomalíte je pomocí speed, jen jednou je přehrajete s loop={false} a v klidu je necháte s autoplay={false}:

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

<UseAnimations animation={infinity} speed={0.5} />      // poloviční rychlost
<UseAnimations animation={infinity} loop={false} />     // přehraje se jednou a zastaví
<UseAnimations animation={infinity} autoplay={false} /> // statický první snímek

Všechny props najdete v dokumentaci. Mimo React jsou ikony Lottie JSON soubory; jak interakce vytvořit s lottie-web, ukazuje stránka Lottie ikony.

Časté dotazy

Které ikony používají interakci „smyčka“?

21 ikon: Alert circle, Alert octagon, Alert triangle, Error, Notification V3, Notification V4, More Horizontal, More Vertical, Checkmark, Help, Airplay, Terminal, Infinity, Loading circular, Loading V2 a 6 dalších. Ikony ve smyčce obvykle slouží jako spinnery načítání, aktivní upozornění, zvonící zvonek nebo nápověda k posunu dolů.

Co se stane, když uživatel preferuje omezený pohyb?

Když uživatel preferuje omezený pohyb, ikona se automaticky nespustí a zůstane na statickém prvním snímku. React komponenta čte prefers-reduced-motion a reaguje i na změnu nastavení, takže pro to nemusíte psát žádný kód.

Jak změnit interakci ikony?

Každá ikona přehrává interakci, pro kterou byla navržena. S interaction="loop" získá toto chování kterákoli jiná ikona, jinou hodnotou ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') ho změníte. Přehrávání dál upravují props autoplay, loop a speed.