Question

我的组件有背景图片。我要再添加1张图像，即48 * 48（小图像）在左上，右上和顶部随机移动。这是我的背景图片的代码-

const sectionStyle = {
    width: "100vw",
    height: "100vh",
    backgroundImage: `url(${Background})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center'
};

然后，组件的渲染具有使用sectionStyle的div。

如何使这种小图像每隔几秒钟随机在背景图像上移动一次？

Answer 1

一种实现此目的的方法是使用绝对定位并定义图像位置的状态。然后，您可以使用setInterval更改位置。

这可能不是最好的方法，但可以完成工作。这是一个示例实现。（为了便于理解，我采用了随机值）-

const styles = {
  mainContainerStyle: {
    margin: '50px',
    background: 'yellow',
    padding: '20px',
    height: '600px',
  },

  backgroundContainer: {
    position: 'absolute',
    background: `url('YOUR_BACKGROUND_IMAGE')`,
    width: '400px',
    height: '400px',
  },

  imageStyle: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: 45,
    height: 45,
    borderRadius: 5,
  },
}

class ExampleComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      left: 0,
      top: 0,
    }
  }

  randomMovement = () => {
    this.setState((prevState) => ({
      left: prevState.left + 30 * Math.random(),
      top: prevState.top + 30 * Math.random(),
    }));
  }

  render() {
    return (
      <div style={styles.mainContainerStyle}>
        <div style={styles.backgroundContainer}>
          <img
            src="YOUR_IMAGE_URL"
            style={{
              ...styles.imageStyle,
              top: this.state.top,
              left: this.state.left,
            }}
          />
        </div>
      </div>
    );
  }

  componentDidMount() {
    this.startMovement = setInterval(this.randomMovement, 3000);
  }
}

希望有帮助。

每隔几秒钟反应一下将图像移到另一个位置

1 个答案: