Question

我想在浏览器中从左到右设置一个div（比如高度50像素和宽度50像素）。

我没有太多代码要分享。我可以在这里分享我的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>

Answer 1

查看下面的代码。它移动你的盒子。只需调整css和fps值，你应该没问题。

感谢您对动画的帮助：Controlling fps with requestAnimationFrame?

＆＃13;

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

＆＃13;

.box {
  width: 100px;
  height: 100px;
}

.blue {
  background: #00f;
}

＆＃13;

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

＆＃13;

Answer 2

<script type="text/javascript">
        let leftStartingPoint = 0;
        let topStartingPoint = 50;
        var element = document.getElementById("move_box");
        let interval = setInterval(function(){
            moveBox();
            if(topStartingPoint >= 500){//your custom logic to stop moving//
                clearInterval(interval);
            }
        },1000);
        function moveBox(){
            let count = 0;
            let moveRight = setInterval(function(){
                count += .1;
                if(count >= 10){
                    count = 0;
                    clearInterval(moveRight);
                    let moveDown = setInterval(function(){
                        count += .1;
                        if(count >= 10){
                            count = 0;
                            clearInterval(moveDown);
                        }else{
                            topStartingPoint += .1;
                            element.style.top = topStartingPoint+"px";
                        }
                    },5);
                }else{
                    leftStartingPoint += .1;
                    element.style.left = leftStartingPoint+"px";
                }
            },5);
        }
    </script>

Answer 3

这是一个简单的解决方案-

let wrapperHeight = document.getElementById("wrapper").offsetHeight;
let blue_box = document.getElementById("box");
let animateDirection = 0; // animation direction, Ex- 0 for animate right bottom.

const animateBox = () => {

    let PositionLeft = blue_box.offsetLeft;
    let PositionTop = blue_box.offsetTop;

    if ((PositionLeft + 100) >= screen.width || (PositionTop + 100) >= wrapperHeight) {
        animateDirection = 1;
    } else if (blue_box.offsetLeft < 0) {
        animateDirection = 0;
    }

    if (animateDirection === 0) {
        PositionLeft = PositionLeft + 10;
        PositionTop = PositionTop + 10;
    } else {
        PositionLeft = PositionLeft - 10;
        PositionTop = PositionTop - 10;
    }

    blue_box.style.left = PositionLeft + "px";
    blue_box.style.top = PositionTop + "px";

    setTimeout(function () { animateBox() }, 1000);
}

setTimeout(function () { 
    animateBox();
    console.log('called')
}, 1000); // initialize

实时示例在此处-https://js-animation-prepared-for-js-skill-exam-test.netlify.com/

如何使用Javascripts移动一个框，每秒10像素，每秒10像素

3 个答案: