Задать вопрос
thehighhomie
@thehighhomie
javascript

Анимация вращения элементов на чистом js?

Долго ломал мозг как можно без фреймворков, на чистом js организовать анимацию вращения элементов, например по часовой стрелке. Во время "рытья" в google я находил только что то похожее на jquery) Конечно можно не париться и такие интересные и может быть сложные вещи несомненно лучше на фреймворках делать, но знать тоже очень нужно. Можете подсказать как это организовать на чистом js?
  • Вопрос задан
  • 7599 просмотров
1 комментарий
Подписаться 3 Оценить 1 комментарий
Решения вопроса 3
littleguga
@littleguga
Не стыдно не знать, а стыдно не интересоваться.
Что Вы имеете ввиду, говоря "на чистом js"? Повлиять на стиль отображения элемента можно только используя стили(css), а как Вы их зададите(через js/изначально прописаны) уже не так важно.

Jquery - не фреймворк, а библиотека, это разные понятия.

Поменять стиль у элемента можно на чистом js. Можете менять угол поворота элемента через интервал/requestAnimationFrame(как привел выше copal ).
Задавайте elem.style.transform = "rotate(" + deg + "deg)";
Ответ написан
Комментировать
Комментировать
wladyspb
@wladyspb
Программист
Это организовывается скорее на чистом CSS, а через JS можно сделать управление процессом с помощью классов.
Ответ написан
Комментировать
Комментировать
copal
@copal
𝄞 ...оооо baby
Читайте про матрицы.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			background: #202020;
		}

		div.rect {
			width: 50px;
			height: 50px;

			background: yellow;
		}
	</style>
</head>
<body>
	<div class="rect" id="rotate-rect"></div>
	<script>
		var rect = document.getElementById('rotate-rect');
		var a = 1, b = 0, c = 0, d = 1, tx = 10, ty = 10, angle = 0, currentAngle;

		function getAngleToRAD(){
			if(angle === 360){
				angle = 0;
			}

			return angle++ * Math.PI / 180;
		}
		

		function update(){
			currentAngle = getAngleToRAD();

			rect.style.transform = 'matrix(' + Math.cos(currentAngle) + ',' + Math.sin(currentAngle) + ',' + -Math.sin(currentAngle) + ',' + Math.cos(currentAngle) + ',' + tx + ',' + tx + ')'
			window.requestAnimationFrame(update);
		}

		update();
	</script>
</body>
</html>
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Написать бэк для проекта
30 апр. 2024, в 13:24
15000 руб./за проект
Интеграция и кастомизация Zoho CRM под задачи Concierge Service
30 апр. 2024, в 13:00
300000 руб./за проект
Разработать нативные приложения IOS, Android + веб-приложение админ
30 апр. 2024, в 12:56
1000000 руб./за проект
Ещё заказы