Ay: Eylül 2020

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 6. kısmıdır. Bir önceki makalede (Part 5), React Native API Integration, uzak URL’lerden veri alma yollarını anlattım.

Mobil uygulama geliştirirken yazılara, resimlere vb. arayüz bileşenlerine, animasyonu nasıl uygulayacağımızı öğreneceğiz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Mobil uygulamada kullanıcı deneyimini iyileştirmenin en iyi yollarından biri animasyon kullanmaktır. Android ve iOS yerel geliştirmede, animasyon farklı şekilde ele alınır. Ayrıca, Android’de bulunan tüm animasyonlar iOS’ta uygulanamaz ve bunun tersi de geçerlidir. React Native Animation, animasyonu hem Android hem de iOS’ta uygulamak için aşağıdaki iki API’yi sağlar:

• Animated API
• LayoutAnimation API

Bu API’lerin nasıl kullanılacağını örneklerle öğreneceğiz.

Animated API

Animated API’yi View, Text, ScrollView, Image, FlatList ve SectionList ile kullanabiliriz. Animasyonlu bir bileşen oluşturmak için Animated.createAnimatedComponent() yöntemini de kullanabiliriz.

Örneğin :

import * as React from 'react';
import { Text, View, StatusBar, StyleSheet, Animated } from 'react-native';
export default class App extends React.Component {
  state = {
    width: new Animated.Value(0),  
  }
  componentDidMount() {
    Animated.timing(                 
      this.state.width,           
      {
        toValue: 100,               
        duration: 3000,             
      }
    ).start();                      
  }
  render() {
    return (
      <View style={{ paddingTop: 30,paddingLeft : 40 }}>
        <Animated.View style = {{backgroundColor: "blue",width: this.state.width, height: 50}}/>
      </View>
    );
  }
}

Bu örnekte, 3 saniyelik bir süre boyunca “genişlik” “0” ile “100” arasında bir görünüm oluşturacaktır. “Görünüm” yerine “Animated.View” kullandığımıza dikkat edin. Ayrıca, “genişlik” değerini değiştirmek için “Animated.timing” yöntemini kullanıyoruz. “Genişlik”, bileşenin “durumunda” tanımlanan bir değerdir. Değeri, “Animated.View” öğesinin genişliğini ayarlamak için kullanılır. Aynı yaklaşımı kullanarak, bir görünümün hem yüksekliğini hem de genişliğini canlandırabiliriz, bir görünümün opaklığına animasyon ekleyebiliriz vb. Bu, durumu sürekli olarak değiştirmekle aynı değildir. Durumu sürekli değiştirirsek, bileşeni tekrar tekrar yeniden oluşturacak ve bu da görünümün performansını etkileyecektir. Animation API, animasyonu daha verimli göstermek için farklı bir mekanizma kullanır.

Animasyon yapılandırması:
Animated, üç farklı animasyon türü sağlar:

Animated.decay(): Bu tür animasyonlar bir başlangıç ​​hızıyla başlar ve yavaş yavaş son hıza doğru yavaşlar.
Animated.spring(): Spring fiziği model animasyonu.
Animated.timing(): Belirli bir süre boyunca bir değeri canlandırır. Bu, “Animasyonlu” nun en yaygın kullanılan işlevlerinden biridir.

Animasyon değerleri:
Yukarıdaki örnekte Animated.value kullandık. Animated.Value(), tek değerler için kullanılır. Bu yöntemin dışında Animated.ValueXY() de var. Bu, vektörler için kullanılır.

Bir animasyonu başlatmak için start() yöntemi kullanılır. Bu yöntem isteğe bağlı olarak, tamamlandığında çağrılacak olan bir tamamlama işleyici bloğu alır. Önceden tanımlanmış değerlerle tamamlanmadan önce bir animasyonu durdurmak için stop() yöntemini de çağırabiliriz. Örneğin, herhangi bir kullanıcı etkileşiminde veya başka bir animasyon başlarsa stop() ‘u çağırmamız gerekebilir. Tamamlama bloğunda animasyonun normal şekilde bitip bitmediğini veya stop() çağrılıp çağrılmadığını tespit edebiliriz. Bize tamamlama bloğunda, normal tamamlama için “true” ve “stop()” tamamlama için “false” olacak olan “finished” adlı bir bayrak verir.

