拉斐尔问题 - 使用 animateAlong答案

【问题标题】：raphael question - using animateAlong拉斐尔问题 - 使用 animateAlong
【发布时间】：2011-06-01 01:04:38
【问题描述】：

我正在使用 raphael 制作一些 SVG 动画，但似乎无法让 animateAlong 函数工作。我继续收到错误“attrs[0] is undefined”引用未压缩的 raphael 代码的第 3450 行。

基本上，我创建了一个具有给定中心的圆，然后想要围绕该路径制作动画。这是简单的代码：

var circle = paper.circle(circleCenterX, circleCenterY, circleRadius);

然后我克隆一个图像（因为我计划在这条路径上放置一些图像）并放置在圆圈的边缘：

var wheelClone = wheel.clone();
var wheelRadius = parseInt(wheel8ImageWidth/2);
wheelClone
.translate((circleCenterX + circleRadius)-3, circleCenterY-wheelRadius);

我之前用 circleCenterX = circle.attr(cx); 初始化 circleCenterX；

如果图像放置正确，这一切都可以正常工作 - 但在 animateAlong 上会出错。

我已经研究了尽可能多的示例，并剖析了文档，但无法在这里找到窍门。

所以，我只是尝试调用该函数，但不知道文档指的是什么。该文档在路径周围设置了一个点动画，但引用了两个变量 - rx 和 ry，我无法确定 - 无论是在 init 函数中，还是在回调中。

这就是我所拥有的 - - 其中 rx 和 ry 只是组成，因为我不知道它们指的是什么。

 var wheelAttr = {
  rx: 5,
  ry: 3
 };

 wheelClone.attr(wheelAttr).animateAlong(circle, 2000, true, function() {
  wheel.attr({rx: 4, ry: 4});
 });

我目前的jsFiddle有点乱，我可以清理一下，但是我怀疑这里有什么明显的东西？

谢谢大家

【问题讨论】：

标签： javascript svg raphael

【解决方案1】：

我不认为一个圆圈实际上是一条有效的路径（即，你可以传递给 animateAlong() 的东西）。我认为您需要创建一条圆形的路径。请参阅以下内容：

svg-animation-along-path-with-raphael

希望对您有所帮助。

【讨论】：