React Native lottie animasyonları nasıl kullanılır?

Kullanıcı açısından, uygulamalardaki görselliğin bir artı puan sağladığı su götürmez bir gerçek. Statik halde duran resimler ve fotoğraflar, animasyonlar ile birlikte sunulduğunda, uygulamayı görsel bir şölen haline getirmektedir.

React Native’de animasyon oluşturmak için Animated API kullanılabilir. Fakat Animated API kullanarak animasyon üzerinde oturup uzun zaman harcamak yerine alternatif olarak Lottie animasyonlarını da kullanabilirsiniz. Lottie animasyonlarını en basit haliyle tanımlamak gerekirse, Adobe AfterEffects ile oluşturulan animasyonlardır diyebiliriz. Mobil uygulamalar, JSON halinde tutulan bu animasyon dosyalarını, native tarafta işleyerek uygun şekilde görüntüler. Çalışma tarzını bu yönden SVG’ye benzetebilirsiniz.

Dilerseniz lafı daha fazla uzatmadan Lottie Animasyonlarının uygulama içerisinde nasıl kullanılacağına değinelim.

Projenin oluşturulması

Öncelikle projeminizi oluşturalım ve boş haliyle çalıştıralım:

npx react-native init SampleRNLottie --template react-native-template-typescript
cd SampleRNLottie
npx react-native run-ios

Projemize lottie-react-native ve lottie-ios@3.1.3 kütüphanelerini ekleyelim, pod’ları yükleyelim, projeyi git’e ekleyelim ve vscode ile açalım:

yarn add lottie-react-native lottie-ios@3.1.3
npx pod-install
git init
git add .
git commit -m "First commit"
code .

Animasyon dosyasının indirilmesi

Animasyon dosyalarını lottiefiles.com üzerinden istediğiniz dosyayı seçerek JSON olarak indirebilirsiniz. Daha sonra animasyon dosyalarını projede barındırmak için animations isminde bir dizin oluşturarak içerisine atabilirsiniz.

Not: İndirdiğiniz dosyaların adını değiştirmenizi tavsiye etmiyorum. Çünkü dosya adı, aynı zamanda lottiefiles.com üzerindeki link’i de işaret etmektedir. İlerleyen zamanlarda JSON değil de MP4 veya GIF dosyasına ihtiyacınız olduğu durumda, direkt olarak dosya adı üzerinden ilgili sayfaya kolaylıkla giderek MP4 dosyasını bulabilirsiniz.

Kullanımı

Lottie animasyon dosyasının en basit haliyle kullanımı aşağıdaki gibi <LottieView> bileşeni ile gerçekleştirilebilir:

import React from 'react';
import LottieView from 'lottie-react-native';
const App = () => (
  <LottieView
    source={require('./animations/16445-photo-files-upload.json')}
    autoPlay
    loop
  />
);
export default App;

Uygulamayı çalıştırdığınızda ekran görüntüsü aşağıdaki gibi (hareketli) olacaktır:

Animasyon üzerinde daha fazla kontrol sağlamak istiyorsanız, useRef() hook’unu kullanarak <LottieView> bileşenini anim isimli bir değişkene atadığınız takdirde belirlenen frame’ler arasında oynatılmasını sağlayabilirsiniz:

import React, {useRef, useEffect} from 'react';
import LottieView from 'lottie-react-native';
const App = () => {
  const anim = useRef<LottieView>(null);
useEffect(() => {
    anim.current?.play(30, 60);
  }, []);
return (
    <LottieView
      ref={anim}
      source={require('./animations/16445-photo-files-upload.json')}
      loop
    />
  );
};
export default App;

Diğer bileşenler ile kullanma

İlgili animasyon dosyasını, <Text> ve <Button> gibi diğer bileşenler ile kullanarak uygulama arayüzüne zenginlik katabilirsiniz:

import React from 'react';
import LottieView from 'lottie-react-native';
import {SafeAreaView, StatusBar, StyleSheet, Text, Button} from 'react-native';
const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.safeAreaView}>
        <Text style={styles.title}>Dosyalarızı saklayın</Text>
        <Text style={styles.subtitle}>
          Dosyalarınızı en iyi şifreleme yöntemleri ile güvenli bir şekilde
          bulut ağında saklayabilirsiniz.
        </Text>
        <LottieView
          style={styles.lottieView}
          source={require('./animations/16445-photo-files-upload.json')}
          autoPlay
          loop
        />
        <Button
          title="Yüklemeye başla"
          onPress={() => console.log('clicked')}
        />
      </SafeAreaView>
    </>
  );
};
const styles = StyleSheet.create({
  safeAreaView: {
    margin: 22,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
  },
  subtitle: {
    marginTop: 8,
    fontSize: 16,
    textAlign: 'center',
    color: '#666',
    marginBottom: -50,
  },
  lottieView: {
    height: 300,
  },
});
export default App;

Dikkat edilmesi gereken hususlar

Uygulamanın performansı açısından dikkat etmeniz gereken bazı kısımlar bulunmaktadır. Kendi açımdan önemli gördüklerimi sizinle paylaşacağım:

• Uygulamanızın render performansını kontrol etmek için developer menu’de yer alan perf monitor ile görüntüleyin. 25 FPS’in altına düşmemesine dikkat edin.
• Karmaşık animasyonlarda JSON dosyası yerine MP4 dosyası kullanarak react-native-video kütüphanesi ile görüntüleyin.
• Birçok animasyonu aynı anda oynatmayın. Birden fazla animasyonu aynı anda oynattığınız takdirde uygulamanızın performansı düşebilir.

Sonuç olarak

Uygulamanızı animasyonlarla zenginleştirmeniz için Lottie büyük bir nimet. Kendi animasyonunuzu kodda üreterek zaman kaybetmek yerine lottiefiles üzerinden benzerlerini aratarak bulabilir veya Adobe AfterEffects uygulaması ile oluşturarak elde edebilirsiniz.

Projenin bitmiş halini react-native-lottie-sample reposunda bulabilirsiniz. Bu yazım hakkında soru ve görüşlerinizi aşağıdaki yorumlar kısmından yazabilirsiniz. Bana destek vermek için alkış simgesine tıklayabilirsiniz. Sonraki yazımda görüşmek üzere…