Как создать простую анимацию вращения для изображения в React
Я использую reactjs со стилем material-ui, чтобы создать dapp и иметь изображение (круглой формы), которое я хочу непрерывно вращать с настраиваемой скоростью вращения, поддерживая плавный поток. Скорость вращения должна быть настраиваемой, в которой я передаю значение скорости компоненту, и он будет соответственно вращаться с этой скоростью. Есть идеи как пройти? Спасибо.
PS: это никак не связано с «загрузкой компонентов», загрузкой анимации или загрузкой изображения. Кроме того, решение, которое может быть реализовано с использованием withStyles() из material-ui, было бы предпочтительнее. Спасибо.
Я уже думал об этом, но не могли бы вы рассказать мне, как мы можем передать пользовательское значение скорости из реквизита компонента?
2s — это продолжительность анимации, в то время как она определяет, сколько времени необходимо для выполнения одного цикла анимации, линейная часть определяет, что анимация выполняется с постоянной скоростью. spin 2s linear infinite; означает, что для одного вращения потребуется две секунды. Вы можете изменить длительность анимации на произвольное значение. Вы можете обратиться к этой ссылке для получения дополнительной информации об анимации css: ссылка на сайт
если вы хотите передать значение скорости с помощью Javascript, это будет так в Reactjs <div style = {{animationDuration = '2s'}}/>
В вашем случае вы можете использовать что-то вроде <div style = {{animationDuration = this.state.customSpdValue}}/>
Ответы 1
Я пишу этот ответ в отношении моих комментариев выше:
Во-первых, определите ключевой кадр анимации css для вращения:
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
Затем в вашем конструкторе определите значение скорости:
constructor(props) {
super(props);
this.state = {
speed: 3
}
}
наконец, используйте встроенный стиль в ReactJS для передачи пользовательского значения скорости из состояния (или что-то вроде this.props.customSpdProps, если вы хотите передать из реквизита):
<img style = {{animation: `spin ${this.state.speed}s linear infinite`}} src = {SampleImg} alt = "img"/>
Я также хотел бы добавить, что в случае работы с material-ui с использованием функции withStyles() объект/функцию 'styles' можно описать так: const styles = theme => ({ spinningImg: { animationName: 'spin', animationIterationCount: 'infinite', animationTimingFunction: 'linear', }, '@keyframes spin': { '0%': { transform: 'rotate(0deg)', }, '100%': { transform: 'rotate(360deg)', }, }, });
эта ссылка может быть вам полезна: создать-css3-вращающийся предварительный загрузчик, туториал продемонстрировал способ создания непрерывно вращающегося круга на чистом css, скорость вращения которого вы можете настроить, изменив секунду вращения в этой строке:
animation: spin 2s linear infinite;