0

我正在尝试为一堆卡片设置动画，因为顶部的卡片从甲板上滑落，但我无法让动画运行。

当甲板上的卡片数量发生变化时，我尝试运行动画

  useEffect(() => {
    LayoutAnimation.spring();
  },[currentCard]);

另外，我尝试在刷卡完成时调用的函数上运行它：

  function onSwipeComplete(direction) {
    const item = data[currentCard];
    direction === 1 ? onSwipeRigt(item) : onSwipeLeft(item);
    pan.setValue({ x: 0, y: 0 });
    setCurrentCard(index => index + 1);
    LayoutAnimation.configureNext({
      duration: 5000,
      update: {
        type: LayoutAnimation.Types.spring,
        springDamping: 0.7
      }
    });
  }

在随附的沙箱中，您会发现两种解决方案都已实现，但当然我当时尝试使用一种。

如果您向左或向右滑动顶部卡片，要查看问题跳转到沙盒，您会注意到下面的卡片会卡到顶部，而不是我想慢慢地将其动画到顶部。

https://codesandbox.io/s/react-native-deckj-z1nwb?file=/src/Deck.js

4

0 回答 0