棘手的raphael svg动画

Question

我使用Raphael从这个jsfiddle创建了一个"甜甜圈"图表。我对这个脚本进行了微调，并且目前正在渲染出这个。我的目标是同时动画化每个部分，例如：让蓝色部分增长到60％，红色部分缩小到40％。我已经能够通过删除现有的部分并快速重新渲染新的部分来重绘各部分（例如51,49），但问题在于它是瞬间完成的。我的问题是，(a) 是否可以在不需要重绘对象的情况下对其进行动画处理（如何）？ (b) 如果无法，如何使用重绘逻辑来实现此效果的动画化？

- sgb

Answer 1

是的。在你得到饼图的Raphael演示页面上，有一个做这件事情的示例。请参见Growing Pie演示。

你应该将生成路径的代码分离成一个独立的函数，以便稍后可以使用它来返回新的路径。为了使用animate()，你需要在customAttributes对象上定义一个函数；它应该返回（至少）一个具有path属性设置为你的切片的新路径的对象。

由于你有标签，你可能希望修改代码，使得饼图扇形相对于它们的中心展开/收缩，这样你就不必移动标签，因为标签是居中在它们的扇形“轴”上的。

更新

这里有一个JSFiddle，其中有一个简单的示例，几乎与Dmitri的Growing Pie演示相同，只是更像你的图表。我导出了一个setValue()方法来改变切片大小，并在页面加载时调用它。也可以看看他关于添加customAttributes的博客文章。

在我上面的最后一段中，我有点偏离了轨道。你的图表不是带标签的那个；我把它们搞混了。此外，保持切片居中会更难，所以我并没有这样做。animate()函数将每个部分设置为其在圆上的新起始和结束点，而Raphael则计算出中间点。正如你所看到的，你可以在一个数组中传递多个参数。

this.customAttributes.slice = function(a0, a1) { /*...*/ }
// ...
chart.push(paper.path().attr({slice:[0, Math.PI/2 ]})

- Steve

---

谢谢您指出这个演示，我真的应该注意到它。您的解释帮助我更好地理解了，但是您能否在我提供的jsfiddle链接（http://jsfiddle.net/xwtgV/）上给我展示一个基本的演示呢？ - sgb

我更新了我的答案，添加了一些额外的细节和JSFiddle示例。它定义了一个customAttributes函数，该函数接受多个参数，因此可以与Element.animate()一起使用。 - Steve

Answer 2

因为我在iPod上，无法看到所有的小提琴，但听起来你需要在一个函数内部进行动画调用，你需要编写这个函数并使用回调参数调用它所在的函数。 编写递归调用的函数，使其在完成所有工作时最终完成。 每次对该函数的调用都将发生在您指定的每个经过时间间隔的末尾...

- Chasbeen