Как создать простую вращающуюся анимацию для изображения в React - PullRequest
Новая
       11

Как создать простую вращающуюся анимацию для изображения в React

0 голосов
/ 19 февраля 2019

Я использую реагирование со стилем материала и пользовательского интерфейса, чтобы создать изображение и получить изображение (круглой формы), которое я хочу непрерывно вращать, настраивая скорость вращения, поддерживая плавный поток.Скорость вращения должна быть настраиваемой, в которой я передаю значение скорости компоненту, и оно будет вращаться с соответствующей скоростью.Есть идеи, как пройти?Благодарю.

PS: это никак не связано с «загрузкой компонентов», загрузкой анимации или загрузкой изображения.Кроме того, решение, которое может быть реализовано с использованием withStyles () для Material-UI, было бы предпочтительным.Благодарю.

1 Ответ

0 голосов
/ 20 февраля 2019

Я пишу этот ответ относительно моих комментариев выше:

Сначала определите ключевой кадр анимации CSS, чтобы выполнить вращение: 

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

Затем, в вашем конструкторе, определитезначение скорости: 

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

наконец, используйте встроенное моделирование в ReactJS для передачи пользовательского значения скорости из состояния (или что-то вроде этого.props.customSpdProps, если вы хотите перейти от реквизита): 

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