拉斐尔问题-使用animateAlong

raphael question - using animateAlong

本文关键字：使用 animateAlong 问题      更新时间：2023-09-26

我正在使用拉斐尔制作一些SVG动画，但似乎无法使函数animateAlong正常工作。引用未压缩的拉斐尔代码的第3450行，我继续得到错误"attrs[0]未定义"。

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

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

然后我克隆一个图像（因为我计划在这个路径上有很多这样的图像），并将其放置在圆圈的边缘：

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

其中我早先初始化circleCenterX，circleCenter X=circle.attr（cx）；

如果图像放置正确，这一切都很好，但在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有点乱，我可以清理一下，但我怀疑这里有什么明显的东西？

感谢所有

S

我不认为圆实际上是一个有效的路径（即，可以传递给animateAlong（）的路径）。我认为你需要创造一条循环的道路。参见以下内容：

svg动画沿着路径与拉斐尔

希望这会有所帮助。

相关文章：