Wie erstelle ich eine unendliche Animation in React Native? ⇐ Android

[Guest]

Meine Karten hier funktionieren von rechts nach links mit einer schönen Animation. Aber wenn die Animation zurückgespult wird, werden die Kartenpositionen zurückgespult und es gibt kein unendliches Animationsbild. Was ich möchte, ist, dass die erste Karte wieder hereinkommt, wenn die letzte Karte den Bildschirm verlässt und die Unendlichkeit eintritt. Wie mache ich das? Wie Sie im GIF sehen können, endet die Animation und ich möchte, dass das letzte Element links vom Bildschirm verschwindet und das erste Element wieder eintritt.

Code: Select all

import React, { useEffect, useRef } from 'react';
import { Animated, StyleSheet, Text, View, Dimensions, Image } from 'react-native';

import anonim_icon from "../img/anonim.png";

const cardData = [
{ id: 0, title: "Feeling Happy" },
{ id: 1, title: "Feeling Calm" },
{ id: 2, title: "Feeling Angry" },
{ id: 3, title: "Feeling Sad" },
];

const App = () => {
const translateX = useRef(new Animated.Value(width)).current;

const Cards = ({ item, index }) => {
return (


{item.title}

);
};

useEffect(() => {
const startAnimation = () => {
translateX.setValue(width); // Animasyon başlangıç pozisyonu (sağ dışı)
Animated.loop(
Animated.sequence([
Animated.timing(translateX, {
toValue: -width * cardData.length, // Sol dışına çıkış
duration: 17000, // Hareket süresi
useNativeDriver: true,
}),
]),
).start();
};

startAnimation();
}, [translateX, width]);

return (



{cardData.map((item, index) => (

))}


);
};

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#000",
},
cards_con: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-around",
backgroundColor: "#323232",
height: height / 13,
borderRadius: 10,
marginHorizontal: 10,
padding: 10,
width: width / 1.7,
},
cards_ico: {
width: 30,
height: 30,
borderRadius: 10,
},
card_title: {
color: "#FFFFFF",
marginLeft: 10,
fontSize: 16,
},
});

export default App;