React Native’de animasyonlar çok geniş bir yapılandırma imkanı sunar.
Animated API ile animasyon oluşturmak için kullanılan üç temel metot vardır:
- Animated.timing() – Zaman’a göre değeri kademeli olarak değiştirir. Bir önceki örnekte 0 ile 1 arasındaki değeri 10 saniye içinde arttırmıştır.
- Animated.decay() – Bir başlangıç başlar ve kademeli olarak yavaşlar.
- Animated.spring() – Bir değerin diğer değeri takip edebilmesi için kullanılır.
Bu üç animasyon metodu ile birlikte, bu animasyonları ayrı ayrı kullanmak yerine birden fazla animasyon metodunu birlikte çağırmanın yolları da vardır.
- Animated.parallel() – Aynı anda bir dizi animasyonun tümünü başlatır.
- Animated.sequence() – Bir dizi animasyonu sıra ile başlatır ve her animasyonun bir sonraki animasyona başlamadan önce tamamlanmasını bekler. Çalışan animasyon durdurulursa, diğer animasyonlar başlatılamaz.
- Animated.stagger() - Animasyon dizisi paralel çalışabilir (overlap), fakat ardışık gecikmelerle sıra ile başlatılır. Animated.parallel() işlevine çok benzer, fakat burada animasyonlara gecikmeler (delay) eklenebilir.
Kaynak
- Bu bölümü hazırlarken linkteki siteden alınan kodları kullandım.