我想在浏览器中从左到右为一个 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 个像素”的条件从左到右为 div 设置动画。
注意:仅在 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>
最佳答案
查看下面的代码。它移动你的盒子。只需调整 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>关于javascript - 如何使用 JavaScript 每秒向右移动 10 个像素并向下移动 10 个像素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43488936/