反应呼吸动画

Question

我试图创建一个呼吸应用程序使用的反应/类型记录。我不想用“反应本地人”。

我把呼吸圈设置为组件，如果有一个，我会用自己的动画来设置每个圆圈。(我没有提供这个代码，因为这不是问题所在)

我遇到的问题是让动画无限地运行，同时维护来自setTimeout()的延迟。(见下文代码)

import React, { useState, useEffect } from "react";
import "./App.css";
import {
  BreatheInCircle,
  BreatheHoldInCircle,
  BreatheOutCircle,
  BreatheHoldOutCircle,
} from "./BreatheCircle";

const circles = [
  <BreatheInCircle/>,
  <BreatheHoldInCircle />,
  <BreatheOutCircle />,
  <BreatheHoldOutCircle />,
];

const App = () => {

  const [circleArray] = useState(circles);
  const [displayElement, setDisplayElement] = useState(<div></div>);
  const [index, setIndex] = useState(0);
  
  useEffect(() => {
    setTimeout(() => {
      setDisplayElement(circleArray[index]);
      setIndex(index + 1);
    }, 4000);
  });

  return (
    <div>
      {displayElement}
    </div>
  );
}

export default App;`enter code here`

当我现在运行它时，它将对每个组件运行一次useEffect，然后停止。我需要动画的重复，直到我停止它。

编辑

我能够解决我的延迟问题，但我仍然需要帮助循环。下面是更改延迟的更新代码。

const App = () => {

  const [circleArray] = useState(circles);
  const [displayElement, setDisplayElement] = useState(<div></div>);
  const [index, setIndex] = useState(0);

  const timeoutDelays = [0, 4000, 4000, 4000, 4000];

  const changeCircle = () => {
    setCircle(circles[index]);
    setIndex(index + 1);
  };

  useEffect(() => {
    setTimeout(changeCircle, timeoutDelays[index]);
  }, [index]);

如果setInterval仍然是一个解决方案，我想知道如何实现它。现在，它只运行一次，然后停止。

Answer 1

你为什么要尝试超时而不是间隔？此外，发送一些数据从父组件到子组件更新动画，这并不重要，我认为。

Answer 2

下面是我用来解决这个问题的最后代码。它使用的是setInterval，我只需要正确地完成它。我对user8119020的回答投了赞成票，因为他们引导我找到了正确的解决方法。

const BreatheCircles: FC = () => {
  const [circle, setCircle] = useState(<div></div>);
  const [index, setIndex] = useState(0);

  const circles = [
    <BreatheInCircle />,
    <BreatheHoldInCircle />,
    <BreatheOutCircle />,
    <BreatheHoldOutCircle />,
  ];

  const changeCircle = () => {
    setCircle(circles[index]);
    setIndex(index + 1);
    if(index >= 3) {
        setIndex(0);
    }
  };

  useEffect(() => {
    const interval = setInterval(changeCircle, 4000);
    return () => clearInterval(interval);
  }, [changeCircle]);

  return <>{circle}</>;
};

在动画开始之前有一个延迟，但这不是问题所在。再次感谢user8119020的帮助。

更新**

大家好，我知道这是有点后，但我找到了一个更好的方法，使用纯CSS。下面是我用来创建相同呼吸功能的代码的一个例子，而不需要重新呈现一百万次。

我使用MUI来创建合适的样式。

const breatheCircles = makeStyles((theme: Theme) =>
  createStyles({
    breatheCircle: {
      borderRadius: '50%',
      width: '30vh',
      height: '30vh',
      animation: '$breathe 17400ms infinite',
    },
    '@keyframes breathe': {
      '0%': {
        transform: 'scale(.5)',
        backgroundColor: '#71A1C9',
      },
      '24.9%': {
        backgroundColor: '#71A1C9',
      },
      '25%': {
        transform: 'scale(1)',
      },
      '25.1%': {
        backgroundColor: '#FF9833',
      },
      '50%': {
        transform: 'scale(1)',
        backgroundColor: '#FF9833',
      },
      '50.1%': {
        backgroundColor: '#000000',
      },
      '75%': {
        transform: 'scale(.5)',
        backgroundColor: '#000000',
      },
      '75.1%': {
        backgroundColor: '#FF9833',
      },
      '100%': {
        transform: 'scale(.5)',
        backgroundColor: '#FF9833',
      },
    },
  })
);

const Breathe: FC = () => {
  const classes = useStyles();
  const circleStyles = breatheCircles();
  const gender = useSelector<State>((state) => state.gender);

return (
    <>
      <Header />
      <div className={classes.root}>//styled elsewhere
        <div className={classes.circles}>//styled elsewhere
          <div className={circleStyles.breatheCircle} />
          <Counter />
        </div>
        <div className={classes.buttonBar}>
          <ButtonBar />
        </div>
      </div>
    </>
  );
};

我只是想社会人士希望看到一个更有效的方法来激励这些圈子。

谢谢!