21 ikon · interaction="loop"

Döngüsel animasyonlu ikonlar

Bu ikonlar ekranda kaldıkları sürece kesintisiz oynar; bu yüzden süren durumlara uyarlar: bir şey yükleniyor, bir uyarı aktif, bir terminal bekliyor. Azaltılmış hareket tercih edildiğinde ilk karede durur ve normal bir ikon gibi okunurlar.

“Döngü” etkileşimli tüm ikonlar

Nasıl davranır

Kesintisiz oynar; azaltılmış hareket tercih edildiğinde statik ilk karede kalır.

Azaltılmış hareket tercih edildiğinde ikon otomatik oynamaz ve statik ilk karesinde kalır. Bunların hepsini React bileşeni halleder; siz yalnızca ikonu seçersiniz.

Nerede kullanılır

Yükleme spinner’ları ve ilerleme göstergeleri
Aktif uyarı ve hata durumları
Canlı yayın ve kayıt göstergeleri
Hero bölümlerinde aşağı kaydır ipuçları
Yeni bildirimler için dikkat işaretleri

Kategoriye göre

Uyarılar · 4
Alert circle, Alert octagon, Alert triangle, Error
Bildirimler · 2
Notification V3, Notification V4
Navigasyon · 2
More Horizontal, More Vertical
Eylemler · 2
Checkmark, Help
Medya · 1
Airplay
Geliştirme · 1
Terminal
Yükleme · 5
Infinity, Loading circular, Loading V2, Loading V3, Loading V4
Diğer · 4
Activity, Arrow down, Arrow up, Scroll down

React’te kullanın

Burada listelenen ikonlar varsayılan olarak bu etkileşimi oynatır. Diğer ikonlar da kullanabilir: interaction prop’unu geçmeniz yeterli.

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

// Settings normalde 'hover' kullanır
<UseAnimations animation={settings} interaction="loop" size={32} />

Döngüler otomatik oynar ve ekranın dışına kaydırıldıklarında duraklar. speed ile yavaşlatabilir, loop={false} ile bir kez oynatabilir ya da autoplay={false} ile sabit tutabilirsiniz:

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

<UseAnimations animation={infinity} speed={0.5} />      // yarı hız
<UseAnimations animation={infinity} loop={false} />     // bir kez oynar, sonra durur
<UseAnimations animation={infinity} autoplay={false} /> // statik ilk kare

Tüm prop’lar dokümantasyonda. React dışında ikonlar Lottie JSON dosyalarıdır; etkileşimlerin lottie-web ile nasıl yeniden oluşturulacağını Lottie ikonları sayfası gösterir.

Sık sorulan sorular

Hangi ikonlar “Döngü” etkileşimini kullanır?

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 ve 6 ikon daha. Döngüsel ikonlar genellikle yükleme spinner’larında, aktif uyarılarda, çalan bir zilde ya da aşağı kaydır ipucunda kullanılır.

Kullanıcı azaltılmış hareketi tercih ederse ne olur?

Azaltılmış hareket tercih edildiğinde ikon otomatik oynamaz ve statik ilk karesinde kalır. React bileşeni prefers-reduced-motion ayarını okur ve ayar değiştiğinde güncellenir; bunun için kod yazmanız gerekmez.

Bir ikonun etkileşimini nasıl değiştiririm?

Her ikon kendisi için tasarlanan etkileşimi oynatır. Herhangi bir ikona bu davranışı vermek için interaction="loop" geçin; başka bir davranış için başka bir değer ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') kullanın. Oynatmayı autoplay, loop ve speed prop’larıyla ayarlayabilirsiniz.