자바 스크립트를 사용하여 상자를 이동하는 방법 초당 10 픽셀, 초당 10 픽셀

브라우저에서 왼쪽에서 오른쪽으로 div (높이 50px 및 50px) 애니메이션을 적용하고 싶습니다.자바 스크립트를 사용하여 상자를 이동하는 방법 초당 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

만 자바 스크립트, jQuery를-UI는 괜찮아? – olahell

그것은 나를 위해 파이어 폭스에서 작동합니다 : http://jsbin.com/ravayucila/edit?html,js,console,output – yellowsir

@olahell :: 자바 스크립트에서만 ... –

체크 아웃. 상자가 움직입니다. 그냥 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

사용해야 다운 당 10 개 화소 이동 @ olahell : 처음부터 끝까지 상자를 반환하려면 어떻게해야합니까? –

@olahell : 어떻게 상자를 처음부터 끝까지 돌려 놓을 수 있습니까? –

자바 스크립트를 사용하여 상자를 이동하는 방법 초당 10 픽셀, 초당 10 픽셀

답변

관련 문제