React-Native Animasyon İşlemleri Nasıl Yapılır?

Mobil uygulamalarda animasyonların kullanılması, uygulamanın hissiyatını büyük oranda etkilemektedir. Kullanıcılar hızlı ve akışkan uygulamaları kullanmayı tercih ederler. Animasyonlar bu akıcılığı sağlamaktadır. Animasyonlar, kullanıcının uygulamada neler olup bittiğini ve uygulamayı nasıl kullanacağını daha iyi anlamasına yardımcı olur. Örneğin, bir hatayı kullanıcıya animasyon ile bildirmek kullanıcının, hatalı bir işlem yaptığı için yaşayacağı hayal kırıklığını hafifleterek daha güzel bir deneyim sunar veya servisten gelen veriyi beklerken kullanıcının sıkılmaması ve uygulamanın donmadığını bir işlem yürütmeye devam ettiğini kavraması amacıyla yükleniyor ( loading ) animasyonları kullanılır.

İçindekiler

React-native Animated Nedir?

React-Native, animasyon oluşturmak için kendi içerisinde “animated” isimli bir kütüphane sunar. Bu kütüphane ile uygulamalarda kullanılan “view, image, text, flatlist” gibi bileşenlere animasyonlar uygulanır. Bu kütüphane, bir olaya bağlı olarak çalıştırılıp süresi bitince durdurulabilen fonksiyonlar içerir. Bileşenlerin style özellikleri değiştirilerek kullanıcıya akıcı bir deneyim sunar.

Animated Metodları Nelerdir?

Animated kütüphanesinin içerisinde, animasyon oluşturmayı sağlayan üç farklı metod vardır.

1 - Animated.decay

Bu fonksiyon, başlangıçta verilen hız ile animasyon başlatır ve yavaş yavaş bitirir.

Animated.decay(value, {  
  toValue: 100,  
}).start();

2 - Animated.spring

Bu fonskiyon, bir yay hareketi olarak düşünülebilir. Yaylar sıkışır ve eski hallerine geri dönerler. Ancak eski hallerine hemen değil birkaç seferde ulaşırlar. Animasyonda bu mantıkla çalışır. Örneğin, bir bileşen belirli bir büyüklüğe gelip tekrar eski haline dönerken birkaç adımda bu gerçekleşir. Veya bir bileşen ekranın sol tarafından gelip sağ tarafta çarpma efekti yaratıp orada durur.

Animated.spring(value, {  
  toValue: 100,  
  friction: 5  
}).start();

Aşağıdaki örnekte sağ tarafta bulunan “+” ve “–“ işaretleri tıklanarak "spring" fonksiyonunun “friction” isimli option değeri değiştirilir. Değer arttıkça oluşturulan kutunun hareketindeki salınım azalır. Değer azaldıkça kutunun salınımı artar.

3 - Animated.timing

Bu fonksiyon bileşenin hareket hızını zamanla değiştirmek için kullanılır. Örneğin 3 saniye içerisinde ekranın sol tarafından sağ tarafına doğru hareket et gibi.

Animated.timing(value, {  
  toValue: 100,  
  duration: 2000  
}).start();

Animasyon uygulanacak bileşenler uygun olan, Animated.View, Animated.Text vb gibi animated bileşenleri ile sarılır. Animasyon uygulanacak bileşene başlangıç değeri verilmesi zorunludur. Bu işlem Animated.Value veya Animated.ValueXY sınıfları ile belirtilir. Animate.ValueXY genellikle bir bileşenin yer değiştirmesi gereken animasyonlarda kullanılmaktadır. Bu değerler, style özelliklerinin ilk değerleri olur. Örneğin, bir bileşenin yükseklik değeri Animated.Value ile belirlenir. Daha sonra animasyon fonksiyonları ile bu değer değiştirilerek nesneye uygulanır. Böylelikle bir olay tetiklendiğinde nesnenin yüksekliği animasyonlu şekilde artırılabilir.

const value = new Animated.Value(0)
const value = new Animated.ValueXY({x: 0, y: 0})

Yukarıdaki gibi genelde global değişken veya state olarak tanımlanır. Buraya kadar anlatılanlar aşağıdaki gibi örneklenir;

import React from 'react';  
import {  
  SafeAreaView,  
  StatusBar,  
  ScrollView,  
  StyleSheet,  
  View,  
  Animated,  
  TouchableOpacity,  
  Text,  
} from 'react-native';  
  
class App extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = {};  
    this.value = new Animated.Value(0);  
  }  
  
  goster = () => {  
    Animated.timing(this.value, {  
      toValue: 1,  
      duration: 2000,  
      useNativeDriver: false,  
    }).start();  
  };  
  
  gizle = () => {  
    Animated.timing(this.value, {  
      toValue: 0,  
      duration: 2000,  
      useNativeDriver: false,  
    }).start();  
  };  
  
  render() {  
    return (  
      <>  
        <StatusBar barStyle="dark-content" />  
        <SafeAreaView>  
          <ScrollView>  
            <View style={styles.container}>  
              <Text>Timing Örneği</Text>  
              <Animated.View  
                style={[styles.animatedView, {opacity: this.value}]}  
              />  
              <View style={{flexDirection: 'row', width: '100%', justifyContent: 'space-around'}}>  
                <TouchableOpacity  
                  style={styles.touchable}  
                  onPress={() => this.goster()}  
                >  
                  <Text style={styles.text}>Göster</Text>  
                </TouchableOpacity>  
                <TouchableOpacity  
                  style={styles.touchable}  
                  onPress={() => this.gizle()}  
                >  
                  <Text style={styles.text}>Gizle</Text>  
                </TouchableOpacity>  
              </View>  
            </View>  
          </ScrollView>  
        </SafeAreaView>  
      </>  
    );  
  }  
}  
  
