React Native'de Rotasyon Animasyonu Oluşturma

Bu derste, basıldığında 720 derece dönen bir düğmenin nasıl oluşturulacağını göstereceğim. Rotasyon animasyonunu oluşturmak için React Native Animated animasyon sistemini kullanacağız.

Bileşeni oluşturma

İlk olarak, içinde bir metin bulunan ButtonWithSpinbir bileşene sahip olan işlevsel bileşeni oluşturuyoruz .TouchableOpacity

Animated.TextMetnin bileşen kullanılarak oluşturulduğuna dikkat edin . Bunun nedeni, döndürülecek metnin canlandırılabilir olması gerektiğidir . Başka bir şey döndürüyorsanız, bu bileşenlerden herhangi birini de kullanabilirsiniz:

• Animated.Image
• Animated.ScrollView
• Animasyonlu.Görüntüle
• Animated.Text
• Animated.FlatList
• Animated.Bölüm Listesi

handleAnimation işlevi

Animated.timing()hareket hızı işlevlerini kullanarak zaman içinde bir değeri canlandırır . Varsayılan olarak, easeInOutyaptığımız şey için mükemmel olan eğriyi kullanır. Değerimizi ve süreyi 800ms rotateAnimationolarak belirlediğimiz bir yapılandırma değeri iletiyoruz. Animasyon çağrılarak başlatılır start()ve animasyonu sıfırlayan bir geri çağırma işlevi ekleriz.

enterpolasyon

Yöntem interpolate(), girdi aralıklarını çıktı aralıklarına eşler. 0–1 aralığını 0–100 aralığına dönüştürmek için temel bir eşleme şöyle olacaktır:

value.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 100]
});

Az önce oluşturduğumuz döndürme değerine sahip animatedStylebir dizi içeren nesneyi de oluşturduk.transforminterpolateRotating

Her şeyi bir araya getirmek

animtedStyleNesneyi Animated.Textbileşene ve a'yı bileşene widthekleyin ve TouchableOpacityişimiz bitti!

Son ürün böyle görünüyor:

Ve kod:

Ve işte bizde var. Umarım bunu faydalı bulmuşsunuzdur. Bu, Medium'daki ilk gönderimdi, bu nedenle herhangi bir geri bildirim büyük beğeni topluyor!