如何使用 Snap.svg 为轮子设置动画？答案

【问题标题】：how to animate the wheel with Snap.svg?如何使用 Snap.svg 为轮子设置动画？
【发布时间】：2017-09-20 15:51:43
【问题描述】：

当我尝试为轮子设置动画时，我遇到了问题。您可以在 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();

我做错了什么？

【问题讨论】：

我不是浏览器中 SVG 动画方面的专家，但是在 movewheels 函数中添加一个快速的 console.log（在你的 timeOut 中，第 187 行）表明 wheel_right 的 getCenterpoint 是未定义的。跨度>

标签： javascript svg snap.svg

【解决方案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

【讨论】：