Форум

magistr4815 · #1 (**permalink**) 23.08.2017, 19:58

Добрый день.
Потихоньку ковыряю JS и JQ, вообщем, хочу прописать скрипт, который раскручивает квадрат(или иной объект) в зависимости от кликов. Т.е. пользователь нажимает 1 раз на объект - он прокручивается на пол оборота и стоит. Но если пол-ль жмет постоянно, то объект начинает ускоряться и следовательно делает уже больше чем пол оборота, и ускорение возрастает от количество кликов в 5 секунд или в 1 секунду.

Ковырял и css с анимацией,но keyframes как я понял изменять в JS нельзя. Просто transform: rotate(Xdeg) - не анимированно, просто моментально повернул и все. Вообще долго искал что-то логично и думал над алгоритмом. Пришел к тому что, нужно кол-во кликов в секунду связать с оборотами в секунду ... но через что дальше делать ? анимация? или как?
Короче, есть ли у кого то, какие то соображения или мысли вообще по алгоритму ?
Заранее благодарен.

рони · #2 (**permalink**) 23.08.2017, 22:01

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>

magistr4815 · #3 (**permalink**) 14.09.2017, 19:33

Спасибо!

Dilettante_Pro · #4 (**permalink**) 15.09.2017, 13:38

Что-то скучно стало...
Можно кликать и даблкликать.

<!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>

рони · #5 (**permalink**) 15.09.2017, 14:42

Dilettante_Pro,

Dilettante_Pro · #6 (**permalink**) 15.09.2017, 14:47

рони,
Вот, уже веселее

рони · #7 (**permalink**) 15.09.2017, 15:41

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>

Dilettante_Pro · #8 (**permalink**) 19.09.2017, 14:37

рони,
Вот, на скорую руку... Мало свободного времени.

<!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>

рони · #9 (**permalink**) 19.09.2017, 14:52

Dilettante_Pro,

Форум

Справочник

Discord чат

Курсы javascript