棘手的拉斐尔svg动画

我最初使用raphael创建了一个从this jsfiddle开始的“甜甜圈”图表.

我已经对该脚本进行了调整以满足自己的需要,目前正在渲染this.

我的目标是(同时)为每个切片设置动画；例如,使蓝色切片增长到60％；红色部分缩小到40％.

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

我的问题是

(a)是否可以对此进行动画处理而无需重新绘制对象(以及如何绘制)？
(b)如果没有,我如何使用重绘逻辑为这种效果设置动画？

解决方法:

是.在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 ]})

标签：svg,raphael,javascript
来源： https://codeday.me/bug/20191201/2082328.html