Animated.Value
- React Native kursu
- Orta seviye
- Ders 70/116
- 5 dk
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.
Başlangıç kodu
import React from 'react';
import { Animated, View } from 'react-native';
export default function Fade() {
// Animated.Value yarat ve log yaz
return <View />;
}Örnek çözüm
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 />;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Animated.Value neden useRef ile tutulur?
- Her çizimde sıfırlansın diye
- Her çizimde yeniden oluşmasın diye Doğru cevap
- Style için gerekli
- FlatList gerektirir
Açıklama: useRef, değerin her çizimde yeniden oluşmasını engeller.
2 Animated.Value yarat
const fade = useRef(new ____(0)).current;const fade = useRef(new Animated.Value(0)).current;Açıklama: new Animated.Value(0) sıfırdan başlayan değer yaratır.
3 Animated.Value kavramları
| Kavram | Anlamı |
|---|---|
Animated.Value |
Animasyon sayısı |
useRef |
Değeri korur |
new |
Değeri yaratır |
.current |
Değere eriştir |