Câu hỏi đơn giản đủ (có thể sai)HTML5/js - cách tạo hiệu ứng đường thẳng giữa hai tọa độ?
im tìm kiếm động giữa hai điểm theo đường thẳng, sử dụng HTML5 và/hoặc Jquery.
ctx.beginPath();
ctx.moveTo(0, 0); // a
ctx.lineTo(100, 100); // b
ctx.stroke();
EDIT: một plugin jquery tôi đang phát triển cho con đường hoạt hình http://lazylinepainter.info/
Cảm ơn Valli-R và Zevan,
Tôi đã mã hóa một hỗn hợp của hai câu trả lời của bạn trong đó sử dụng lerp với requestAnimFrame
truy cập http://lazylinepainter.info/ – Cam
này làm việc cho tôi:
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();
vâng, điều đó vẽ đường thẳng, nhưng không tạo hiệu ứng động giữa hai điểm ... http://jsbin.com/enobes/ Sẽ rất lý tưởng nếu tôi có thể thiết lập một thời gian và giảm bớt phương trình – Cam
Bạn nên kiểm tra này ra: http://paulirish.com/2011/requestanimationframe-for-smart-animating/ nó là khá dễ dàng để làm, sau khi đọc nó, bạn sẽ có thể làm điều đó! Ngoài ra còn có một ví dụ.
Bạn có thể sử dụng nội suy tuyến tính hoặc lerp. Một cái gì đó như thế này. Dưới đây là một ví dụ về jsfiddle: http://jsfiddle.net/UtmTh/ và đây là mã chính:
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);
cho một thử này, không chắc chắn nếu nó là những gì bạn đang sau, có thể giải thích bất cứ điều gì bạn không chắc chắn về:
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/ -> bản demo
- Andy
cảm ơn andy, tôi quản lý để có câu trả lời của tôi abit thêm http://jsbin.com/enobes/6 thêm một chức năng cancelRequestAnimFrame - http: // ghi chú .jetienne.com/2011/05/18/cancelRequestAnimFrame-for-paul-irish-requestAnimFrame.html. như cách bạn đã thêm sự dễ dàng, sẽ cố gắng bao gồm nó! – Cam
gì bạn muốn nói với * Animate *? –
nội suy ummm? – Cam
tôi sẽ tạo biểu đồ ... một khoảnh khắc – Cam