Cách sử dụng Raphael .animateWith()

Question

Có ai đã sử dụng .animateWith() trong Raphael để giữ thành công các hoạt ảnh nhanh đồng bộ không? Nó được ghi nhận không đúng. Người sáng tạo của thư viện có một số video demonstration nhưng không có mã tôi có thể tìm thấy.

Tôi có một nhịp điệu Javascript bao gồm một dòng (cánh tay của nhịp) và hình thang "trọng lượng" mà cuối cùng sẽ di chuyển lên và xuống để biểu thị tiến độ. Tôi có một fiddle làm việc here, và các dòng trong câu hỏi là:

 var ticktock = Raphael.animation({ 
      "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }}, 
      "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }} 
     }, interval).repeat(repeats/2); 
     arm.animate(ticktock); 
     weight.animateWith(arm, ticktock, ticktock);  

Nếu bạn kiểm tra fiddle và cung cấp cho nó một nhịp độ cao và khoảng 20 ve, bạn sẽ thấy độ trễ cân đằng sau cánh tay. (Hãy thử nó một vài lần nếu không - Murphy's Luật vv) Tôi nghĩ rằng đây là chính xác những gì animateWith() ngăn chặn. Có lẽ tôi đang sử dụng nó không chính xác.

Nếu bạn nhìn vào Raphael source cho hàm .animateWith(), bạn sẽ thấy nó đồng bộ hóa tham số .start của mỗi hoạt ảnh, FWIW.

Answer 1

Từ Raphael documentation:

thông số:

yếu tố - [đối tượng] yếu tố để đồng bộ với

anim - [đối tượng] hoạt hình để đồng bộ với

hoạt hình - [đối tượng] Hoạt ảnh đối tượng, xem Raphael.animation

Vì vậy, tôi nghĩ rằng mã của bạn chỉ cần tách hoạt hình và vượt qua đó vào tham số thứ hai cho .animateWith():

Các hoạt hình phần chỉ là:

{ 
    "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: animationDone }, 
    "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: animationDone } 
} 

Vì vậy, bạn có thể làm điều này:

var animationDone = function() { 
    tick(this, repeats, done); 
}; 

var ticktockAnimationParam = { 
    "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: animationDone }, 
    "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: animationDone } 
}; 
var ticktock = Raphael.animation(ticktockAnimationParam, interval).repeat(repeats/2); 
arm.animate(ticktock); 
weight.animateWith(arm, ticktockAnimationParam, ticktock);  

Xem fiddle: http://jsfiddle.net/wDwsW/7/

FYI, tôi chuyển chức năng gọi lại bên ngoài, thay vì sử dụng các chức năng ẩn danh.