javascript - 棘手的拉斐尔 svg 动画

Question

我创建了一个最初来自 this jsfiddle 的“ donut ”图表, 使用拉斐尔。

我已调整此脚本以满足我的需要，目前有 this 正在呈现。

我的目标是(同时)为每个切片制作动画；例如让蓝色切片增长到60%；红色切片缩小到 40%。

我已经能够通过删除现有切片并快速重新渲染具有调整值(例如 51、49)的新切片来重新绘制切片。但这里的问题是它是即时的。

我的问题是，

(a) 我可以在不需要重新绘制对象的情况下为其设置动画吗(以及如何)？(b) 如果不是，我如何使用重绘逻辑为该效果设置动画？

Answer 1

是的。在您获得饼图的 Raphael 演示页面上有一个执行此操作的示例。查看Growing Pie演示。

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

由于您有标签，您可能需要修改代码，使饼图切片相对于它们的中心展开/缩小，这样您就不必也移动标签，因为标签位于他们切片的“轴”。

更新

这是一个 JSFiddle举一个简单的例子，与 Dmitri 的 Growing Pie 演示几乎相同，除了更像你的图表。我导出一个 setValue() 方法来更改切片大小并在页面加载时调用它。参见 his blog post关于添加 customAttributes。

在我上面的最后一段中，我有点跑题了。您的图表不是带有标签的图表；我把它们弄混了。此外，保持切片居中会更困难，所以我最终没有这样做。 animate() 函数将每个线段设置为其在圆上的新起点和终点，Raphael 找出中间点。如您所见，您可以在一个数组中传递多个参数。

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