const styles = StyleSheet.create({  
  container: {  
    height: '100%',  
    alignItems:'center',  
  },  
  animatedView: {  
    width: 100,  
    height: 100,  
    backgroundColor: 'orange',  
    marginTop: 10,  
  },  
  touchable: {  
    width: "40%",  
    marginTop: 20,  
    height: 50,  
    backgroundColor: 'blue',  
    justifyContent: 'center',  
    alignItems: "center",  
  },  
  text: {  
    color: 'white',  
  }   
});  
  
export default App;

Yukarıdaki örnekte bir view bileşeninin göster butonu tıklanması ile ekranda yavaş yavaş belirmesi ve gizle butonu tıklandığında yavaş yavaş silinmesini sağlar. Bunu yaparken ilk olarak constructorda global bir value değeri belirlenir. Bu değer aslında bileşenin opacity style özelliğinin ilk değeri oldu.

this.value = new Animated.Value(0);

Daha sonra bu değer, Animated.Timing fonksiyonu ile 2 saniye içerisinde değiştirilerek bileşenin opacity style özelliği değiştirilmiş oldu. Bileşene animasyon aşağıdaki gibi style özelliğine eklenerek uygulanır.

<Animated.View
  style={[styles.animatedView, {opacity: this.value}]}  
/>

Çalışma Sıralamasına Bağlı Animated Metodları

Animated kütüphanesi içerisinde temel animasyon fonksiyonlarının dışında fonksiyonlarda barındırır. Bu fonksiyonlar birden fazla animasyonun beraber çalışması, sırayla çalışması gibi fonksiyonlardır.

1 - Animated.delay :

Belirli bir gecikmeden sonra animasyonu başlatır. Aslında bu timing fonksiyonunda option olarak verilebilen bir özelliktir. Bu özelliği bulundurmayan fonksiyonlar için kullanılmaktadır.

Animated.delay(3000)

2 - Animated.parallel

Aynı anda birden fazla animasyonu başlatmak için kullanılır. Animasyonlar aynı anda başlatılır. Süresi biten animasyon bitirilir.

Animated.parallel ([  
  Animated.timing({
    …  
  }),  
	  
  Animated.timing({  
    …  
  })  
]).start();

Yukarıda bulunan örnekte buton tıklanarak animasyon başlatılır. Turuncu kutu spring animasyonuna göre hareket eder. Kırmızı kutu ekranın sağ tarafından timing fonksiyonu ile sol tarafa doğru hareket eder. Gri kutunun genişliği yine timing fonksiyonu ile değişir. Bu üç animasyon parallel fonksiyonu sayesinde aynı anda tetiklenir.

3- Animated.sequence

Animasyonları sırasıyla başlatır. Bir önceki animasyon bitmeden diğer animasyon başlamaz.

Animated.sequence ([  
  Animated.timing({  
    …  
  }),  
	  
  Animated.spring({  
    …  
  })  
]).start();

4 - Animated.stagger

Animasyonları ardışık gecikmeler ile sırasıyla ve paralel olarak başlatır.

Animated.stagger (10000, [  
  Animated.timing({  
    …  
  }),  
	  
  Animated.spring({  
    …  
  })
]).start();

React-Native Lottie Animasyon

React-Native uygulamalarında animasyon oluşturmak için sadece animated kütüphanesi bulunmamaktadır. Animated kütüphanesi, React-Native ile entegre şekilde yüklendiği için fazlasıyla tercih edilmektedir. Bunun dışında kullanılabilecek olan kütüphanelerden bir tanesi de “lottie” kütüphanesidir. Lottie kütüphanesi, Adobe After Effect ile hazırlanmış olan animasyonları mobil cihazlarda kullanılabilir hale getirir. Kullanımı oldukça basittir. “Lottie” kütüphanesinin web sitesinden animasyonlar json dosyası olarak indirilerek, uygulamalarda kullanılır.

Lottie Kurulumu

İlk olarak uygulamaya “lottie” paketleri kurulur.

npm install lottie-react-native
npm install lottie-ios@3.1.3

Bu adımdan sonra yapılması gereken, bu adresten animasyon seçip json dosyası biçiminde indirmek ve indirilen json dosyasını proje klasörünün içerisine atmaktır.

Bu adımdan sonra ise, istenen sayfada lottie kütüphanesi import edilip, bileşen olarak çağırılabilir.

import LottieView from ‘lottie-react-native’;

Çağırılan bileşenin source propuna, indirilen json dosyanın yolu gösterilmelidir. Bileşene autopPlay propu yollayarak animasyonun yüklendiğinde çalışması sağlanır.

<View style={styles.container}>  
  <LottieView  
    style={{height: 200}}  
    source={require('./animate_1.json')}  
    autoPlay  
  />  
</View>

Artık istenen “lottie” animasyonunu indirilerek, “LottieView” bileşeni vasıtasıyla uygulamalara çağırılıp kullanılabilir.

Sonuç

Yukarıda anlatılanların örnek kodlarını görmek ve cihazınızda denemek için bu github reposunu ziyaret edebilirsiniz.

React-native ile geliştirmiş olduğumuz bazı uygulamalarımıza erişmek için;

Burak Yılmazer

Software Developer