如何使用 React-Spring 更改颜色。我想包括延迟和持续时间

Question

我正在使用 react-spring。我正在更改正在工作的背景颜色，但是我希望执行以下操作。等待 10 秒，然后在这 10 秒之后毫无延迟地循环显示颜色。我还希望每种颜色的持续时间为 1 秒。

目前我的问题是它等待 10 秒然后开始循环但让我在每次颜色变化之间等待 10 秒。不确定我做错了什么

  import {useSpring, animated} from 'react-spring';

  const AnimatedView = animated(View);

  const bgStyle = useSpring({
    to: {backgroundColor: 'red'},
    from: {backgroundColor: 'green'},
    delay: 10000,
    config: {duration: 1000},
    loop: true,
  });

  return <AnimatedView style={bgStyle}>{props.children}</AnimatedView>;

Answer 1

我想我们首先需要等待10s。但是 useSpring 的 delay 道具让我们在每个动画开始时等待 10 秒。因为 delay 的值没有更新，所以总是 10000.

在这里我们可以使用 useRef 参考来跟踪我们的初始延迟。通过检查这个，我们可以先 return delay of 10000 然后 0 剩下的

  const initialDelay = useRef(true);

  const bgStyle = useSpring({
    from: { backgroundColor: "green" },
    to: { backgroundColor: "red" },
    delay: () => {
      if (initialDelay.current) {
        initialDelay.current = false;
        return 10000;
      }
      return 0;
    },
    config: { duration: 1000 },
    loop: true
  });

如何使用 React-Spring 更改颜色。我想包括延迟和持续时间

How to change colors using React-Spring. I would like to include delay and duration

reactjs

react-native

react-spring