Jest to mój pierwszy raz tutaj i nie wiem jak to wcięcie przepraszam:/Przenoszenie obrazu z A do B z JavaScript
mam obraz furgonetki i staram się przenieść go w poprzek ekran tak, jakby jechał. Po wykonaniu tej czynności przeskaluje obraz tak, aby wyglądał, jakby się oddalał (i zmniejszał).
Potrzebuję tego zrobić w standardowym javascript bez żadnych pakietów (takich jak JQuery).
To, co mam, to furgonetka, która z powodu której nie mogę się zepsuć, porusza się po dwóch ścieżkach zamiast jednej. Porusza się również w niewłaściwym kierunku (powinien przesuwać się wzdłuż ścieżki y = -25x, tak aby każde 25 pikseli przesuniętych w prawo powinno przesunąć się o 1 piksel w górę).
Aby zilustrować to, co próbuję osiągnąć, proszę zobaczyć ten obraz: http://i.stack.imgur.com/9WIfr.jpg
To jest mój plik 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);
}
To jest mój plik HTML:
<script type="text/javascript" src="delivery.js"> </script>
<body onLoad="initVan();">
<img id="van" width=413 height=241/>
Jak sformatować posty przepełnienie stosu: http://stackoverflow.com/editing-help –
Masz wcięte go raczej dobrze na drodze. Najlepszym sposobem jest proste wklejenie wciętego kodu, wyróżnienie go w edytorze i naciśnięcie przycisku kodu (lub kombinacji CTRL + K). –
Dzięki, właściwie to nie pozwoliłoby mi opublikować tego, a komunikat o błędzie powiedział CTRL + K, więc zrobiłem to. – Ozzy