Animasyonları birleştirin:
Yeni bir tane oluşturmak için iki hareketli değeri birleştirebiliriz. Animasyonları birleştirme yöntemleri şunlardır:

Add: Animated.add()
Subtract: Animated.subtract()
Divide: Animated.divide()
Modulo: Animated.modulo()
Multiply: Animated.multiply()

Mimik :
Animasyonla çalışıyorsak, jestlerle uğraşmak zorunda kalabiliriz. Hareket olaylarını animasyonlu değerlerle eşlemek için Animated.event() yöntemi kullanılır. Bunun için yapılandırılmış harita sözdizimi kullanılır.

Mevcut animasyon değerini okumak:
Bazen bir görünümün mevcut animasyon değerini okumamız gerekebilir. Ancak daha önce de açıkladığım gibi, bu durum değerini sürekli güncellemek gibi bir şey değil. Bu esas olarak yerel çalışma zamanında yapılır ve bu nedenle mevcut değeri izlemek zordur. Bunun için kullanabileceğimiz iki yol aşağıdadır:

spring.stopAnimation(callback): Animasyonu durdurur ve geri aramayı başlatır. Bu geri arama, nihai değeri tutacaktır.
spring.addListener(callback): Bu durumda, geri arama eşzamansız olarak çağrılacaktır. Geri arama ile animasyonun son bir değerini alacağız. Bu, animasyonun mevcut durumuna göre bir şey işliyorsak kullanışlıdır.

LayoutAnimation API:
LayoutAnimation, Animated API gibi pek çok özellik sağlamaz, ancak çoğu durumda kullanışlıdır. Temel olarak, görünümleri bir sonraki işlemede yeni konumlarına canlandıracaktır. Bu, flexbox mizanpaj güncellemeleri için ve ayrıca değişiklikler herhangi bir ata görünümünü etkiliyorsa kullanışlıdır. Normalde, bir durumdaki değerleri değiştirerek kullanırız.

Android’de, yalnızca aşağıdaki yapılandırmayı eklersek çalışacaktır:

UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);

import * as React from 'react';
import {
  LayoutAnimation,
  Text,
  View,
  StatusBar,
  StyleSheet,
  Animated,
  NativeModules,
  Button
} from 'react-native';
const { UIManager } = NativeModules;
UIManager.setLayoutAnimationEnabledExperimental &&
  UIManager.setLayoutAnimationEnabledExperimental(true);
export default class App extends React.Component {
  
  state = {
    width: 0,
  };
  onClickButton = () => {
    LayoutAnimation.spring();
    this.setState({ width: this.state.width + 100 });
  };
  render() {
    return (
      <View style={{ paddingTop: 30, paddingLeft: 40 }}>
        <View
          style={{
            backgroundColor: 'blue',
            width: this.state.width,
            height: 50,
          }}
        />
        <Button onPress={this.onClickButton} title="Click me"/>
      </View>
    );
  }
}

LayoutAnimation.spring();

Sadece bir satır kod ekliyoruz ve bu da animasyonu görünüme ekliyor. Çok sayıda görünümümüz varsa, tüm görünümleri aynı anda canlandırmak için özellikleri durumda depolayabilir ve durumu “LayoutAnimation” kullanarak güncelleyebiliriz.

Hem “LayoutAnimation” hem de “Animated” api’ler bir uygulamada kullanışlıdır. Kullanım durumlarına bağlıdır. “Animated” oldukça güçlüdür ancak her türden animasyon için çok sayıda kod yazmayı içerir. Ancak animasyona daha fazla kontrol sağlar. “LayoutAnimation”, çok fazla kod yazmadan ve herhangi bir görünümü değiştirmeden yeniden oluşturma sırasında animasyon yapmak için harikadır. Görünüm özelliklerini state’de depolayın ve animasyonu yapmak için state’i değiştirin.

Makale, React Native Animation API’nin kitlelere hitap eden muhteşem bir uygulama geliştirmek için nasıl kullanılabileceğini açıkladı.

Lütfen bize görüşlerinizi bildirmekten çekinmeyin.

Kaynak: https://www.opencodez.com/