JavaScript：針對div的動畫

-4

我想在瀏覽器中從左至右對div進行動畫處理（比如高度爲50 px和寬度爲50 px）。JavaScript：針對div的動畫

我沒有太多的代碼可以分享。我可以在這裏分享我的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-17 Selim Reza

你有你自己嘗試新鮮事物？你做過任何研究嗎？這個問題已經解決了很多次。 –

你可以使用'setInterval（1000，someFunction）'來每秒調用一個函數。然後，您可以通過在每個元素中添加「10」來修改JavaScript中的元素「left」和「top」位置。 –

你也可以使用CSS ......但似乎你沒有研究任何東西 – DaniP

檢查：

var i = 1; 
 
var div = document.getElementById('move_box'); 
 

 
function myLoop() { 
 
    setTimeout(function() { 
 
     div.style.top = i * 10 + 'px' 
 
     div.style.left = i * 10 + 'px' 
 
     i++; 
 
     if (i < 5) { 
 
      myLoop(); 
 
     } 
 
    }, 1000) 
 
} 
 

 
myLoop(); // start the loop

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.blue { 
 
    background: #00f; 
 
} 
 

 
.position { 
 
    margin-top: 50px; 
 
}

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

JSFiddle

來源

2017-04-17 14:32:46

它看起來不錯....怎麼可能就回國了，如果把它移到結束的瀏覽器？請添加更多的腳本返回到零位。 –

JavaScript：針對div的動畫

回答

相關問題