Javascriptを使用してボックスを移動する方法右に10ピクセル、右に10ピクセルを下に

ブラウザで左から右にdiv（高さ50ピクセル、幅50ピクセル）をアニメーションしたいとします。Javascriptを使用してボックスを移動する方法右に10ピクセル、右に10ピクセルを下に

共有するコードがあまりありません。私はここで私のHTML CSSの部分を共有することができます。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <style> 
    .box{ 
     width:100px; 
     height:100px; 
     position: absolute; 
    } 
    .blue{ 
     background:#00f; 
    } 
    .position{ 
     margin-top: 50px; 
    } 
</style> 

</head> 
<body> 

<div class="box blue position" id="move_box"> </div> 

<script> 

</script> 

</body> 
</html>

私は、「毎秒ダウン右10個のピクセル、10個のピクセルを移動し、」状況に応じて左から右へのダイビングをアニメーション化するためにあなたの助けを必要としています。

注：JavaScriptのみです。

ありがとうございました！

私のスクリプト：

<script> 
var box = document.getElementById('move_box'), 
    boxPos = 0, 
    boxLastPos = 0, 
    boxVelocity = 0.01, 
    limit = 300, 
    lastFrameTimeMs = 0, 
    maxFPS = 60, 
    delta = 0, 
    timestep = 1000/60, 
    fps = 60, 
    framesThisSecond = 0, 
    lastFpsUpdate = 0, 
    running = false, 
    started = false, 
    frameID = 0; 

function update(delta) { 
    boxLastPos = boxPos; 
    boxPos += boxVelocity * delta; 
    // Switch directions if we go too far 
    if (boxPos >= limit || boxPos <= 0) boxVelocity = -boxVelocity; 
} 

function draw(interp) { 

    box.style.left = (boxLastPos + (boxPos - boxLastPos) * interp) + 'px'; 
    box.style.top = (boxLastPos + (boxPos - boxLastPos) * interp) + 'px'; 

    console.log(box.style.top); 

} 

function panic() { 
    delta = 0; 
} 

function begin() { 
} 

function end(fps) { 

    /*box.style.backgroundColor = 'blue';*/ 

} 

function stop() { 
    running = false; 
    started = false; 
    cancelAnimationFrame(frameID); 
} 

function start() { 
    if (!started) { 
     started = true; 
     frameID = requestAnimationFrame(function(timestamp) { 
      draw(1); 
      running = true; 
      lastFrameTimeMs = timestamp; 
      lastFpsUpdate = timestamp; 
      framesThisSecond = 0; 
      frameID = requestAnimationFrame(mainLoop); 
     }); 
    } 
} 

function mainLoop(timestamp) { 
    // Throttle the frame rate. 
    if (timestamp < lastFrameTimeMs + (1000/maxFPS)) { 
     frameID = requestAnimationFrame(mainLoop); 
     return; 
    } 
    delta += timestamp - lastFrameTimeMs; 
    lastFrameTimeMs = timestamp; 

    begin(timestamp, delta); 

    if (timestamp > lastFpsUpdate + 1000) { 
     fps = 0.25 * framesThisSecond + 0.75 * fps; 

     lastFpsUpdate = timestamp; 
     framesThisSecond = 0; 
    } 
    framesThisSecond++; 

    var numUpdateSteps = 0; 
    while (delta >= timestep) { 
     update(timestep); 
     delta -= timestep; 
     if (++numUpdateSteps >= 240) { 
      panic(); 
      break; 
     } 
    } 

    draw(delta/timestep); 

    end(fps); 

    frameID = requestAnimationFrame(mainLoop); 
} 

start(); 
</script>

出典

2017-04-19 Selim Reza

JavaScriptのみで、jQueryの-UIは大丈夫でしょうか？ – olahell

それは私のためにFirefoxの上で動作します：http://jsbin.com/ravayucila/edit?html,js,console,output – yellowsir

@olahell :: JavaScriptのみ... –

は、以下のコードをチェックしてください。それはあなたの箱を動かす。ちょうどcssとfpsの値を微調整して、うまくいくはずです。

は、アニメーションのヘルプをありがとう： Controlling fps with requestAnimationFrame?

var box = document.getElementById('move_box'), 
 
    fpsDiv = document.getElementById('fps'), 
 
    frameCount = 0, 
 
    startX = 50, 
 
    startY = 50, 
 
    x = startX, 
 
    y = startY, 
 
    movePerSec = 10, 
 
    moveUntilY = 100, 
 
    stop = false, 
 
    fps, fpsInterval, startTime, now, then, elapsed; 
 

 
box.style.position = "absolute"; 
 
box.style.left = x + "px"; 
 
box.style.top = y + "px"; 
 
startAnimating(30); 
 

 
function startAnimating(fps) { 
 
    fpsInterval = 1000/fps; 
 
    then = Date.now(); 
 
    startTime = then; 
 
    animate(); 
 
} 
 

 

 
function animate() { 
 

 
    // stop 
 
    if (stop) { 
 
    return; 
 
    } 
 

 
    // request another frame 
 

 
    requestAnimationFrame(animate); 
 

 
    // calc elapsed time since last loop 
 

 
    now = Date.now(); 
 
    elapsed = now - then; 
 

 
    // if enough time has elapsed, draw the next frame 
 

 
    if (elapsed > fpsInterval) { 
 

 
    // Get ready for next frame by setting then=now, but... 
 
    // Also, adjust for fpsInterval not being multiple of 16.67 
 
    then = now - (elapsed % fpsInterval); 
 

 
    // draw stuff here 
 
    var sinceStart = now - startTime; 
 
    var currentFps = Math.round(1000/(sinceStart/++frameCount) * 100)/100; 
 
    fpsDiv.textContent = "animating @ " + currentFps.toFixed(2) + " fps. X = " + x.toFixed(2) + ", Y = " + y.toFixed(2) + " animated for " + (sinceStart/1000).toFixed(2) + "s"; 
 
    x = x + movePerSec/currentFps; 
 
    y = y + movePerSec/currentFps; 
 
    box.style.left = x + "px"; 
 
    box.style.top = y + "px"; 
 
    if (y > moveUntilY) { 
 
     x = startX; 
 
     y = startY; 
 
     box.style.left = x + "px"; 
 
     box.style.top = y + "px"; 
 
     stop = true; 
 
    } 
 

 
    } 
 
}

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.blue { 
 
    background: #00f; 
 
}

<div class="box blue" id="move_box"> </div> 
 
<pre id="fps"> </pre>

出典

2017-04-20 07:38:16 olahell

[requestAnimationFrame]（https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame）は、 – thedude

の@ olahell：どうやって箱を最初から最後まで返すのですか？ –

@olahell：最初から最後までどのように返すのですか？ –

Javascriptを使用してボックスを移動する方法右に10ピクセル、右に10ピクセルを下に

答えて

関連する問題