Вращение объекта по кликам
Добрый день.
Потихоньку ковыряю JS и JQ, вообщем, хочу прописать скрипт, который раскручивает квадрат(или иной объект) в зависимости от кликов. Т.е. пользователь нажимает 1 раз на объект - он прокручивается на пол оборота и стоит. Но если пол-ль жмет постоянно, то объект начинает ускоряться и следовательно делает уже больше чем пол оборота, и ускорение возрастает от количество кликов в 5 секунд или в 1 секунду. Ковырял и css с анимацией,но keyframes как я понял изменять в JS нельзя. Просто transform: rotate(Xdeg) - не анимированно, просто моментально повернул и все. Вообще долго искал что-то логично и думал над алгоритмом. Пришел к тому что, нужно кол-во кликов в секунду связать с оборотами в секунду ... но через что дальше делать ? анимация? или как? Короче, есть ли у кого то, какие то соображения или мысли вообще по алгоритму ? Заранее благодарен. |
magistr4815,
дополненный вариант https://toster.ru/q/261206 кликать по жёлтому блоку, для ускорения вращения
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #202020;
}
div.rect {
width: 150px;
height: 150px;
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 = 100, ty = 100, angle = 0, currentAngle;
var n = 3;
function getAngleToRAD(){
angle += n;
if(angle >= 360){
angle -= 360;
}
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);
}
document.querySelector('.rect').addEventListener('click', function() {
n += 3
});
update();
</script>
</body>
</html>
|
Спасибо!
|
Что-то скучно стало...
Можно кликать и даблкликать.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #202020;
}
div.rect {
width: 150px;
height: 150px;
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 = 100, ty = 100, angle = 0, currentAngle;
var prev = new Date();
var n = 0;
function getAngleToRAD(){
angle += n;
if(angle >= 360){
angle -= 360;
}
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);
}
document.querySelector('.rect').addEventListener('click', function() {
var current = new Date(),
delta = current - prev;
prev = current;
if(delta < 1000) return false;
n += 3
});
document.querySelector('.rect').addEventListener('dblclick', function() {
var current = new Date();
prev = current;
n -= 6
});
update();
</script>
</body>
</html>
|
Dilettante_Pro,
:dance: |
рони,
Вот, уже веселее:write: |
Dilettante_Pro,
Задание: качели. а вот такое сможешь, затухающая синусоида, можно задавать время и количество колебаний, что должно получится, пример ниже на css,пример отражает суть, а не точные параметры. кому это по силам, напишите свой вариант.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
hr {
width: 300px; height: 2px; background-color: #000080;
margin-top: 200px;
-webkit-animation: spin 5s ease-in-out;
-moz-animation: spin 5s ease-in-out;
-o-animation: spin 5s ease-in-out;
animation: spin 5s ease-in-out;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
@keyframes spin {
0% {
transform: rotateZ(50deg);
}
25% {
transform: rotateZ(-40deg);
}
50%{
transform: rotateZ(30deg);
}
75%{
transform: rotateZ(-20deg);
}
100%{
transform: rotateZ(0deg);
}
}
</style>
<script>
</script>
</head>
<body>
<label><input type="number" min="1" step="1" value="1"></label>
<input id="go" name="" type="button" value="go">
<hr style="width: 300px; height: 2px; background-color: #000080">
<script>
var maximumAngle = 50, duration = 5000;
</script>
</body>
</html>
|
рони,
Вот, на скорую руку... Мало свободного времени.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
hr {
width: 300px; height: 2px; background-color: #000080;
margin-top: 160px;
}
.hr-rotate {
-webkit-animation: spin 5s ease-in-out;
-moz-animation: spin 5s ease-in-out;
-o-animation: spin 5s ease-in-out;
animation: spin 5s ease-in-out;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
.hr-set {
-webkit-animation: set 1s ease-in-out forwards;
-moz-animation: set 1s ease-in-out forwards;
-o-animation: set 1s ease-in-out forwards;
animation: set 1s ease-in-out forwards;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
</style>
<style id="spin">
</style>
<style id="set">
</style>
</head>
<body>
Начальный угол<input id = "setAngle" type="range" min="0" max="75" value="45" step = "15" list="tickAngle">
<datalist id="tickAngle">
<option value="0">0</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
<option value="60">60</option>
<option value="75">75</option>
</datalist>
<br>
Тормоза <input id = "setВrake" type="range" min="10" max="50" value="20" step = "10" list="tickBrake">
<datalist id="tickBrake">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</datalist>
<input id="go" name="" type="button" value="go">
<hr >
<script>
var maxAngle = "0", prevAngle = "0",
line = document.querySelector('hr');
go.onclick = function() {
line.classList.remove('hr-set');
maxAngle = setAngle.value;
if(maxAngle =="0") return;
var brake = +setВrake.value,
currAngle = +maxAngle,
limit = 0,
sign = 1,
keys = "@keyframes spin {";
while(currAngle > 0.9) {
limit++;
currAngle = currAngle *(100 - brake) / 100;
}
currAngle = +maxAngle;
for(var i = 0; i <= limit; i++) {
keys += (i *100 / limit) + "%{transform: rotateZ(" + sign * currAngle +"deg)}";
sign = - sign;
currAngle = currAngle *(100 - brake) / 100;
}
keys += "}";
spin.innerHTML = keys;
line.classList.add('hr-rotate');
setTimeout("line.classList.remove('hr-rotate');", 6000);
}
setAngle.onchange = function() {
line.classList.remove('hr-set');
prevAngle = maxAngle;
maxAngle = this.value;
set.innerHTML = "@keyframes set { 0% { transform: rotateZ("+prevAngle +"deg); } 100% { transform: rotateZ(" + maxAngle + "deg); }}";
line.classList.add('hr-set');
}
</script>
</body>
</html>
|
Dilettante_Pro,
:victory: :thanks: |
| Часовой пояс GMT +3, время: 03:54. |