Я пишу простую анимацию и пытаюсь сбросить ее после завершения
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Image, Animated, Easing } from 'react-native';
export default function App() {
const [leftPos, setLeftPos] = useState(new Animated.Value(0))
useEffect(() => {
cycleAnimation()
}, []);
const cycleAnimation = () => {
console.info('STARTING ANIMATION:', leftPos)
Animated.sequence([
Animated.timing(
leftPos,
{
toValue: 430,
duration: 3000,
easing: Easing.linear,
useNativeDriver: false
}
)
]).start(() => {
setLeftPos(new Animated.Value(0))
cycleAnimation()
})
}
return (
<View style = {{ backgroundColor: 'black', flex: 1 }}>
<Animated.View style = {{ left: leftPos }}>
<Image
style = {styles.cloud}
source = {require('./assets/cloud.png')}
/>
</Animated.View>
</View >
);
}
const styles = StyleSheet.create({
cloud: {
}
});
leftPos всегда равен 430 (за исключением первой итерации) в cycleAnimation, несмотря на вызов setLeftPos с новым значением 0. Также попытался поместить cycleAnimation в обратный вызов setLeftPos, но получил тот же результат.
Вы неправильно его сбрасываете. Не нужно обновлять состояние, попробуйте следующее:
leftPos.setValue(0);
Поместите свою функцию внутрь useEffect
import React, { useState, useEffect } from "react";
import { StyleSheet, View, Image, Animated, Easing } from "react-native";
export default function App() {
const [leftPos, setLeftPos] = useState(new Animated.Value(0));
useEffect(() => {
const cycleAnimation = () => {
console.info("STARTING ANIMATION:", leftPos);
Animated.sequence([
Animated.timing(leftPos, {
toValue: 430,
duration: 3000,
easing: Easing.linear,
useNativeDriver: false,
}),
]).start(() => {
setLeftPos(new Animated.Value(0));
});
};
cycleAnimation();
}, [leftPos]);
return (
<View style = {{ backgroundColor: "black", flex: 1 }}>
<Animated.View style = {{ left: leftPos }}>
<Image style = {styles.cloud} source = {require("./assets/icon.png")} />
</Animated.View>
</View>
);
}
const styles = StyleSheet.create({
cloud: {},
});