如何在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中的内联样式从状态传递自定义速度值（如果要从props传递，则应像this.props.customSpdProps这样）：

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