问题描述
我在 react-native 中遇到动画(动画)问题。
setTimeout(() => { AnimationToStart(onClose)); },1000);
当我不使用 setTimeOut 时,动画工作得非常好,但是当我使用它并达到 1000 毫秒时,仅执行 onClose 但动画不执行。
下面是我从哪里得到 AnimationToStart
的钩子
const useAnimation = ({
values = { initialValue: 0,finalValue: 1 },stylesToAnimate = {
styleOpacity: { start: 0,end: 1 },styletop: { start: 60,end: 0 },},duration = 300,easing = Easing.inOut(Easing.ease),}: IHook) => {
const { initialValue,finalValue } = values;
const { styleOpacity,styletop } = stylesToAnimate;
const animatedValue = useRef(new Animated.Value(initialValue)).current;
const top = animatedValue.interpolate({
inputRange: [initialValue,finalValue],outputRange: [styletop.start,styletop.end],});
const opacity = animatedValue.interpolate({
inputRange: [initialValue,outputRange: [styleOpacity.start,styleOpacity.end],});
const AnimationToEnd = () => {
Animated.timing(animatedValue,{
tovalue: finalValue,duration,useNativeDriver: true,easing,}).start();
};
const AnimationToStart = (end = () => {},delay = 0) => {
Animated.timing(animatedValue,{
tovalue: initialValue,delay,}).start(() => end());
};
const animatedStyles = { top,opacity };
return { animatedStyles,AnimationToStart,AnimationToEnd };
};
有人有想法吗?
解决方法
setTimeout() 有语法:
setTimeout(Function,Time in miliseconds);
例如:
setTimeout(function example(){console.log("example")},1000);