Domanda abbastanza semplice (potrebbe essere sbagliata)HTML5/js - come animare una linea retta tra due coordinate?
Sto cercando di animare tra due punti in linea retta, utilizzando HTML5 e/o Jquery.
ctx.beginPath();
ctx.moveTo(0, 0); // a
ctx.lineTo(100, 100); // b
ctx.stroke();
EDIT: un plugin jQuery che sto sviluppando per l'animazione percorso http://lazylinepainter.info/
Grazie Valli-R e Zevan,
ho codificato un amalgama dei vostri due risposte che utilizza lerp con requestAnimFrame
visitare http://lazylinepainter.info/ – Cam
questo funziona per me:
HTML:
<html>
<head>
</head>
<body>
<canvas id="canvas">
</canvas>
</body>
</html>
JS:
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0); // a
ctx.lineTo(100, 100); // b
ctx.stroke();
sì, che disegna la linea, ma non si anima tra i due punti ... http://jsbin.com/enobes/ Sarebbe l'ideale se io potrebbe impostare un tempo e un'equazione di andamento – Cam
Si dovrebbe controllare questo fuori: http://paulirish.com/2011/requestanimationframe-for-smart-animating/ è abbastanza facile da fare, dopo averlo letto si dovrebbe essere in grado di farlo! C'è anche un esempio.
È possibile utilizzare un'interpolazione lineare o lerp. Qualcosa come questo. Ecco un esempio su jsfiddle: http://jsfiddle.net/UtmTh/ ed ecco il codice principale:
var canvas = $("#paper")[0];
var c = canvas.getContext("2d");
var startX = 50;
var startY = 50;
var endX = 100;
var endY = 100;
var amount = 0;
setInterval(function() {
amount += 0.05; // change to alter duration
if (amount > 1) amount = 1;
c.clearRect(0, 0, canvas.width, canvas.height);
c.strokeStyle = "black";
c.moveTo(startX, startY);
// lerp : a + (b - a) * f
c.lineTo(startX + (endX - startX) * amount,
startY + (endY - startY) * amount);
c.stroke();
}, 30);
dare una prova, non so se è quello che siete dopo, in grado di spiegare tutto ciò non si è sicuri di:
var frame = function() { // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(function() {
callback(+new Date())
}, 10)
}
}()
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var easeing = {bouncePast: function (pos) { //just a sample to show easing
if (pos < (1/2.75)) {
return (7.5625 * pos * pos);
} else if (pos < (2/2.75)) {
return 2 - (7.5625 * (pos -= (1.5/2.75)) * pos + .75);
} else if (pos < (2.5/2.75)) {
return 2 - (7.5625 * (pos -= (2.25/2.75)) * pos + .9375);
} else {
return 2 - (7.5625 * (pos -= (2.625/2.75)) * pos + .984375);
}
} }
function animate(x1,y1,x2,y2, duration, ease) { //your main animation loop
var start = +new Date();
frame(run);
function run(t) {
var delta =t - start;
var pos = delta/duration;
if (delta <= duration) {
draw(x1,y1,x2,y2, ease, pos)
frame(run)
}
}
}
function draw(x1,y1,x2,y2,ease, pos) { //does the drawing
var easepos= ease(pos)
canvas.width = canvas.width;
ctx.strokeStyle = "black";
ctx.moveTo(x1, y1);
ctx.lineTo(x1 + (x2 - x1) * easepos, y1+ (y2- y1) * easepos);
ctx.stroke();
}
animate(10,10,150,100, 2000, easeing.bouncePast)
http://jsfiddle.net/fqtGb/2/ -> demo
- Andy
grazie andy, sono riuscito a portare la mia risposta abit oltre http://jsbin.com/enobes/6 aggiungendo una funzione cancelRequestAnimFrame - http: // note .jetienne.com/2011/05/18/cancelRequestAnimFrame-for-paul-irish-requestAnimFrame.html. come se avessi aggiunto la facilità, proveresti ad includerla! – Cam
Quello che vuoi dire con * * animato? –
ummm interpolazione? – Cam
Farò un diagramma ... un momento – Cam