Wystarczająco proste pytanie (mogłoby być nie tak)HTML5/js - jak animować linię prostą między dwiema współrzędnymi?
Zamierzam wykonać animację między dwoma punktami w linii prostej, używając HTML5 i/lub Jquery.
ctx.beginPath();
ctx.moveTo(0, 0); // a
ctx.lineTo(100, 100); // b
ctx.stroke();
EDIT: plugin jquery Zajmuję animacji ścieżki http://lazylinepainter.info/
Dzięki Valli-R i Zevan,
mam zakodowane amalgamat swoimi dwoma odpowiedziami, które wykorzystuje lerp z requestAnimFrame
wizyta http://lazylinepainter.info/ – Cam
Działa to dla mnie:
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();
tak, to rysuje linię, ale nie animuje między dwoma punktami ... http://jsbin.com/enobes/ Byłoby idealnie, gdyby można ustawić czas i łagodzenie równania – Cam
Należy to sprawdzić: http://paulirish.com/2011/requestanimationframe-for-smart-animating/ jest to dość łatwe do zrobienia, po przeczytaniu, że powinieneś być w stanie to zrobić! Istnieje również przykład.
Można użyć interpolacji liniowej lub lerp. Coś takiego. Oto przykład na jsfiddle: http://jsfiddle.net/UtmTh/ i oto kod główny:
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);
spróbuj tego, nie wiem, czy to jest to, czego po, może wyjaśnić wszystko, czego nie jesteśmy pewni:
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
dzięki andy, udało mi się wziąć moją odpowiedź abit dalej http://jsbin.com/enobes/6 dodając funkcję cancelRequestAnimFrame - http: // notes .jetienne.com/2011/05/18/cancelRequestAnimFrame-for-paul-irish-requestAnimFrame.html. podobnie jak dodałeś łatwość, postaram się ją uwzględnić! – Cam
Co chcesz powiedzieć z * ożywionej *? –
interpolacja ummm? – Cam
Wykonam diagram ... jedną chwilę – Cam