这是我第一次来这里，我不知道如何缩进这个抱歉：/
我有一张货车的图像，我试图将其移动到屏幕上，就像它正在行驶一样。
完成后，我将缩放图像，使其看起来好像它正在移动（并且变小）。
我需要在标准 javascript 中完成此操作，无需任何包（例如 JQuery）。
我所拥有的是一辆货车，由于我无法分解的原因，它沿着两条路径而不是一条行驶。也向错误的方向移动（它应该沿着路径 y=-25x 移动，这样每向右移动 25 个像素，它就应该向上移动 1 个像素）。
为了说明我想要实现的目标，请参阅此图片：https://i.stack.imgur.com/9WIfr.jpg https://i.stack.imgur.com/9WIfr.jpg
这是我的 JavaScript 文件：
var viewWidth = 800;
var viewHeight = 480;
var fps = 30;
var delay = getFrame(fps);
var vanWidth, vanHeight, vanObj;
function initVan() {
vanObj = document.getElementById("van");
vanObj.style.position = "absolute";
vanObj.src = "pics/delivery/van.png";
vanWidth = 413;
vanHeight = 241;
var startX = 0-vanWidth;
var startY = viewHeight-vanHeight;
setPosition(startX,startY);
transition(startX,startY,3000);
}
function transition(startX,startY,time) {
//the intention of this is to follow a path y=-25x in mathematical terms
var endX = viewWidth;
var endY = startY-(endX/-25);
//note that this is the velocity per millisecond
var velocityX = (endX-startX)/time;
var velocityY = (endY-startY)/time;
alert(endY+", "+startY);
move(velocityX,velocityY,endX,endY);
}
function move(vX,vY,eX,eY) {
var posX = getX();
var posY = getY();
if (posX<=eX || posY<=eY) {
//velocityX (in milliseconds) * delay = the amount of pixels moved in one frame @fps=30
var moveX = vX*delay;
var moveY = vY*delay;
var newX = posX+moveX;
var newY = posY+moveY;
setPosition(newX,newY);
setTimeout(function() {
move(vX,vY,eX,eY);
}, delay);
}
}
function getX() {
return vanObj.offsetLeft;
}
function getY() {
return vanObj.offsetTop;
}
function setPosition(newX,newY) {
vanObj.style.left = newY + "px";
vanObj.style.top = newX + "px";
}
function setSize(scaleX,scaleY) {
vanWidth *= scaleX;
vanHeight *= scaleY;
vanObj.width = vanWidth;
vanObj.height = vanHeight;
}
function getFrame(fps) {
return Math.floor(1000/fps);
}
这是我的 HTML 文件：
<script type="text/javascript" src="delivery.js"> </script>
<body onLoad="initVan();">
<img id="van" width=413 height=241/>
