Progressive Paths
Vẽ một con đường dần dần rất dễ dàng để làm. Tôi không thích câu trả lời được chấp nhận nhiều thứ hai trên this question vì nó tạo lại đường dẫn ở mọi bước, xóa giấy ở giữa. Đây là chức năng tiện ích mà tôi đã sử dụng thời gian và thời gian một lần nữa:
function drawpath(canvas, pathstr, duration, attr, callback)
{
var guide_path = canvas.path(pathstr).attr({ stroke: "none", fill: "none" });
var path = canvas.path(guide_path.getSubpath(0, 1)).attr(attr);
var total_length = guide_path.getTotalLength(guide_path);
var last_point = guide_path.getPointAtLength(0);
var start_time = new Date().getTime();
var interval_length = 50;
var result = path;
var interval_id = setInterval(function()
{
var elapsed_time = new Date().getTime() - start_time;
var this_length = elapsed_time/duration * total_length;
var subpathstr = guide_path.getSubpath(0, this_length);
attr.path = subpathstr;
path.animate(attr, interval_length);
if (elapsed_time >= duration)
{
clearInterval(interval_id);
if (callback != undefined) callback();
guide_path.remove();
}
}, interval_length);
return result;
}
Bạn có thể thấy nó hoạt động on my site.
Điều này một mình sẽ làm cho hoạt hình xây dựng đường dẫn tiến bộ của các điểm của bạn theo kiểu tuyến tính hoàn toàn đơn giản. Bạn chỉ cần biên dịch đường dẫn của mình ...
var sequence_path = ["M26,-6", "L14,-12", "L5,-20", "L11,-28", "L14,-37", "L5,-40"];
Sau đó chuyển nó tới bất kỳ chức năng hoạt ảnh đường dẫn nào bạn đã thiết lập. Trong trường hợp của tôi,
drawpath(paper,
sequence_path,
3500,
{ stroke: 'black', 'stroke-width': 2, 'stroke-opacity': 1, fill: 'none', 'fill-opacity': 0 },
function()
{
alert("All done"); // trigger whatever you want here
});
cong Interpolation
tính năng Catmull Rom Raphael 2.0 làm cho cong một cách duyên dáng giữa các điểm của bạn vô cùng đơn giản (nhờ Erik Dahlström cho trỏ này ra). Tất cả những gì bạn cần làm là xây dựng đường dẫn bằng lệnh 'R' để di chuyển giữa các điểm và Raphael sẽ thực hiện phần còn lại.
function generateInterpolatedPath(points)
{
var path_sequence = [];
path_sequence.push("M", points[0].x, points[0].y);
path_sequence.push("R");
for (var i = 1; i < points.length; i++)
{
path_sequence.push(points[i].x, points[i].y);
}
return path_sequence;
}
Bạn có thể xem tất cả các phần hoạt động cùng nhau here.
cảm ơn bạn rất nhiều! –
Cảm ơn _you_.Các vấn đề nội suy là một bộ não-teaser tuyệt vời =) –
@ KevinNielsen, tôi đã sử dụng này, nhưng tôi đã chỉ nhận thấy rằng nó chạy nhanh hơn dự kiến trong Firefox. Tôi đã có một con đường của 4 điểm và nếu tôi đặt nó đến 2 giây (hoặc nhiều hơn), phải mất ít thời gian hơn thế. – Jayen