Как увеличить скорость каждого нажатия на div в интервале и анимировать? - PullRequest
Новая
       39

Как увеличить скорость каждого нажатия на div в интервале и анимировать?

0 голосов
/ 24 октября 2018

Мне нужно увеличивать скорость анимации при каждом нажатии на div

У меня сейчас есть что-то подобное, но это не работает совсем. 

var Exercise2 = {
  $sandbox: $('#exercise2 .sandbox'),
  $shield: $('#exercise2 .sandbox .shield'),
  $speed: 0.1,
  $left: $('#exercise2 .sandbox .shield').offset(),
  run: function() {
    this.$sandbox.empty();
    this.$sandbox.append($('<div>').addClass('shield'));
    var loop = null;

    function IntervalMenager(flag) {
      if (flag == true) {
        var loop = setInterval(function() {
          Exercise2.animateCircle(Exercise2.$speed)
        })

      } else {
        clearInterval(loop);
      }
    };
    $('#exercise2 .sandbox .shield').bind("click", function() {
      IntervalMenager(false)
      scoreExercise2.run();
      IntervalMenager(true)
    });
  },
  animateCircle: function(speed) {
    let left = $('#exercise2 .sandbox').width() - 100;
    let time = left / speed;
    let kolo = $('#exercise2 .sandbox .shield');
    kolo.animate({
      left: left
    }, time)
    kolo.animate({
      left: 0
    }, time)
  }
};
var scoreExercise2 = {
  $shot: 0,
  $text: $('#exercise2 shots'),
  $shield: $('#exercise2 .sandbox .shield'),
  run: function() {
    $('#exercise2 .shots').html("");
    $('#exercise2 .shots').append(scoreExercise2.$shot);
    scoreExercise2.$shot += 1;
    Exercise2.$speed *= 1.2;
  }
}
  .sandbox:empty {
  display: none
}
.sandbox {
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px;
  margin: 5px auto;
}

#exercise2 .sandbox .shield {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  position: relative;
  left: 0%;
  background: radial-gradient(ellipse at center, yellow 0%, red 20%, blue 40%, black 60%, yellow 80%);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="exercise2">
  Number of shots =
  <div style="display: inline-block;" class="shots"></div>

  <div class="sandbox">

  </div>
  <button onclick="Exercise2.run();scoreExercise2.run();">Turn on</button>
</div>

Каждый клик должен делать clearInterval, а затем снова делать этот интервал с другим числом скорости, но это не так.Когда я снова запускаю эту функцию по кнопке, у нее будет новая скорость, но крик снова с самого начала.Что я должен изменить?

1 Ответ

0 голосов
/ 30 октября 2018

Хорошо, я сделал это.Если вы хотите знать, есть код;) 

var Exercise2 = {
  $sandbox: $('#exercise2 .sandbox'),
  $shield: $('#exercise2 .sandbox .shield'),
  $speed: 1,
  $direction: 1,
  $timer: null,
  $X: [$("#exercise2 .sandbox").position().left, $("#exercise2 .sandbox").width() + $("#exercise2 .sandbox").position().left - 87],
  run: function() {
    Exercise2.$timer = setInterval(function() {
      if ($('#exercise2 .sandbox .shield').position().left < Exercise2.$X[0] || $('#exercise2 .sandbox .shield').position().left > Exercise2.$X[1]) {
        Exercise2.$direction *= -1;
        Exercise2.$speed *= -1;
      }
      $("#exercise2 .sandbox .shield").animate({
        left: "+=" + Exercise2.$speed,
      }, 10)
    }, 30)
  },
  click: function() {
    this.$shield.bind("click", function() {
      clearInterval(Exercise2.$timer);
      scoreExercise2.run();
      if (Exercise2.$direction == 1) {
        Exercise2.$direction = 1;
        if (Exercise2.$speed < 0) {
          Exercise2.$speed *= -1;
        }
        Exercise2.$speed += 1;
      } else {
        Exercise2.$direction = -1;
        if (Exercise2.$speed > 0) {
          Exercise2.$speed *= -1;
        }
        Exercise2.$speed -= 1;
      }
      Exercise2.run();
    })
  },
};
var scoreExercise2 = {
  $shots: 1,
  $text: $('#exercise2 shots'),
  $shield: $('#exercise2 .sandbox .shield'),
  run: function() {
    $('#exercise2 .shots').html("");
    $('#exercise2 .shots').append(scoreExercise2.$shots);
    scoreExercise2.$shots += 1;
  }
}
Exercise2.click();
.sandbox:empty {
  display: none
}

.sandbox {
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px;
  margin: 5px auto;
}

#exercise2 .sandbox .shield {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  position: relative;
  left: 0%;
  background: radial-gradient(ellipse at center, yellow 0%, red 20%, blue 40%, black 60%, yellow 80%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="exercise2">
  Number of shots =
  <div style="display: inline-block;" class="shots"></div>

  <div class="sandbox">
    <div class="shield"></div>
  </div>
</div>

Может быть, глючит после увеличения скорости, но это работает по крайней мере.Если хочешь, не можешь дать мне несколько советов, чтобы это исправить.

...