我使用raphael创建了一个来自this jsfiddle的'甜甜圈'图表。
我已调整此脚本以满足我的需求，目前正在呈现 this 。
我的目标是为每个切片设置动画（同时）;例如，使蓝色切片增长到60％;红色切片缩小到40％。
我已经能够通过删除现有切片重新绘制切片并快速重新渲染具有调整值的新切片（例如，51,49）。但问题在于它是即时的。
我的问题是，
（a）我可以在不需要重绘对象（以及如何）的情况下设置动画吗？ （b）如果没有，我如何使用重绘逻辑为这种效果设置动画？
答案 0 :(得分：3)
是。在Raphael演示页面上有一个这样做的例子，你得到了饼图。请参阅Growing Pie演示。
您应该将生成路径的代码分离为独立函数，以便以后可以使用它来返回新路径。要使用animate（），您需要在customAttributes object上定义一个函数;它应该返回（至少）一个对象，其path属性设置为切片的新路径。
由于您有标签，因此您可能希望修改代码，使饼图相对于其中心展开/缩小，这样您也不必移动标签，因为标签位于中心位置他们的切片的“轴”。
<强>更新
这是一个JSFiddle，有一个简单的例子，与Dmitri的Growing Pie演示几乎相同，除了你的图表更像。我导出setValue()方法来更改切片大小，并在页面加载时调用它。有关添加customAttributes的信息，请参阅his blog post。
在我上面的最后一段中，我稍微偏离了标记。你的图表不是带标签的图表;我让他们混淆了。此外，保持切片居中更难，所以我毕竟不这样做。 animate()函数将每个段设置为圆上的新起点和终点，Raphael计算出中间点。如您所见，您可以在数组中传递多个参数。
this.customAttributes.slice = function(a0, a1) { /*...*/ }
// ...
chart.push(paper.path().attr({slice:[0, Math.PI/2 ]})
答案 1 :(得分：0)
无法看到所有小提琴，因为我在iPod上，但听起来你需要在一个你需要写的函数内进行动画调用 使用callback参数调用它所在的函数。 对递归调用的函数进行编码，以便在完成所有工作后最终完成。 对函数的每次调用都将在您指定的每个经过的时间间隔结束时发生......