Custom Animation trong Raphaël.js

Question

Hyphotesis

Tôi có một số vòng tròn trên một con đường (xem bắt đầu hình dạng trong hình) và họ cần phải động đến một đường dẫn (cuối hình trong hình).

Có một số hành động của phim hoạt hình phải làm:
- di chuyển toàn bộ hình dạng đến vị trí mới
- thay đổi đường dẫn
- giảm tất cả các bán kính vòng tròn

Hình:

Sự cố

Raphael.js know h ow để animate các vòng tròn từ các tọa độ ban đầu đến các tọa độ cuối cùng cũng thay đổi bán kính. Bởi vì các hình ảnh động không chạy trên một con đường tương tự như bản gốc và cuối cùng, các hình ảnh động không nhìn rất tốt. Các vòng tròn đi từ x1, y1 đến x2, y2 theo đường thẳng.

Những gì tôi cố gắng

1. Làm phim hoạt hình thẳng về phía trước, di chuyển vòng tròn từ đầu đến cuối, thay đổi bán kính. Như tôi đã nói, điều này không ổn.

2. Di chuyển mọi vòng tròn trong khoảng thời gian, tính toán đường dẫn mới trên mỗi lần lặp và tính toán vị trí của vòng kết nối. Điều này chạy rất chậm.

3. Tính toán vị trí vòng tròn tạm thời trên mỗi lần lặp với Element.getPointAtLength(). Điều này cũng rất chậm.

4. Có một vài đường dẫn trung gian được mã hóa cứng trong mảng và chạy hoạt ảnh qua từng mảng. Điều này tốt hơn về mặt tốc độ nhưng trông có vẻ hơi giật

Vì vậy, có ý tưởng nào không?

Answer 1

http://irunmywebsite.com/raphael/additionalhelp.php?v=2&q=element.getpointatlength

Tôi đang trên iPod nên không nói nhiều, nhưng điều này có thể giúp