Pregunta bastante simple (podría estar equivocada)HTML5/js: cómo animar una línea recta entre dos coordenadas?
Estoy buscando animar entre dos puntos en una línea recta, usando HTML5 y/o Jquery.
ctx.beginPath();
ctx.moveTo(0, 0); // a
ctx.lineTo(100, 100); // b
ctx.stroke();
EDIT: un plugin jQuery que estoy desarrollando para la animación de trayectoria http://lazylinepainter.info/
Gracias Valli-R y Zevan,
He codificado una amalgama de sus dos respuestas que utiliza lerp con requestAnimFrame
visitar http://lazylinepainter.info/ – Cam
Esto funciona para mí:
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í, que dibuja la línea, pero no anima entre los dos puntos ... http://jsbin.com/enobes/ Sería ideal si podría establecer un tiempo y relajar la ecuación – Cam
Usted debe comprobar esto: http://paulirish.com/2011/requestanimationframe-for-smart-animating/ es bastante fácil de hacer, después de leerlo, usted debería ser capaz de hacerlo! También hay un ejemplo.
Puede usar una interpolación lineal o lerp. Algo como esto. Este es un ejemplo de jsFiddle: http://jsfiddle.net/UtmTh/ y aquí está el código principal:
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);
probar esto, no estoy seguro si es lo que está después, puede explicar cualquier cosa que no está seguro de:
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/ -> demostración
- Andy
gracias andy, me las arreglé para llevar mi respuesta más allá http://jsbin.com/enobes/6 añadiendo una función cancelRequestAnimFrame - http: // notes .jetienne.com/2011/05/18/cancelRequestAnimFrame-for-paul-irish-requestAnimFrame.html. ¡cómo ha agregado la facilidad, intentará incluirlo! – Cam
Lo que se quiere decir con * * animado? –
ummm interpolation? – Cam
Haré un diagrama ... un momento – Cam