我在 react native 中使用上下动画,但是动画只是从上到下滑动然后停在底部我想连续上下移动它。我也使用了动画循环,所以请检查并为我提供解决方案
import React, { useEffect, useState } from 'react'
import { Text, View, Animated, Easing, StyleSheet } from 'react-native'
import LoaderLogo from '../../icons/commonicons/LoaderLogo'
import { Loadericon } from '../../constants/Image';
import LinearGradient from 'react-native-linear-gradient';
import { dynamicSize } from '../sizechoose';
const amimationScreen = () => {
const startValue = new Animated.Value(0);
const endValue = dynamicSize(225);
const startValue2 = new Animated.Value(225);
const endValue2 = dynamicSize(0);
const duration = 5000;
useEffect(() => {
Animated.sequence([
Animated.timing(startValue, {
toValue: endValue,
duration: duration,
useNativeDriver: true,
}),
Animated.timing(startValue2, {
toValue: endValue2,
duration: duration,
useNativeDriver: true,
})
]).start()
}, [startValue, endValue, duration]);
return (
<Animated.View style={[{ transform: [{ translateY: startValue }] }]}>
<View style={{backgroundColor:'red',height:10,width:100}}>
</View>
</Animated.View>
)
}
export default amimationScreen
我也尝试使用 react-native-animatable 包,但它不适合我,因为它从屏幕顶部开始动画。
最佳答案
这对我有用:
const App = () => {
const animated = new Animated.Value(0);
const duration = 5000;
useEffect(() => {
Animated.loop(
Animated.sequence([
Animated.timing(animated, {
toValue: 255,
duration: duration,
useNativeDriver: true,
}),
Animated.timing(animated, {
toValue: 0,
duration: duration,
useNativeDriver: true,
}),
]),
).start();
}, []);
return (
<Animated.View style={[{transform: [{translateY: animated}]}]}>
<View style={{backgroundColor: 'red', height: 10, width: 100}}></View>
</Animated.View>
);
};
所以不要有两个 Animated.Value
实例进行翻译,而是创建一个并让它从 0
转换到 255
并从 255
依次返回 0
。并在序列完成后使其循环。
我认为您原始方法的主要问题是 startValue
决定 View 的翻译方式,因为这是您作为 translateY
的值传递的内容。因此,向下动画在您的示例中正确发生。然而,向上动画不会发生,因为 startValue2
被传递给 Animated.timing
并且 startValue
不用于翻译您的任何 View 例子。
关于react-native - react native 中的上下滑动动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65608079/