07.02.01. Animated.timing()

Aynı anda bir dizi animasyonun tümünü başlatır.

İlk örnekte bu metodu kullanmıştık. Bu metodu daha açacak olursak:

Animated.timing iki parametresi vardır. Birinci parametre değişecek değişkeni belirtirken ikinci parametre 4 alt parametreden oluşur. Bu 4 parametre (toValue (ulaşacağı değer), duration (süre), easing (yumuşatma türü) ve delay (geçikme süresi)) bu değerin ayarlanmasında kullanılır. Ekrandaki bir resmi döndürme işlemi yapan bir örnek yapalım. Easing hakkında bir sonraki bölümde bir örnek yapacağız.

donusDegeri değişkenine yeni bir Animated.Value tanımlıyoruz ve başlangıç için 0 (sıfır) atıyoruz. componentDidMount olduğunda dondur fonksiyonunu başlatıyoruz. Bu fonksiyon:

  • donusDegeri değişkenini kullanarak render metoduna verileri taşır.
  • Animated.timing metodunu çağırır. start methodunu çağırdık ve içinde bir callback fonksiyon tanımladık. Bu metodun parametreleri ayarlandıktan sonra start metodunu çağrılır. Olayın tekrarlaması için bir callback fonksiyonu da ekledik.

render bölümündeki this.donusDegeri.interpolate fonksiyonu ile const don değerine 0deg ile 360deg arasında bir geçiş attık. interpolate() methodu inputRange’e girilen değerleri outputRange’e uygun olarak değiştirir ve değerleri oluşturur. Başka bir deyişle 0-1 (veya 0-100 değiştirilebilir) arasındaki değerler interpolate sayesinde 0deg ile 360deg arasına çevrilir. Aynı işlemleri renkler içinde uygulanabilir.  Son olarak, Animated.Image bileşeninin style içindeki transform özelliği rotate: don ile dinamik olarak timing üzerinden ayarlanır.