[发明专利]一种通过SVG动画封装为图表提供动效的方法及装置

权利要求书

1.一种通过SVG动画封装为图表提供动效的方法，其特征在于，具体包括以下步骤：

在Vue项目中创建一个标准组件，并基于创建的标准组件进行动画节点封装；

将图表渲染DOM指定为动画节点，并对图表渲染完成事件进行监听；

在图表渲染完成事件中操作图表中需要附加动画的元素，并在所述元素中插入动画节点抛出的maskid。

2.如权利要求1所述的一种通过SVG动画封装为图表提供动效的方法，其特征在于，所述进行动画节点封装，具体步骤包括：

在动画节点中预编写SVG的mask动画，并将mask动画中的所有坐标定义为动画节点中的内部变量；

计算得到mask动画的相对运动坐标，动画节点使用v-model暴露出mask id。

3.如权利要求2所述的一种通过SVG动画封装为图表提供动效的方法，其特征在于，所述计算得到mask动画的相对运动坐标，具体为：

采用javascript，并基于动画节点的容器大小，计算得到mask动画的相对运动坐标。

4.如权利要求3所述的一种通过SVG动画封装为图表提供动效的方法，其特征在于：所述动画节点的mask数量和运动时间采用props接收dur数组控制。

5.如权利要求2所述的一种通过SVG动画封装为图表提供动效的方法，其特征在于，当动画节点使用v-model暴露出mask id之后，还包括：

创建一slot用于容纳图表，并等待图表渲染完成。

6.一种通过SVG动画封装为图表提供动效的装置，其特征在于，包括：

创建模块，其用于在Vue项目中创建一个标准组件，并基于创建的标准组件进行动画节点封装；

监听模块，其用于将图表渲染DOM指定为动画节点，并对图表渲染完成事件进行监听；

执行模块，其用于在图表渲染完成事件中操作图表中需要附加动画的元素，并在所述元素中插入动画节点抛出的mask id。

7.如权利要求6所述的一种通过SVG动画封装为图表提供动效的装置，其特征在于，所述创建模块进行动画节点封装，具体过程包括：

在动画节点中预编写SVG的mask动画，并将mask动画中的所有坐标定义为动画节点中的内部变量；

计算得到mask动画的相对运动坐标，动画节点使用v-model暴露出mask id。

8.如权利要求7所述的一种通过SVG动画封装为图表提供动效的装置，其特征在于，所述计算得到mask动画的相对运动坐标，具体为：

采用javascript，并基于动画节点的容器大小，计算得到mask动画的相对运动坐标。

9.如权利要求8所述的一种通过SVG动画封装为图表提供动效的装置，其特征在于：所述动画节点的mask数量和运动时间采用props接收dur数组控制。

10.如权利要求7所述的一种通过SVG动画封装为图表提供动效的装置，其特征在于，当动画节点使用v-model暴露出mask id之后，还包括：创建一slot用于容纳图表，并等待图表渲染完成。