[发明专利]一种线条动画绘制方法及其设备、存储介质、电子设备

说明书

本发明实施例公开一种线条动画绘制方法及其设备、存储介质、电子设备，其中方法包括如下步骤：获取在当前浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；基于设定的时间间隔将所述绘制时长分割为多个时刻；在所述起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。采用本发明，可以直接基于所输入的绘制参数在网页中所创建的画布上绘制线条动画，可以方便灵活的生成可控的线条动画。

技术领域

本发明涉及计算机技术领域，尤其涉及一种线条动画绘制方法及其设备、存储介质、电子设备。

背景技术

随着计算机和网络技术的发展，网页内容不断丰富化，展示效果也不断增强，在网页浏览过程中，经常会包含动画效果，如对于安全态势感知(Security SituationAwareness，SSA)的网络攻击飞线动画。

传统的网页动画生成的方法有的使用DOM节点加层叠样式表(Cascading StyleSheets，CSS)动画，由于涉及到大量DOM节点以及DOM节点操作，会造成页面重绘重排现象，且CSS动画过程不可控；有的使用gif图片，gif图片占用空间大，加载时间长，且无法控制动画状态。因此，现有技术中的线条动画存在绘制不可控的技术问题。

发明内容

本发明实施例提供了一种线条动画绘制方法及其设备、存储介质、电子设备，可以直接基于所输入的绘制参数在网页中所创建的画布上绘制线条动画，可以方便灵活的生成可控的线条动画。

本发明实施例一方面提供一种线条动画绘制方法，可包括：

获取在当前浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

基于设定的时间间隔将所述绘制时长分割为多个时刻；

在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，所述绘制参数还包括线条曲率参数，所述获取在当前浏览页面的画布中所输入的绘制参数之后，还包括：

基于所述线条起点坐标、所述线条终点坐标以及所述线条曲率参数计算线条控制点坐标；

所述基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画，包括：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述线条控制点坐标逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，所述基于设定的时间间隔将所述绘制时长分割为多个时刻之后，还包括：

计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可选的，所述基于设定的时间间隔将所述绘制时长分割为多个时刻之后，还包括：

计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可选的，所述采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值，包括：

采用设定的分割点将所述移动起点坐标和所述移动终点坐标之间的线条分割为多个线条区间；

将所述线条绘制颜色所指示的多个颜色区间分别赋值给所述多个线条区间。