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

Question

我正在使用反应弹簧。我正在更改正在工作的背景颜色，但是我希望执行以下操作。等待 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>;

标签： reactjsreact-nativereact-spring

Answer 1

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

在这里，我们可以useRef参考来跟踪我们的初始延迟。通过检查这一点，我们可以首先返回 a delay，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
  });