Animated.Value

Animated.Value ile animasyon değerini öğrenirsin.

Animated.Value

Animated.Value, animasyon boyunca değişen bir sayıyı tutar. Sıradan bir state gibi setState ile değil, Animated API ile güncellenir. Bu, her karede yeniden çizim yapmak yerine yerel olarak güncellemeyi sağlar.

Bir değer yaratmak: new Animated.Value(0). Genellikle useRef ile bir kez yaratılır, böylece her çizimde yeniden oluşmaz. Değer, animasyonun temel taşıdır.

useRef ile değer

Bir Animated.Value'yi useRef içinde yaratırız: const fade = useRef(new Animated.Value(0)).current. .current ile değere erişilir; bu değer tüm çizimler boyunca aynı kalır.

State gibi her güncellemede yeniden çağrılmaz; animasyon akıcı kalır. Değeri değiştirmek için Animated.timing gibi metotlar kullanılır; doğrudan atama yapılmaz.

Uygulama Animated.Value yarat ve log yaz

Bir Animated.Value yarat: const fade = useRef(new Animated.Value(0)).current. Sonra console.log(fade) ekle.

Örnek çözümü göster

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

export default function Fade() {
  const fade = useRef(new Animated.Value(0)).current;
  console.log(fade);
  return <View />;
}

Kendini test et

Animated.Value neden useRef ile tutulur?
- Her çizimde sıfırlansın diye
- Her çizimde yeniden oluşmasın diye
- Style için gerekli
- FlatList gerektirir
Cevabı göster

Her çizimde yeniden oluşmasın diye — useRef, değerin her çizimde yeniden oluşmasını engeller.

Animated.Value yarat

const fade = useRef(new ____(0)).current;

Cevabı göster

const fade = useRef(new Animated.Value(0)).current;

Animated.Value kavramları

Animated.Value

Animasyon sayısı
useRef

Değeri korur
new

Değeri yaratır
.current

Değere eriştir

Sıradaki ders: Animated.View

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler