React Native Animated.loop со временем теряет синхронизацию между несколькими анимациями ⇐ Javascript

[Anonymous]

Я создаю анимацию пульсирующей волны в React Native с тремя перекрывающимися кругами, которые должны сохранять одинаковое расстояние. Изначально волны прекрасно анимируются с ровными интервалами, но после некоторого времени работы (обычно 10 секунд) они постепенно теряют синхронизацию.
Минимальный воспроизводимый код (ссылка на выставку: https://snack.expo.dev/@real8900/c6cb2e)

Код: Выделить всё

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

const Wave = ({ startTime, endTime, totalDuration = 2000 }) => {
const scaleAnim = useRef(new Animated.Value(0)).current;
const animationRef = useRef(null);

useEffect(() => {
animationRef.current = Animated.loop(
Animated.sequence([
Animated.delay(startTime),
Animated.timing(scaleAnim, {
toValue: 1,
duration: endTime - startTime,
easing: Easing.linear,
useNativeDriver: true,
}),
Animated.timing(scaleAnim, {
toValue: 0,
duration: 0,
useNativeDriver: true,
}),
Animated.delay(totalDuration - endTime),enter image description here
]),
);

animationRef.current.start();

return () => {
animationRef.current?.stop();
};
}, [startTime, endTime, totalDuration, scaleAnim]);

return (

);
};

const App = () => {
return (





);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
wave: {
position: 'absolute',
width: 200,
height: 200,
borderRadius: 100,
borderWidth: 2,
borderColor: '#007AFF',
},
});

export default App;

Ожидаемое поведение: Три волны должны сохранять одинаковый интервал в течение неопределенного времени (с интервалом 300 мс).
Фактическое поведение: После некоторого времени работы волны становятся заметно рассинхронизированными, с неравномерным интервалом между ними.
Что я пробовал:

• Использование Animated.loop и рекурсия вручную
• Использование Easing.linear для обеспечения согласованности времени

Среда:

• React Native: последняя версия Expo React Native
• Платформа: iOS

Снимки экрана:
введите здесь описание изображения
введите здесь описание изображения
Почему происходит этот сдвиг синхронизации и как я могу обеспечить идеальную синхронизацию анимации в течение длительного периода времени?

Подробнее здесь: https://stackoverflow.com/questions/798 ... ations-ove