Animated1.0.0

Yaklaşık 5 dakika · React 16.8+ · React DOM

Başlarken

Kurulumdan hareketlere, giriş ve çıkış animasyonlarına altı adımda. Her adım çalışan küçük bir bileşendir.

  1. Kurulum

    Animated'ın çalışma zamanı bağımlılığı yoktur. React 16.8+ bir peer bağımlılıktır.

    Paketin giriş noktası 'use client' ile işaretlidir. Next.js App Router'da bir sunucu layout'u AnimatedProvider render edebilir; hook'ları ve Animated.<tag>'i Client Components içinde kullanın.

    npm install @kkwaenggwari/animated

    @kkwaenggwari/animated import'u düzenleyicinizde çözümlenir.

  2. İlk değeri hareket ettirin

    useAnimatedValue(1) bileşenin ömrü boyunca canlı bir sayının sahibidir. Onu doğrudan style içine koyun: bir CSS değişkenine dönüşür, bu yüzden React değiştikçe render etmez.

    timing(value, { toValue, duration }).start() onu hareket ettirir. Yarı yolda yeniden basmak mevcut opaklıktan başlar.

    Örnek hazırlanıyor…

    Çerçeve solup geri gelir; yarı yoldaki ikinci basış, olduğu yerden yönü tersine çevirir.

  3. Tek değerden birçok çıktı türetin

    interpolate değeri uzunluklara, açılara ya da sayılara eşler. Easing olmadan aynı değişkenin kesin bir calc() ifadesi olur; beş şerit birinin maliyetine çıkar.

    Aynı değerin farklı girdi aralıkları, beş ayrı animasyon olmadan bir kademe oluşturur.

    Örnek hazırlanıyor…

    Tek basış beş şeridi kademeli olarak hareket ettirir; yayılımı değiştirmek yalnızca aralıkları değiştirir.

  4. Hedefi tanımlayın

    Animated.button sıradan bir düğme render eder. seed ilk karedir, pose şu an nerede olması gerektiği, tempo ise oraya nasıl gideceğidir.

    pose yarı yolda değişince öğe ekrandaki yerinden döner ve yayla hızını korur.

    Örnek hazırlanıyor…

    Sekmelere hızlıca tıklamak hiçbirinin zıplamasına yol açmaz.

  5. Girdiyi bağlayın

    input(ref, moveInput(...)) işaretçi koordinatlarını değerlere yazar. follow(target, source) bir değerin yayla başka bir değeri izlemesini sağlar.

    useAnimated factory'sinde bildirilen her şey bileşene aittir: listener'lar ve yaylar ayrılınca ya da bir bağımlılık değişince durur.

    Örnek hazırlanıyor…

    Kart işaretçiye doğru eğilir ve işaretçi gidince sakinleşir.

  6. Ayrılışı canlandırın

    Bir React çocuğunu kaldırmak normalde onu hemen siler. Animated.Keep, key'li çocukları depart pose'ları bitene kadar tutar.

    wait yeni çocukları yalnızca tüm ayrılışlar bittiğinde render eder.

    Örnek hazırlanıyor…

    Atılan mesajlar kaybolmadan önce seçilen hareketle ayrılır.

Artık tüm modele sahipsiniz

Değerler, hedefler, girdi ve ayrılışlar aynı denetleyicileri, kesinti kurallarını ve temizliği paylaşır. Kılavuzlar her birini ayrıntılı ele alır.

Ara

Belgelerde aramak için yazın.