Phần tử xoay SVG khi hoạt ảnh svgjs

Question

Tôi đang sử dụng Javascript, Jquery, SVG và SVG.js ngay bây giờ. Tôi muốn xoay một vòng tròn về nguồn gốc của nó trong khi nó hoạt hình. Phim hoạt hình đang làm điều tương tự, vì vậy tôi có thể sử dụng một số loại chức năng bước nhưng tôi không thể tìm thấy bất cứ điều gì. Vấn đề ở đây là với giải pháp hiện tại của tôi, hoạt hình là janky, nó phải dừng hoạt ảnh, xoay vòng tròn và sau đó bắt đầu lại. Cái nào theo thứ tự có quá nhiều sự chậm trễ và gây ra một chuyển động lúng túng. Dưới đây là đoạn mã thiết lập:

var draw = SVG('svg'); 
var innerCircle = draw.group().addClass("atom0g0").move(100,100); 
innerCircle.circle(100).addClass("atom0p0").center(0, 0).attr({ fill: "white", stroke: "blue", "stroke-dasharray": "10" }); 
innerCircle.animate(6000).rotate(360, 0, 0).loop(); 

Và mã thực hiện ngay bây giờ, mà tôi cần phải thay đổi cái gì đó đang ở đây:

var elms = $(".atom"+atom.atom_id.toString()+"g0"); 
for (var j=0; j < elms.length; j++) { 
    // this is the problem, too much of a delay, therefore causing a wiggle motion. 
    elms[j].instance.animate().stop(); 
    elms[j].instance.rotate(step, 0, 0); 
    elms[j].instance.animate(6000).rotate(360, 0, 0).loop(); 
} 

Đây là CodePen mà tôi đang làm việc trên ngay bây giờ để làm cho nó : Current Version hoặc Bugged Version

Tóm lại (nếu bạn vừa bỏ qua đến đây), tôi cần xoay vòng tròn mà không dừng hoạt ảnh của vòng tròn hoàn toàn. Tôi biết rằng play(), pause() không hoạt động bởi vì tôi không thể gọi số rotate() khi hoạt ảnh bị tạm dừng.

Answer 1

câu trả lời được chấp nhận:

Cố gắng quấn yếu tố của bạn với thêm một yếu tố và animate chúng riêng rẽ.

---

Một trong những giải pháp là thay đổi dòng này:

elms[j].instance.rotate(Math.random()*360, 0, 0); 

vào rằng:

elms[j].instance.animate(1000).rotate(Math.random()*360, 0, 0); 

xoay Bằng cách này sẽ rất sôi động.

Codepen: https://codepen.io/soentio/pen/POVLYV

---

khác trong những giải pháp có thể tôi sử dụng css cho quá trình chuyển đổi của bạn. Bằng cách thêm dòng sau:

#svg > g { 
    transition: transform 1s ease-in-out; 
} 

bạn hãy chắc chắn rằng bất cứ khi nào một nhóm (đó là con trực tiếp của nút gốc svg) được xoay, nó sẽ hoạt động trơn tru.

CodePen: https://codepen.io/soentio/pen/gXqqNQ

Advantage của phương pháp này là bất cứ điều gì xoay của bạn, trình duyệt chọn con đường ngắn nhất.

---

Bonus: Tôi tin vào hình ảnh động ưu việt od css (;-)) và lấy cảm hứng từ mã của bạn làm cho bạn một chút fiddle codepen: https://codepen.io/soentio/pen/YEBgyj Có lẽ mục tiêu của bạn là phải đạt được chỉ với css?