Перемещение изображения из A в B с помощью JavaScript

Я здесь впервые, и я не знаю, как сделать отступ, извините: /

У меня есть изображение фургона, и я пытаюсь переместить его по экрану, как будто он едет. Как только это будет сделано, я масштабирую изображение, чтобы оно выглядело так, как будто оно удаляется (и становится меньше).

Мне нужно, чтобы это было сделано в стандартном javascript без каких-либо пакетов (например, JQuery), пожалуйста.

У меня есть фургон, который по причине, которую я не могу сломать, движется по двум дорожкам вместо одной. Также движется в неправильном направлении (он должен двигаться по пути y = -25x, так что каждые 25 пикселей, перемещенных вправо, он должен перемещаться на 1 пиксель вверх).

Чтобы проиллюстрировать, чего я пытаюсь достичь, посмотрите это изображение: http://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-файл:



5
задан Ozzy 5 November 2011 в 17:28
поделиться