整蛊拉斐尔SVG动画

我从this jsfiddle创造了一个“甜甜圈”图表最初，利用拉斐尔。整蛊拉斐尔SVG动画

我已经调整了这个脚本，以满足我的需求，目前拥有this正在呈现。

我的目标是动画每个切片（在同一时间）;比如让蓝片增长到60％;红片缩小到40％。

我已经能够通过去除现有重绘切片和快速重新呈现与调节值的新的一个（例如51，49）。但问题在于它是即时的。

我的问题是，

（一）我可以动画此而不需要重新绘制对象（以及如何）？（b）如果不是，我怎样才能使用重绘逻辑来为这个效果设置动画？

2012-03-06 sgb

是。在拉斐尔演示页面上可以找到饼图的例子。请参阅Growing Pie演示。

你应该分开在其中生成的路径到一个独立的函数代码，以便以后可以用它来返回新路径。为了使用animate（），你需要定义一个函数customAttributesobject;它应该至少返回path属性设置为切片新路径的对象。

既然你的标签，你可能会想修改代码，使得扇形扩大/缩小相对于其中心，使您不必移动标签，也因为标签居中在他们的切片的“轴”上。

更新

这里有一个JSFiddle一个简单的例子，几乎一样德米特里的成长馅饼演示，除了更喜欢您的图表。我导出setValue()方法来更改切片大小并在页面加载时调用它。有关添加customAttributes，请参阅his blog post。

在我上面的最后一段中，我有点偏离标准。你的图表不是有标签的;我让他们混在一起。另外，保持切片的中心位置会很困难，所以我没有这么做。 animate()函数将每个段设置为圆上新的起点和终点，Raphael计算出中间点。正如你所看到的，你可以在数组中传递多个参数。

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

2012-03-09 15:51:37 Steve

感谢您指出的演示;我真的应该注意到它。你的解释帮助我了解更多，但是你能告诉我一个关于jsfiddle的链接（http://jsfiddle.net/xwtgV/）的基本演示吗？ – sgb 2012-03-09 17:06:43

我更新了我的答案，添加了一些额外的细节和JSFiddle示例。它定义了一个具有多个参数的'customAttributes'函数，因此它可以与'Element.animate（）'一起使用。 – Steve 2012-03-12 21:26:42

有趣。谢谢！ – sgb 2012-03-12 23:35:22

不能看到所有的小提琴，因为我在iPod上我但它听起来像你需要有一个函数里面有生命的呼唤，你将需要写使用调用它坐镇内线的函数的回调参数。对递归调用函数进行编码，以便在所有工作完成时最终完成。的函数每次调用将发生在你指定的每elapssed时间间隔结束...

2012-03-06 22:51:36 Chasbeen

回答