So verschieben Sie eine Box mit Javascripts 10 Pixel rechts und 10 Pixel unten pro Sekunde

Ich möchte ein div (sagen Höhe 50 px und Breite 50 px) von links nach rechts im Browser animieren.So verschieben Sie eine Box mit Javascripts 10 Pixel rechts und 10 Pixel unten pro Sekunde

Ich habe nicht viel Code zu teilen. Ich kann meinen HTML css Teil hier teilen.

<!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>

ich brauche Ihre Hilfe den Tauchgang von links nach rechts entsprechend dem Zustand „bewegt sich 10 Pixel rechts und 10 Pixel nach unten pro Sekunde“ animieren.

Hinweis: nur in JavaScript.

Vielen Dank im Voraus!

mein Skript:

<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>

Quelle

2017-04-19 Selim Reza

Nur in Javascript, ist jQuery-ui ok? – olahell

es funktioniert auf Firefox für mich: http://jsbin.com/ravayucila/edit?html,js,console,output – yellowsir

@olahell :: nur in JavaScript ... –

Überprüfen Sie den Code unten. Es bewegt deine Box. Ändern Sie einfach die css und fps Werte und Sie sollten in Ordnung sein.

Vielen Dank für die Hilfe auf Animation: 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>

Quelle

2017-04-20 07:38:16 olahell

[requestAnimationFrame] (https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) sollte für diese verwendet werden – thedude

@ Olahell: Wie gebe ich die Box von Ende zu Anfang zurück? –

@olahell: Wie gebe ich die Box von Ende zu Anfang zurück? –

So verschieben Sie eine Box mit Javascripts 10 Pixel rechts und 10 Pixel unten pro Sekunde

Antwort

Verwandte Themen