您可以使用leftAnim.setOffset(nextStart)
并相应地调整内环末端。零食博览会演示 https://snack.expo.dev/uyR0BtK0M
import React, { Component, useRef, useEffect, useState } from 'react';
import { Easing, StyleSheet, View, Animated, Button, Text } from 'react-native';
const start = 0;
const end = 100;
export default Anim = () => {
const leftAnim = useRef(new Animated.Value(start)).current;
const [curValue, setCurValue] = useState(start);
useEffect(() => {
leftAnim.addListener((v) => {
setCurValue(v.value.toFixed(0));
});
Animated.timing(leftAnim, {
toValue: end,
duration: 5000,
easing: Easing.linear,
useNativeDriver: false,
}).start(({ finished }) => {
//setting value to 80
leftAnim.setOffset(80);
// increment only by 20, 80 + 20 = 100
Animated.loop(
Animated.timing(leftAnim, {
toValue: end - 80,
duration: 2000,
easing: Easing.linear,
useNativeDriver: false,
})
).start();
});
}, [leftAnim]);
return (
<View style={styles.container}>
<Animated.Image
source={require('./assets/snack-icon.png')}
style={{ width: 40, height: 40, transform: [{ translateY: leftAnim }] }}
/>
<Text>Current Value: {curValue}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'start',
alignItems: 'center',
padding: 10,
paddingTop: 50,
},
input: {
height: 50,
marginHorizontal: 15,
backgroundColor: '#ededed',
marginTop: 10,
paddingHorizontal: 9,
},
});