6 etkileşim · 300 ikon

Animasyonlu ikon etkileşimleri

Her ikon kendisi için tasarlanan mikro etkileşimle gelir: döngüde oynar, tıklandığında durum değiştirir ya da baştan oynar veya hover’da oynar. React bileşeni bunu kendisi bağlar ve azaltılmış hareket tercihine uyar; interaction prop’u da herhangi bir ikonu başka bir etkileşime geçirir.

interaction="loop"Döngüsel animasyonlu ikonlar21 ikonKesintisiz oynar; azaltılmış hareket tercih edildiğinde statik ilk karede kalır.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.
interaction="click-toggle"Tıklayınca durum değiştiren animasyonlu ikonlar37 ikonTıklandığında iki durum arasında geçiş yapar; azaltılmış hareket tercih edildiğinde ise animasyonsuz, anında geçer.Tıklayınca durum değiştiren ikonlar genellikle sesi kapat/aç, şifreyi göster/gizle, menü/kapat, oynat/duraklat ve beğen düğmelerinde kullanılır.
interaction="click-replay"Tıklamalı animasyonlu ikonlar64 ikonAzaltılmış hareket tercih edilmediği sürece her tıklamada baştan bir kez oynar.Tıklamalı ikonlar genellikle gönder, kaydet, yenile, indir, sepete ekle ve biçimlendirme düğmelerinde işlemi onaylar.
interaction="hover"Hover efektli animasyonlu ikonlar21 ikonmouseenter’da ileri, mouseleave’de geri oynar.Hover efektli ikonlar genellikle navigasyon öğelerinde, sil düğmelerinde, ayarlarda, yakınlaştırma kontrollerinde ve sosyal medya bağlantılarında kullanılır.
interaction="hover-replay"Hover’da oynayan animasyonlu ikonlar144 ikonAzaltılmış hareket tercih edilmediği sürece mouseenter’da bir kez oynar. İmlecin ayrılması animasyonu durdurmaz; oynarken yeniden üzerine gelmek de baştan başlatmaz.Hover’da oynayan ikonlar genellikle ok bağlantılarına, özellik listelerine, araç çubuğu düğmelerine ve landing page kartlarına canlılık katar.
interaction="hover-loop"Hover’da döngüye giren animasyonlu ikonlar13 ikonHover süresince döngüde oynar, mouseleave’den sonra mevcut turu tamamlar ve azaltılmış hareket tercih edildiğinde statik kalır.Hover’da döngüye giren ikonlar genellikle sosyal medya bağlantılarında, topluluk davetlerinde, portföy bağlantılarında ve dil seçicilerde kullanılır.

Etkileşim seçimi

Süren bir durum, örneğin yükleme ya da aktif bir uyarı: döngü.
Bir aç/kapa kontrolü, örneğin sesi kapatma, menü ya da şifreyi gösterme: tıklayınca geçiş; kontrollü state için active ile.
Tek seferlik bir işlem, örneğin gönder, kaydet ya da yenile: tıklayınca tekrar.
Bir bağlantının ne açacağına dair ipucu: hover; imleç ayrılınca geri oynar.
İmlecin hızla üzerinden geçtiği araç çubukları ve listeler: hover’da tekrar; kendiliğinden tamamlanır.
Daha uzun bakmaya davet eden bağlantılar, örneğin sosyal medya ikonları: hover’da döngü.

Azaltılmış hareket

React bileşeni prefers-reduced-motion ayarını izler ve ayar değiştiğinde güncellenir. Dokunmatik ekranlarda dokunmak hover animasyonlarını asla başlatmaz.

loop: ikon otomatik oynamaz ve statik ilk karesinde kalır.
click-toggle: tıklama, aradaki animasyon olmadan anında diğer duruma geçer.
click-replay: tıklamalar yine handler’ınıza ulaşır, ancak animasyon oynamaz.
hover: hover animasyonu oynatmaz.
hover-replay: hover animasyonu oynatmaz.
hover-loop: ikon hover sırasında statik kalır.