如何在 React 中为图像创建简单的旋转动画

Question

我正在使用带有 material-ui 样式的 reactjs 来创建一个 dapp 并有一个图像（圆形），我想连续旋转该图像以自定义旋转速度，保持流畅的流动。旋转速度需要自定义，其中我向组件提供速度值，它会相应地以该速度旋转。任何想法如何去？谢谢。

PS：这与“加载组件”、加载动画或加载图像无关。此外，可以使用 material-ui 的 withStyles() 实现的解决方案将是首选。谢谢。

Answer 1

我正在根据我上面的评论写这个答案：

首先，定义一个 css 动画关键帧来进行旋转：

@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

接下来，在您的构造函数中，定义速度值：

constructor(props) {
 super(props);
 this.state = {
  speed: 3
 }
}

最后，利用 ReactJS 中的内联样式从 state 传递自定义速度值（如果你想从 props 传递，或者像 this.props.customSpdProps 这样的东西）：

<img style={{animation: `spin ${this.state.speed}s linear infinite`}} src={SampleImg} alt="img"/>