Hoạt ảnh SVG dọc theo đường dẫn với Raphael

Question

Tôi có một vấn đề khá thú vị với hoạt ảnh SVG.

Tôi sinh động dọc theo một đường tròn bằng Raphael

obj = canvas.circle(x, y, size); 
path = canvas.circlePath(x, y, radius);     
path = canvas.path(path); //generate path from path value string 
obj.animateAlong(path, rate, false); 

Phương pháp circlePath là một trong Tôi đã tạo ra bản thân mình để tạo ra con đường vòng tròn trên con đường ký hiệu SVG:

Raphael.fn.circlePath = function(x , y, r) {  
    var s = "M" + x + "," + (y-r) + "A"+r+","+r+",0,1,1,"+(x-0.1)+","+(y-r)+" z"; 
    return s; 
} 

Cho đến nay, vì vậy tốt - mọi thứ đều hoạt động. Tôi có đối tượng của tôi (obj) hoạt hình dọc theo con đường tròn.

NHƯNG:

Hình ảnh động chỉ hoạt động nếu tôi có thể tạo các đối tượng ở cùng X, Y coords như con đường riêng của mình.

Nếu tôi bắt đầu hoạt ảnh từ bất kỳ tọa độ nào khác (ví dụ, nửa đường dọc theo đường) đối tượng hoạt hình trong vòng tròn bán kính chính xác, tuy nhiên nó bắt đầu hoạt ảnh từ đối tượng X, Y tọa độ, chứ không phải dọc theo đường dẫn vì nó được hiển thị trực quan.

Lý tưởng nhất là tôi muốn có thể dừng/khởi động hoạt ảnh - cùng một vấn đề xảy ra khi khởi động lại. Khi tôi dừng lại sau đó khởi động lại hoạt ảnh, nó sẽ hoạt hình trong một vòng tròn bắt đầu từ X, Y đã dừng.

CẬP NHẬT

Tôi tạo ra một trang đó chứng tỏ vấn đề: http://infinity.heroku.com/star_systems/48eff2552eeec9fe56cb9420a2e0fc9a1d3d73fb/demo

Bấm "bắt đầu" để bắt đầu hoạt hình. Khi bạn dừng lại và khởi động lại hoạt ảnh, nó tiếp tục từ các vòng tròn hiện tại coords trong một vòng tròn của các kích thước chính xác.

Answer 1

Vấn đề là Raphael không có cách nào để biết rằng vòng tròn đã là một phần dọc theo con đường. Chức năng "bắt đầu" có nghĩa là - bắt đầu một hoạt ảnh. imo nó sẽ bị hỏng nếu nó làm bất cứ điều gì khác.

Điều đó nói rằng, trường hợp sử dụng của bạn là hợp lệ và có thể đảm bảo một chức năng khác - một 'tạm dừng' của một số loại. Tất nhiên, nhận được rằng vào thân cây sẽ mất nhiều thời gian hơn bạn muốn chờ đợi.

Từ Raphael source code, đây là những gì sẽ xảy ra khi bạn gọi 'dừng'.

Element[proto].stop = function() { 
    animationElements[this.id] && animationElements[length]--; 
    delete animationElements[this.id]; 
    return this; 
}; 

Điều này làm giảm tổng số hoạt ảnh và xóa hoạt ảnh đó khỏi danh sách. Dưới đây là chức năng 'tạm dừng' có thể trông như thế nào:

Element[proto].pause = function() { 
    animationElements[this.id] && animationElements[length]--; 
    this._paused_anim = animationElements[this.id]; 
    delete animationElements[this.id]; 
    return this; 
}; 

điều này sẽ lưu hoạt ảnh được tiếp tục lại sau. sau đó

Element[proto].unpause = function() { 
    this._paused_anim && (animationElements[this.id]=this._paused_anim); 
    ++animationElements[length] == 1 && animation(); 
    return this; 
}; 

sẽ bỏ tạm dừng. Với các điều kiện phạm vi, hai chức năng này có thể cần phải được tiêm ngay vào mã nguồn Raphael (nó là lõi hack, tôi biết nhưng đôi khi không có thay thế). Tôi sẽ đặt nó ngay bên dưới chức năng "dừng" được hiển thị ở trên.

Hãy thử điều đó và cho tôi biết cách thực hiện.

==== EDIT ====

Ok, vì vậy nó có vẻ như bạn sẽ phải thay đổi "bắt đầu" thuộc tính của animationElements [this.id] ... cái gì đó như:

this._pause_time = (+new Date) - animationElements[this.id].start; 

trong tạm dừng, và sau đó

animationElements[this.id].start = (+new Date) - this._pause_time; 

vào sơ yếu lý lịch.

http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.js#L3064