如何使用Snap.svg为​​滚轮设置动画?

时间:2017-09-15 20:55:33

标签: javascript svg snap.svg

当我尝试为车轮设置动画时,我遇到了问题。 您可以在 example

中看到这一点

我读了 article 并尝试编写代码,但也许我错过了一些东西。

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();

我做错了什么?

1 个答案:

答案 0 :(得分:1)

我修好了。这是一个小提琴(click here)你可以检查

我改变了以下功能:

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

另外,我发现滚轮动画适用于以前版本的snapsvg https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js