Skill'in Kendi İfadeleriyle
React Native ve Expo'da hareket için bir yapılandırma skill'i. Bir animasyon isteğini, gerçek bir cihazda incelemeden geçen bir uygulamaya dönüştürür ve kararları doğru hissettirip hissettirmediğini belirleyen sırayla verir: hiç animasyonlanmalı mı, hangi thread'de çalışmalı, hangi özellikler, spring mi timing mi, jest nasıl devralınmalı, nasıl kademeli olarak zayıflamalı.
Her şey üç mobil gerçeğinden çıkar: hover yoktur, iki runtime vardır ve kullanıcının parmağı öğenin üzerindedir. Bir Expo uygulamasını animasyonlandıran, jest ekleyen, sheet, ekran geçişi, basma geri bildirimi veya haptik ekleyen ya da cihazda takılan hareketi düzeltmek isteyen herkes için. Kod Reanimated, Gesture Handler, Expo Router ve expo-haptics ile yazılır.
Neler üretir
- Seçenek olarak sunulmak yerine doğrudan yazılmış uygulama kodunun kendisi.
- Frekans katmanını ve adlandırılmış amacı belirten, neyin ve neden reddedildiğini de içeren kısa bir kapı sonucu.
- Malzeme satırı: araç, özellikler, spring veya curve artı süre ve işin hangi runtime üzerinde gerçekleştiği.
- Jest teslimi ve haptik zamanlaması koddan okunamayacağı için, bir cihazda hissederek kontrol edilmesi gerekenlerin listesi.
Nasıl Çalışır
- 01Animasyonu Her Şeyden Önce Kapıdan Geçir
Bir frekans tablosu, hareketin gerçekleşip gerçekleşmeyeceğine karar verir; en üst katman durur ve hiç kod yazmaz. Sekmeler bir hiyerarşi değil eşit olduğundan sekme geçişleri asla kaymaz.
- 02Amacı Tek Kelimeyle Adlandır
Skill, devam etmeden önce tek kelimelik bir amaç zorlar — geri bildirim, uzamsal tutarlılık, durum belirtme, sert bir değişimi önleme, açıklama veya keyif; sonuncusu yalnızca nadir ilk deneyim anları için.
- 03İşe Yarayan En Ucuz Aracı Seç
Bir tabloda aşağı inin ve uyan ilk satırda durun: CSS transition, CSS keyframes, layout animation, shared value artı Gesture, ardından native stack, formSheet, NativeTabs, Link.Menu, RefreshControl, Lottie veya Skia.
- 04Animasyonlu Özellikleri Sınırla
Transform ve opacity hiçbir maliyete sahip değildir; diğer her şey her karede düğüm ve kardeşleri üzerinde Yoga'yı yeniden çalıştıran bir layout geçişi zorlar.
- 05Spring veya Timing'i Parmağa Göre Seç
Bir parmağın yönlendirdiği her etkileşim, hız bir kesintiden geçerek aktarılabilsin diye bir spring alır; diğer her şey timing curve kullanır, ease-in asla.
- 06Kareyi JS Thread'in Dışında Tut
Shared value'lar, React state yerine useAnimatedStyle'ı besler ve RN-runtime çağrıları bir gesture güncellemesi içinde tetiklenmek yerine onEnd'e veya bir eşik tepkisine itilir.