我创建了一个最初来自 this jsfiddle 的“ donut ”图表, 使用拉斐尔。
我已调整此脚本以满足我的需要,目前有 this 正在呈现。
我的目标是(同时)为每个切片制作动画;例如让蓝色切片增长到60%;红色切片缩小到 40%。
我已经能够通过删除现有切片并快速重新渲染具有调整值(例如 51、49)的新切片来重新绘制切片。但这里的问题是它是即时的。
我的问题是,
(a) 我可以在不需要重新绘制对象的情况下为其设置动画吗(以及如何)? (b) 如果不是,我如何使用重绘逻辑为该效果设置动画?
最佳答案
是的。在您获得饼图的 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 ]})
关于javascript - 棘手的拉斐尔 svg 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9586772/