Javascriptの正弦波に続くオブジェクト位置を前後に移動する

javascriptでプログラムを作成しました。divは、正弦波に従って左から右に位置を変換します。ここは、コードされる：課は、左から右へJavascriptの正弦波に続くオブジェクト位置を前後に移動する

<!DOCTYPE HTML> 
    <head> 
     <title>Move Object</title> 
     <style> 
      #field {position: relative;height: 300px;background-color: lightgreen;} 
      #ball{ position: absolute;left: 0;bottom: 50%;width: 1em;height: 1em;border-radius: 0.5em;} 
      #ball { background: red; } 
     </style> 
    </head> 
    <body>  
     <div id="field"> 
      <div id="ball"></div> 
      <script type="text/javascript"> 
       window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 

       var field = document.getElementById("field"); 
       var ball = document.getElementById("ball"); 
       var maxX = field.clientWidth - ball.offsetWidth; 
       var maxY = field.clientHeight - ball.offsetHeight; 
       var duration = 5; // seconds 
       var gridSize = 50; // pixels 
       var start = null; 

       function step(timestamp){ 
        var progress, x, y; 
        if(start === null) start = timestamp; 
        progress = (timestamp - start)/duration/1000; // percent 

        x = progress * maxX/gridSize; // x = ƒ(t) 
        y = 2 * Math.sin(x); // y = ƒ(x) 

        ball.style.left = Math.min(maxX, gridSize * x) + "px"; 
        ball.style.bottom = maxY/2 + (gridSize * y) + "px"; 
        if(progress >= 1) 
        { 
         start=null; 
        } 
        requestAnimationFrame(step); 
       } 
       requestAnimationFrame(step); 
      </script> 
     </div> 
    </body> 
</html>

翻訳されたが、私はにあちこちを右から左に運動をバックトレースします。誰でもこの問題を分類するのに役立つことができますか？

事前に感謝..

出典

2017-10-11 Kunal Verma

あなたはあなたの関数のドメインの最高メンバーに最低から行くことによって離散ステップ関数の谷のドメインを繰り返します。反対に、ドメインの最後のメンバ（あなたは既にmmayXとして計算しています）から始め、最小のものに達するまでその離散的なステップから減らしてください。

x = maxX/gridSize - (progress * maxX/gridSize);

変更と出来上がり：：、問題が解決される

demo fiddle of dot going backward

出典

2017-10-11 12:35:10 DanteTheSmith

おかげで、これは複雑に聞こえる場合

、ここではそれをよりよく説明するかもしれない1つのライナー修正があります –

Javascriptの正弦波に続くオブジェクト位置を前後に移動する

答えて

関連する問題