React Native Lottie动画仅在第一次点击上播放

Question

所以本质上，我想在每次点击时播放 lotie 动画。这是我的 Lottie 动画的 UI 代码：

<Pressable onPress={playGame}>

<LottieView
   ref={loseAnimationRef}
   style={styles.egg}
   source={Lost}
   autoPlay={false}
   loop={false}
   onAnimationFinish={() => {
      resetAnimation();
   }}
/>

</Pressable>

这是我的 Lottie 动画的状态代码：

  const loseAnimationRef = useRef(null);

  const playGame = async () => {
    await mainGameLogicUC();
    playAnimation()
  };

  const playAnimation = () => {
      loseAnimationRef.current.play()
  }

  const resetAnimation = () => {
      loseAnimationRef.current.reset()
  }

第一次点击时，动画播放得非常好。但在所有其他点击上，动画将不会播放。我尝试在 onAnimationFinish 中暂停动画，然后恢复它，但这也不起作用。我错过了什么吗？

编辑

我摆脱了 onAnimationFinish 中的 resetAnimation() 并解决了最初的问题。但问题是，我希望动画每次都重置到开头。为什么当我重置动画时它会中断？

Answer 1

你尝试过这样的事情吗？

const animationRef = useRef<AnimatedLottieView>()
const isAnimating = useRef<boolean>(false)

const onAnimationPress = () => {
    if (!isAnimating.current) {
        isAnimating.current = true
        animationRef.current.play()
    }
}

<TouchableWithoutFeedback onPress={onAnimationPress}>
    <AnimatedLottieView
        source={source}
        ref={animationRef}
        autoPlay={false}
        loop={false}
        onAnimationFinish={() => {
            isAnimating.current = false
            animationRef.current.reset()
        }}
    />
</TouchableWithoutFeedback>

Answer 2

几天后回到这个问题后，我找到了解决方案

播放lottie动画似乎被认为是副作用，因此，编辑对动画的引用应该在useEffect钩子中

完成对我有用的解决方案：（

同样，在这段代码中，我希望在用户再次点击屏幕之前动画重置到开头。

状态代码

  const isMounted = useRef(false);

  const [isWonAnimationShowing, setIsWonAnimationShowing] = useState(false);
  const [isAnimationPlaying, setIsAnimationPlaying] = useState(false);
  const loseAnimationRef = useRef(null);
  const winAnimationRef = useRef(null);

  useEffect(() => {
    if (isMounted.current) {
      if (isAnimationPlaying) {
        _playAnimation();
      } else {
        _resetAnimation();
      }
    } else {
      isMounted.current = true;
    }
  }, [isAnimationPlaying]);


  const playAnimation = () => {
    setIsAnimationPlaying(true);
  };


  const _playAnimation = () => {
    if (isWonAnimationShowing) {
      winAnimationRef.current.play();
    } else {
      loseAnimationRef.current.play();
    }
  };


  const resetAnimation = () => {
    setIsAnimationPlaying(false);
  };


  const _resetAnimation = () => {
    if (isWonAnimationShowing) {
      winAnimationRef.current.reset();
    } else {
      loseAnimationRef.current.reset();
    }
  };

用户界面代码

    <View style={styles.body}>
      <Pressable disabled={isAnimationPlaying} onPress={playGame}>
        {isWonAnimationShowing ? (
          <LottieView
            ref={winAnimationRef}
            style={styles.egg}
            source={Won}
            autoPlay={false}
            loop={false}
            onAnimationFinish={() => {
              resetAnimation();
            }}
          />
        ) : (
          <LottieView
            ref={loseAnimationRef}
            style={styles.egg}
            source={Lost}
            autoPlay={false}
            loop={false}
            onAnimationFinish={() => {
              resetAnimation();
            }}
          />
        )}
      </Pressable>
    </View>