Animated API: tanımı, kütüphane özellikleri ve çalışma prensibi

React Native'de Animated API Nedir

Animated API, mobil uygulamalarda akıcı, yüksek performanslı animasyonlar oluşturmak için tasarlanmış, React Native'in çekirdeğine yerleşik bildirimsel bir animasyon kütüphanesidir. Web geliştirmedeki CSS animasyonlarının aksine, Animated API, JavaScript köprüsü veya yerel sürücü aracılığıyla doğrudan yerel UI iş parçacığıyla çalışır. Kütüphane, sayısal bir değer depolayan ve tüm bağımlı bileşenleri otomatik olarak değişikliklere abone eden bir kapsayıcı olan Animated.Value kavramı etrafında inşa edilmiştir. Animated.timing veya Animated.spring ile değer değiştiğinde, kütüphane React bileşenlerini yeniden oluşturmadan ara durumları hesaplar; bu, 60 FPS'yi korumak için kritiktir. Animated API, transform, opacity, width, height, top, left ve backgroundColor dahil tüm stil özelliklerini destekler. React Native belgeleri, yüksek performans ve her iki platformda öngörülebilir davranış gerektiren tüm animasyon senaryoları için Animated API'yi önerir.

Animated API Nasıl Çalışır: Value, timing ve spring

Animated API'nin temeli, yapıcı new Animated.Value(0) aracılığıyla başlatılan sayısal değer kapsayıcısı Animated.Value'dir. Her Animated.Value bir başlangıç sayısını depolar ve animasyon yöntemleri sağlar: timing, spring ve decay. timing yöntemi, süre, gecikme ve easing parametreleriyle doğrusal veya easing animasyonu oluşturur. spring yöntemi, sürtünme, gerilim ve hız parametreleriyle fiziksel yay animasyonu uygular. decay yöntemi, atalet ve sönümleme ile animasyon oluşturur — kaydırma ve kaydırma için kullanışlıdır. Tüm yöntemler, start() ile başlatılıp stop() ile durdurulabilen bir Animated.Composite nesnesi döndürür. Animasyon ayrı bir iş parçacığında yürütülür: useNativeDriver = true kullanıldığında, hesaplamalar yerel UI iş parçacığında gerçekleşir ve JavaScript iş parçacığı olay işleme ve mantık için serbest kalır.

Animated.timing: süre ve easing yapılandırması

Animated.timing, kontrollü süreye sahip temel animasyon yöntemidir. Şu yapılandırmayı kabul eder: toValue, duration (varsayılan 500ms), easing (varsayılan Easing.linear) ve delay. Easing modülündeki easing işlevleri, doğrusal olmayan hızlanma sağlar: Easing.bezier, Easing.elastic, Easing.bounce. Tekdüze hız animasyonu için Easing.linear, doğal hızlanma için Easing.inOut kullanın. Önemli: Animated.timing, animasyonun cihaz yükünden bağımsız olarak belirtilen süre içinde toValue'da tam olarak biteceğini garanti eder.

Animated.spring: fizik tabanlı animasyon

Animated.spring, Hooke yasasına dayalı bir yay animasyon modeli uygular. friction (sürtünme) parametresi salınım sayısını kontrol eder: sürtünme ne kadar yüksekse, durma o kadar hızlı olur. tension (gerilim) parametresi yayın sertliğini belirler: yüksek gerilim hareketi hızlandırır. velocity (hız) parametresi, ataletli animasyon için başlangıç hızını ayarlar — kullanıcı jestlerini takip eden animasyonlar için kritiktir. Animated.spring'in sabit bir süresi yoktur — hız ve genlik eşik değerlere ulaştığında animasyon tamamlanır.

Animated.View, Animated.Text ve Diğer Bileşenler

Animated API, dört yerleşik animasyonlu bileşen sağlar: Animated.View, Animated.Text, Animated.ScrollView ve Animated.Image. Her biri, stil özelliklerine Animated.Value aktarımını destekleyen ilgili yerel bileşenin bir sarmalayıcısıdır. Animated.View en çok kullanılan bileşendir, normal View ile aynı props'ları kabul eder ancak style'da animasyonlu değerler desteğiyle. Animated.Text, metin rengini veya harf aralığını canlandırmak için kullanışlıdır. Animated.ScrollView, scrollTo ve contentOffset'i canlandırmayı sağlar. Animated.Image, görüntü yükleme sırasında animasyonlu şeffaflık ve ölçeği destekler. Başka bir bileşeni canlandırmanız gerekiyorsa, Animated.createAnimatedComponent(MyComponent) kullanın.

import React from 'react';
import { Animated, View, Button } from 'react-native';

const FadeInView = () => {
  const opacity = useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    View
      Animated.View { style: [{ opacity }] }
      Button title="Fade In" onPress={fadeIn}
  );
};

Enterpolasyon Sistemi: Sayılardan Renk ve Dönüşümlere

Enterpolasyon, Animated.Value'nin giriş sayısal aralığını başka bir türün çıkış değerlerine dönüştüren bir mekanizmadır. interpolate yöntemi, inputRange (giriş değerleri dizisi) ve outputRange (çıkış değerleri dizisi) ile yapılandırmayı kabul eder. OutputRange türleri: sayılar (koordinatlar, şeffaflık), dizeler ('deg' ile dönüş açıları), onaltılık renkler ('#ff0000'), dönüşüm nesneleri. Enterpolasyon, easing ve extrapolate'i destekler — belirtilen aralığın dışındaki davranış (clamp, extend, identity). Örneğin, bir sürükleme jesti sırasında, parmak konumunu 0'dan 200'e şeffaflıkta 1'den 0'a dönüştürerek kaydırmada solma efekti oluşturabilirsiniz. Enterpolasyon sistemi, karmaşık çok adımlı animasyonlar oluşturmayı sağlar: 0-0.5-1.0 değeri sarı-turuncu-kırmızıya dönüşebilir.

