动态改变动画速度

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 。 multiplier应该是全局的：

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/

注意： multiplier不是速度，而是延迟。 如果你增加它会变慢