React Native SVG Animasyonları: Lottie Alternatiflerini Karşılaştırma
Lottie harika ama her zaman en hafif çözüm değil. React Native'de SVG animasyonları için başka seçenekler var. Hangisini seçeceğini adım adım öğrenelim.
Lottie JSON dosyaları büyük olabilir, ekstra dependency gerektirir ve bazı kompleks animasyonlarda yavaş çalışır. SVG tabanlı çözümler daha hızlı ve kontrol edilebilir.
1. React Native SVG
En basit seçenek. SVG'yi doğrudan render edersin.
1npm install react-native-svg1import Svg, { Circle, Path } from 'react-native-svg';2import { Animated } from 'react-native';34const RotatingCircle = () => {5const rotation = new Animated.Value(0);67Animated.loop(8Animated.timing(rotation, {9toValue: 360,10duration: 2000,11useNativeDriver: false,12})13).start();1415return (16<Animated.View style={[{ transform: [{ rotate: rotation }] }]}>17<Svg width="100" height="100" viewBox="0 0 100 100">18<Circle cx="50" cy="50" r="40" fill="blue" />19</Svg>20</Animated.View>21);22};2324export default RotatingCircle;Çıktı: Mavi daire 2 saniyede tam dönüş yapar.
2. React Native Reanimated
Perfomans odaklı. Native thread'de çalışır, daha smooth.
1npm install react-native-reanimated1import Animated, {2useSharedValue,3useAnimatedStyle,4withRepeat,5withTiming,6} from 'react-native-reanimated';7import Svg, { Rect } from 'react-native-svg';89const PulsingSquare = () => {10const opacity = useSharedValue(1);1112const animatedStyle = useAnimatedStyle(() => ({13opacity: opacity.value,14}));1516React.useEffect(() => {17opacity.value = withRepeat(18withTiming(0.3, { duration: 1000 }),19-1,20true21);22}, []);2324return (25<Animated.View style={animatedStyle}>26<Svg width="80" height="80" viewBox="0 0 80 80">27<Rect x="10" y="10" width="60" height="60" fill="red" />28</Svg>29</Animated.View>30);31};3233export default PulsingSquare;Çıktı: Kare 1 saniyede solup belirir.
3. Skia (React Native Skia)
En güçlü ama en karmaşık. Grafik motorudur, her şey mümkün.
1npm install @shopify/react-native-skia[kod]
import { Canvas, Circle, useLoop } from '@shopify/react-native-skia';
const SkiaAnimation = () => {
const progress = useLoop({ duration: 2000 });
const x = progress * 100;
return (
<Canvas style={{ width: 300, height: 300 }}>
<Circle cx={x + 50} cy={150} r={30} color="green" />
</Canvas>
);
};
export default SkiaAnimation;
[/cod]
Çıktı: Yeşil daire ekran genişliğinde hareket eder.
- Basit animasyonlar: React Native SVG
- Smooth ve performans: Reanimated
- Kompleks grafikler: Skia
Lottie'ye ihtiyacın yok, seç ve başla.
0 yorum