const spinValue = new Animated.Value(0);

Animated.timing(spinValue, {
  toValue: 1,
  duration: 3000,
  easing: Easing.linear,
  useNativeDriver: true,
}).start();

const spin = spinValue.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});

Animasyon Kompozisyonu: Sıra ve Paralellik

Animated API, üç animasyon kompozisyon modunu destekler: Animated.sequence, Animated.parallel ve Animated.stagger. Animated.sequence, animasyonları art arda çalıştırır: her biri öncekinin tamamlanmasından sonra başlar. Animated.parallel, tüm animasyonları tek bir paylaşılan tamamlama geri çağrımıyla aynı anda çalıştırır. Animated.stagger, her başlangıç arasında gecikmeyle animasyonları çalıştırır — dalga efektleri oluşturmak için kullanışlıdır. Kompozisyonlar iç içe geçirilebilir: paralel grupların sırası veya sıraların paraleli. Bu, karmaşık zincirler oluşturmayı sağlar: gecikmeli öğe görünüm animasyonu, fade-in ile paralel slide-in, ardından bounce ve shake sırası.

Animated.sequence([
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 500,
    useNativeDriver: true,
  }),
  Animated.parallel([
    Animated.timing(scaleAnim, {
      toValue: 1.1,
      duration: 200,
      useNativeDriver: true,
    }),
    Animated.spring(colorAnim, {
      toValue: 1,
      friction: 4,
      useNativeDriver: true,
    }),
  ]),
]).start();

useNativeDriver ve Animasyon Performansı

useNativeDriver, tüm animasyon mantığını JavaScript iş parçacığından yerel UI iş parçacığına taşıyan bir animasyon yapılandırma seçeneğidir. useNativeDriver olmadan, animasyonlar JavaScript köprüsü üzerinden yürütülür: her değer değişikliği yerel iş parçacığına gönderilir ve JS iş parçacığı eşzamansız işlemlerle meşgul olduğunda gecikmelere neden olur. useNativeDriver = true ile Animated.Value doğrudan yerel tarafta güncellenir ve JavaScript iş parçacığı olay işleme, API istekleri ve React uzlaşması için serbest kalır. Sınırlama: useNativeDriver yalnızca düzen dışı özellikleri destekler — opacity, transform, backgroundColor (PlatformColor aracılığıyla). Düzen özellikleri (width, height, top, left) için NativeAnimatedModule veya LayoutAnimation gerekir. React Native 0.76'ya göre, düzen tabanlı olanlar dışında tüm animasyonlu özellikler yerel sürücü üzerinden desteklenir. useNativeDriver modu, mümkün olduğunda tüm animasyonlar için önerilir — FPS'yi 30-40'tan kararlı 60'a yükseltir.

Jest Güdümlü Animasyon: PanResponder ve Gesture Handler

PanResponder, Animated API ile iyi entegre olan yerleşik bir React Native jest işleme sistemidir. PanResponder, Animated.Value'nin parmak konumuna göre güncellenebildiği onPanResponderMove ve onPanResponderRelease geri çağrımlarını sağlar. Daha karmaşık jestler için — kaydırma, sıkıştırma, döndürme — animasyonlarla eşzamanlı çalışan ve çok parmaklı jestlerde bile 60 FPS sağlayan react-native-gesture-handler kütüphanesini kullanın. Gesture Handler, manuel geri çağrım işlemesi olmadan bir jesti doğrudan Animated.Value'ye bağlayan bir yöntem olan Animated.event'i sağlar. Gesture Handler + Animated API birleşimi, React Native uygulamalarında etkileşimli animasyonlar için endüstri standardıdır.

Animated.event: jestleri değerlere bağlama

Animated.event, yerel bir olayı (örn. gestureEvent) doğrudan Animated.Value'ye bağlayan bir yöntemdir. Geri çağrımlardaki manuel işlemenin aksine, Animated.event yerel iş parçacığında eşzamanlı olarak çalışır ve her kare için JavaScript köprüsü gerektirmez. Bu, hızlı kaydırmalarda bile akıcı animasyon sağlar. Animated.event, her öğenin bir olay alanını Animated.Value'ye bağladığı bir eşleme dizisini kabul eder. İç içe erişim desteklenir: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Animated API ile Kod Örnekleri

React Native projelerinde Animated API kullanımına ilişkin üç pratik örneği inceleyelim. İlk örnek, opacity + translateY sırasıyla kart görünüm animasyonudur. İkinci örnek, spring kullanarak düğme titreşim animasyonudur. Üçüncü örnek, PanResponder ile etkileşimli sürükleme öğesidir. Tüm örnekler useNativeDriver = true kullanır ve React Native 0.76 en iyi uygulamalarını takip eder.

const CardWithAnimation = () => {
  const anim = useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.spring(anim, {
      toValue: 1,
      friction: 6,
      tension: 40,
      useNativeDriver: true,
    }).start();
  }, []);

  const translateY = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [50, 0],
  });

  return (
    Animated.View {
      style: [{ opacity: anim, transform: [{ translateY }] }]
    }
  );
};

Spring ile titreşim animasyonu

Spring animasyonu, fiziksel bir yay modeli kullanarak doğal bir titreşim efekti oluşturur. Düşük sürtünme (2-4) ve yüksek gerilim (100-150) ayarları, doğal olarak sönen yumuşak salınımlar üretir. Sonsuz titreşim için bir sıra döngüsüyle Animated.loop kullanın: scale → 1.2, scale → 1.0. Titreşim, yükleme göstergeleri, bildirimler ve vurgu düğmeleri için kullanılır.