javascript - 动态改变动画速度

Question

为了自学 JavaScript(以及为了获得/给予天文学领域更多的见解:))，我正在设置一个显示太阳和月亮相对位置的页面。现在，太阳和月亮运动的速度仍然是固定的，但我真的很想通过输入字段使用户可以动态定义它。因此，初始速度为“30”，用户可以加快或减慢速度。 显然，太阳和月亮之间的比例必须保持固定。我尝试了很多东西(在代码中看到了一些遗迹，但我无法让它工作。

任何对 javascript 有更多经验的人都可以帮助我做到这一点吗？另外，我注意到在此动画期间 CPU 使用率变得非常高。是否有简单的步骤可以使该脚本更加高效？

var dagen = 0;
function speed($this){
	var speedSetting = $this.value;
    //alert(speedSetting);
	//return per;
}
function periode(bolletje, multiplier=30){
	if (bolletje == 'zon'){var per = (multiplier*24/2);}
    if (bolletje == 'maan'){var per = (multiplier*24*29.5/2);}
    return per;
}
function step(delta) {
  elem.style.height = 100*delta + '%'
}
function animate(opts) {
  var start = new Date 
  var id = setInterval(function() {
    var timePassed = new Date - start
    var progress = timePassed / opts.duration
    if (progress > 1) progress = 1
    var delta = opts.delta(progress)
    opts.step(delta)
    if (progress == 1) {
      clearInterval(id)
    }
  }, opts.delay || 10)
   
}
function terugweg(element, delta, duration) {
    var to = -300;
    var bolletje = element.getAttribute('id');
    per = periode(bolletje);
	document.getElementById(bolletje).style.background='transparent';
	animate({
		delay: 0,
		duration: duration || per,
		//1 sec by default
		delta: delta,
		step: function(delta) {
		  element.style.left = ((to*delta)+300) + "px"   
		}
	});
    if(bolletje == 'zon'){
    	dagen ++;
    }
    bolletje = element;
    document.getElementById('dagen').innerHTML = dagen;
    //setInterval(function (element) {
    setTimeout(function (element) {
		move(bolletje, function(p) {return p})
	}, per);
}
function move(element, delta, duration) {
	var to = 300;
	var bolletje = element.getAttribute('id');
    per = periode(bolletje);
    document.getElementById(bolletje).style.background='yellow';
	animate({
		delay: 0,
		duration: duration || per, 
		//1 sec by default
		delta: delta,
		step: function(delta) {
		  element.style.left = to*delta + "px"   
		}
	});
    bolletje = element;
	//setInterval(function (element) {
    setTimeout(function (element) {
		terugweg(bolletje, function(p) {return p})
	}, per);
}

hr{clear: both;}
form{display: block;}
form label{width: 300px; float: left; clear: both;}
form input{float: right;}
.aarde{width: 300px; height: 300px; border-radius: 150px; background: url('https://domain.com/img/aarde.png');}
#zon{width: 40px; height: 40px; background: yellow; border: 2px solid yellow; border-radius: 20px; position: relative; margin-left: -20px; top: 120px;}
#maan{width: 30px; height: 30px; background: yellow; border: 2px solid yellow; border-radius: 16px; position: relative; margin-left: -15px; top: 115px;}

<form>

<div onclick="move(this.children[0], function(p) {return p}), move(this.children[1], function(p) {return p})" class="aarde">
<div id="zon"></div>
<div id="maan"></div>

</div>

Dagen: <span id="dagen">0</span>

</form>


<form>

<label><input id="snelheid" type="range" min="10" max="300" value="30" oninput="speed(this)">Snelheid: <span id="snelheidDisplay">30</span></label>

</form>

Answer 1

首先，将速度输入标签中的onlick更改为oninput。

<input id="snelheid" type="number"  value="30" oninput="speed(this)">

并在您的 speed() 函数中设置 multiplier = $this.value。 乘数应该是全局的:

var multiplier = 30;
function speed($this){
  console.log($this.value);
    multiplier = $this.value;
    //alert(speedSetting);
    //return per;
}
function periode(bolletje){
    if (bolletje == 'zon'){var per = (multiplier*24/2);}
    if (bolletje == 'maan'){var per = (multiplier*24*29.5/2);}
    return per;
}

这是一个例子: https://jsfiddle.net/do4n9L03/2/

注意:乘数不是速度，而是延迟。如果你增加它，它会变得更慢