28 ikon · licence MIT

Animované ikony přehrávače médií

Přehrát a pozastavit, hlasitost, mikrofon, kamera, přeskočení a náhodné pořadí pro audio a video přehrávače. Přepínací ikony střídají své dva stavy, přehrát a pauza nebo mikrofon a ztlumení, takže tlačítko vždy ukazuje, co kliknutí udělá.

Kategorie obsahuje 28 ikon: 1 se přehrává ve smyčce, 10 se kliknutím přepíná mezi dvěma stavy, 6 se přehraje při každém kliknutí a 11 se při najetí myší jednou přehraje. Každá ikona je k dispozici jako React komponenta, komponenta pro shadcn/ui, Lottie JSON animace a statické SVG, zdarma i pro komerční použití pod licencí MIT.

Všechny ikony v kategorii Média

Kde je použít

Tlačítka přehrát a pozastavit v audio a video přehrávačích
Ztlumení a zrušení ztlumení ve videohovorech
Zapnutí a vypnutí kamery v aplikacích pro schůzky
Ovládání playlistu: přeskočit, opakovat a náhodně
Tlačítka pro casting a AirPlay
Ovládání v podcastových a hudebních aplikacích

Podle interakce

Animované ikony ve smyčce · 1
Přehrává se nepřetržitě; když uživatel preferuje omezený pohyb, zůstane na statickém prvním snímku. Airplay.
Animované ikony přepínané kliknutím · 10
Kliknutím se přepíná mezi dvěma stavy; když uživatel preferuje omezený pohyb, přepne se okamžitě. Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume.
Animované ikony na kliknutí · 6
Při každém kliknutí se jednou přehraje od začátku, pokud uživatel nepreferuje omezený pohyb. Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle.
Animované ikony s přehráním při hoveru · 11
Při najetí myší (mouseenter) se jednou přehraje, pokud uživatel nepreferuje omezený pohyb. Odjetí myši ji nezastaví a nové najetí během přehrávání ji nespustí znovu. Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV.

Přidejte ikonu do aplikace

V Reactu nainstalujte react-useanimations a naimportujte ikonu; svou interakci „přepínání kliknutím“ přehraje sama. Všechny ikony v této kategorii fungují stejně: playPause jen nahraďte názvem ze stránky požadované ikony.

npm install react-useanimations

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

<UseAnimations animation={playPause} size={32} />

Se shadcn/ui vám CLI přidá hotovou komponentu:

npx shadcn@latest add https://useanimations.com/r/play-pause.json

import { AnimatedPlayPause } from '@/components/animations/play-pause';

<AnimatedPlayPause size={24} />

Nepoužíváte React? Každá ikona je Lottie JSON soubor na adrese /icons/<id>.json; přehrávače pro web, iOS, Android a Flutter popisuje stránka Lottie ikony.

Časté dotazy

Které animované ikony přehrávače médií sada obsahuje?

28 ikon: Airplay, Aperture, Camera, Camera Off, Cast, Disc, Fast Forward, Film, Headphones, Mic Off, Microphone, Microphone V2 a 16 dalších. Všechny můžete zdarma používat v osobních i komerčních projektech pod licencí MIT, bez nutnosti uvádět autora.

Jak použít animované ikony přehrávače médií v Reactu?

Nainstalujte react-useanimations, přidejte import playPause from 'react-useanimations/lib/playPause' a vykreslete <UseAnimations animation={playPause} size={32} />. Ikona přehraje svou interakci „přepínání kliknutím“ a převezme barvu textu. Se shadcn/ui místo toho spusťte npx shadcn@latest add https://useanimations.com/r/play-pause.json.

Můžu animované ikony přehrávače médií použít i bez Reactu?

Ano. Každá ikona je Lottie JSON soubor na adrese https://useanimations.com/icons/<id>.json (například https://useanimations.com/icons/play-pause.json), který přehraje lottie-web, lottie-ios, lottie-android nebo balíček lottie pro Flutter; statická SVG najdete na stránce každé ikony (stránky ikon jsou v angličtině). Žádná z nich nepoužívá výrazy (expressions), takže stačí light build lottie-web.