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

说明书

本发明公开了一种通过SVG动画封装为图表提供动效的方法及装置，涉及计算机应用领域，该方法包括在Vue项目中创建一个标准组件，并基于创建的标准组件进行动画节点封装；将图表渲染DOM指定为动画节点，并对图表渲染完成事件进行监听；在图表渲染完成事件中操作图表中需要附加动画的元素，并在所述元素中插入动画节点抛出的mask id。本发明有效避免了复杂动画代码逻辑，极大的降低了对访问者机器性能的消耗，提高了动效的复用和易用性。

技术领域

本发明涉及计算机应用领域，具体涉及一种通过SVG(Scalable VectorGraphics，一种图像文件格式)动画封装为图表提供动效的方法及装置。

背景技术

在大数据时代，HTML(Hyper Text Markup Language，超文本标记语言)展示形式越来越丰富，特别是在数据可视化展示领域，图表应用的越来约广泛。同时，为了数据可视化展示页面具有动感、炫丽、耐看等效果，前端开发工程师需要花费大量的时间来设想、实现、图表的动效。

目前市面上的图表库，都只是采用了数据载入效果，来达到一个入场动效，但该动效都是一次性的，当数据为非实时数据时，此时图表便没有任何动效，从而无法吸引用户的目光。如果需要对图表开发动效，一般都是从数据载入或通过多个图表配合时间差，加上延迟完成，这种做法不仅需要复杂冗长的逻辑代码，过多的图表绘制图层时，会给浏览器带来更多的性能消耗，动画采用数据载入不断的触发入场效果，使得访问者的机器性能过多的消耗，造成卡顿，延迟等现象，导致用户的体验效果极差。

发明内容

针对现有技术中存在的缺陷，本发明的目的在于提供一种通过SVG动画封装为图表提供动效的方法及装置，有效避免了复杂动画代码逻辑，极大的降低了对访问者机器性能的消耗，提高了动效的复用和易用性。

为达到以上目的，本发明提供的一种通过SVG动画封装为图表提供动效的方法，具体包括以下步骤：

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

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

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

在上述技术方案的基础上，所述进行动画节点封装，具体步骤包括：

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

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

在上述技术方案的基础上，所述计算得到mask动画的相对运动坐标，具体为：

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

在上述技术方案的基础上，所述动画节点的mask数量和运动时间采用props接收dur数组控制。

在上述技术方案的基础上，当动画节点使用v-model暴露出mask id之后，还包括：

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

本发明提供的一种通过SVG动画封装为图表提供动效的装置，包括：

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

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

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