CODEWITHSUNDEEP
javascriptsvgsnap.svg
Slavik
Slavik

Reputation: 55

how to animate the wheel with Snap.svg?

When I try animate the wheel, I have problem. You can see this in the example.

I read article and try wrote code, but maybe I missed something.

function moveWheels() {
 wheel_right_needles.animate({ transform: 'r0 ' + 
  getCenterPoint(wheel_right_needles) });

 setTimeout(function() {
  wheel_right_needles.animate({ transform: 'r90 ' + 
  getCenterPoint(wheel_right) }, 1000, function() {
    moveWheels();
  });
 }, 300);
}

moveWheels();

What am I doing wrong?

Upvotes: 0

Views: 105

Answers (1)

RashFlash
RashFlash

Reputation: 1002

i fixed it. here is a fiddle (click here) you can check

I changed the function as below:

function moveWheels() {
   var c=getCenterPoint(wheel_right_needles);    
    wheel_right_needles.transform("r0," + c);  
     wheel_right_needles.animate({ transform: 'r360 ' + c }, 1000, function()  {
       moveWheels();
    });
}

Also, i noticed wheel animation works on previous version of snapsvg https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js

Upvotes: 1

Related Questions