问题:setTimeOut 与 Animated.timing().start

问题描述

我在 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);