阅读说明：本技术 界面元素曲线运动的处理方法、装置和计算机设备 (method and device for processing curvilinear motion of interface elements and computer equipment ) 是由 黄坤 于 2019-07-23 设计创作，主要内容包括：本申请涉及一种界面元素曲线运动的处理方法、装置、计算机设备和存储介质。基于终端操作体验优化,通过获取基于SVG技术绘制矢量曲线路径图,通过document对象获取矢量曲线路径图的SVG路径对象以及circle对象,调用预设的解析脚本,根据SVG路径对象以及circle对象,对矢量曲线路径图中路径轨迹的坐标点进行提取,获得矢量曲线路径图中路径轨迹的各坐标点；基于document对象对各坐标点进行坐标值分析,确定各坐标点的坐标值；根据各坐标点的坐标值使界面元素在矢量曲线路径图中进行曲线运动。通过document对象及调用预设的解析脚本确定进行界面元素曲线运动时所需的点坐标,提高了坐标点的提取效率。(The application relates to a processing method and device for curvilinear motion of interface elements, computer equipment and a storage medium. Based on terminal operation experience optimization, drawing a vector curve path diagram based on an SVG technology by obtaining an SVG technology, obtaining an SVG path object and a circle object of the vector curve path diagram through a document object, calling a preset analysis script, extracting coordinate points of a path track in the vector curve path diagram according to the SVG path object and the circle object, and obtaining each coordinate point of the path track in the vector curve path diagram; analyzing the coordinate values of the coordinate points based on the document object, and determining the coordinate values of the coordinate points; and according to the coordinate values of the coordinate points, the interface element performs curvilinear motion in the vector curvilinear path diagram. And determining the point coordinates required by the curvilinear motion of the interface elements by the document object and calling a preset analysis script, thereby improving the extraction efficiency of coordinate points.)

界面元素曲线运动的处理方法、装置和计算机设备

技术领域

本申请涉及计算机技术领域，特别是涉及一种界面元素曲线运动的处理方法、装置、计算机设备和存储介质。

背景技术

随着互联网技术的发展，应用程序功能越来越多，为了使用户能够经常访问应用程序，在应用程序中设置签到功能，用户使用账号登录到应用程序中，签到可领取相应的奖励等。

针对应用程序设计签到并领取每日礼包的功能，如：在游戏应用A中设计一个签到并领取每日礼包的功能，以一个月为签到周期，签到最大限额是签到31天。为了让用户的可视化及用户的体验度，在签到界面中显示用户的签到路径，以及显示在签到过程中的签到界面元素，如签到图标在界面中的变化情况，签到一天图标直线移动一次。而目前一般是采用图标直线移动的签到界面，如：签到一次，用于标识签到位置的图标直线挪动一个位置，而需要在预设直线轨道上设置31个签到点，签到点与签到点之间需要有一段间隔，间隔宽一点，需要滑动多次界面才把所有签到界面看完，间隔密集一点，界面看起来太密集。因此可以采用曲线轨道上设置31个签到点，使图标进行曲线运动到下一个签到点，增加签到界面的利用率，但实现曲线运动需要设置很多坐标点来做偏移，而目前的坐标点提取方式效率低。

发明内容

基于此，有必要针对上述技术问题，提供一种提高坐标点提取效率的界面元素曲线运动的处理方法、装置、计算机设备和存储介质。

一种界面元素曲线运动的处理方法，所述方法包括：

获取基于SVG技术绘制的矢量曲线路径图；

通过document对象获取所述矢量曲线路径图的SVG路径对象以及circle对象；

调用预设的解析脚本，根据所述SVG路径对象以及所述circle对象，对所述矢量曲线路径图中路径轨迹的坐标点进行提取，获得所述矢量曲线路径图中所述路径轨迹的各坐标点；

基于所述document对象对各所述坐标点进行坐标值分析，确定各所述坐标点的坐标值；

根据各所述坐标点的坐标值使所述界面元素在所述矢量曲线路径图中进行曲线运动。

在其中一个实施例中，所述获取基于SVG技术绘制的矢量曲线路径图的步骤，包括：

获取基于SVG技术的曲线路径图编辑指令；

根据所述曲线路径图编辑指令中的画布设置参数进行画布设置，得到画布；

根据预设的相互对齐方式将画板和所述画布对齐；

根据预设的d属性利用path标签在所述画布上绘制曲线路径，获得所述矢量曲线路径图。

在其中一个实施例中，所述调用所述预设的解析脚本，根据所述SVG路径对象以及所述circle对象，对所述矢量曲线路径图中路径轨迹的坐标点进行提取，获得所述矢量曲线路径图中路径轨迹的各坐标点的步骤，包括：

所述SVG路径对象的animateMotion，根据所述circle对象沿着所述矢量曲线路径图的路径轨迹进行运动，获得运动完成总时长；

根据预设分段时长对所述运动完成总时长进行时长分段，确定坐标点提取间隔；

调用所述预设的解析脚本，根据所述坐标点提取间隔，提取出所述矢量曲线路径图中所述路径轨迹的各坐标点。

在其中一个实施例中，所述根据各所述坐标点的坐标值使所述界面元素在所述矢量曲线路径图中进行曲线运动的步骤，包括：

在所述矢量曲线路径图中，根据界面元素所处的坐标点，确定曲线运动的出发坐标点；

根据所述出发坐标点及预设移动轨迹，确定所述曲线运动的终点坐标点；

根据各所述坐标点的坐标值对所述出发坐标点和所述终点坐标点之间的坐标点进行距离分析，获得相邻坐标点之间的距离；

根据所述相邻坐标点之间的距离及各所述坐标点对应的坐标值，将所述界面元素从所述出发坐标点移动至所述终点坐标点。

在其中一个实施例中，所述在所述矢量曲线路径图中，根据界面元素所处的坐标点，确定曲线运动的出发坐标点的步骤包括：

根据所述界面元素的特征对所述矢量曲线路径图进行分析，确定所述界面元素在所述矢量曲线路径图中所处的位置；

对所述矢量曲线路径图中所述界面元素所处的位置进行分析，确定所述界面元素所处坐标点；

将所述界面元素所处坐标点作为曲线运动的出发坐标点。

在其中一个实施例中，所述根据各所述坐标点的坐标值对所述出发坐标点和所述终点坐标点之间的坐标点进行距离分析，获得相邻坐标点之间的距离的步骤，包括：

通过所述预设的解析脚本获取所述出发坐标点和所述终点坐标点之间，在所述预设移动轨迹上的所有坐标点；

通过所述预设的解析脚本，对所述预设移动轨迹上的所有坐标点中的相邻坐标点以像素为单位进行分析，得到相邻坐标点之间的距离。

一种界面元素曲线运动的处理装置，所述装置包括：

路径图获取模块，用于获取基于SVG技术绘制的矢量曲线路径图；

对象获取模块，用于通过document对象获取所述矢量曲线路径图的SVG路径对象以及circle对象；

坐标点确定模块，用于调用预设的解析脚本，根据所述SVG路径对象以及所述circle对象，对所述矢量曲线路径图中路径轨迹的坐标点进行提取，获得所述矢量曲线路径图中所述路径轨迹的各坐标点；

坐标点值模块，用于基于所述document对象对各所述坐标点进行坐标值分析，确定各所述坐标点的坐标值；

曲线运动模块，用于根据各所述坐标点的坐标值使所述界面元素在所述矢量曲线路径图中进行曲线运动。

在其中一个实施例中，所述路径图获取模块包括：

指令获取单元，用于获取基于SVG技术的曲线路径图编辑指令；

画布设置单元，用于根据所述曲线路径图编辑指令中的画布设置参数进行画布设置，得到画布；

画布调整单元，用于根据预设的相互对齐方式将画板和所述画布对齐；

曲线路径图绘制单元，用于根据预设的d属性利用path标签在所述画布上绘制曲线路径，获得所述矢量曲线路径图。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现所述方法的步骤。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现所述的方法的步骤。

上述界面元素曲线运动的处理方法、装置、计算机设备和存储介质，通过获取基于SVG技术绘制矢量曲线路径图，通过document对象获取矢量曲线路径图的SVG路径对象以及circle对象，调用预设的解析脚本，根据SVG路径对象以及circle对象，对矢量曲线路径图中路径轨迹的坐标点进行提取，获得矢量曲线路径图中路径轨迹的各坐标点；基于document对象对各坐标点进行坐标值分析，确定各坐标点的坐标值；根据各坐标点的坐标值使界面元素在矢量曲线路径图中进行曲线运动。通过document对象及调用预设的解析脚本确定进行界面元素曲线运动时所需的点坐标，提高了坐标点的提取效率。

附图说明

图1为一个实施例中界面元素曲线运动的处理方法的应用场景图；

图2为一个实施例中界面元素曲线运动的处理方法的流程示意图；

图3为一个实施例中界面元素曲线运动的处理装置的结构框图；

图4为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请提供的界面元素曲线运动的处理方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104通过网络进行通信。服务器104通过终端102获取基于SVG技术绘制的矢量曲线路径图；通过document对象获取矢量曲线路径图的SVG路径对象以及circle对象；调用预设的解析脚本，根据SVG路径对象以及circle对象，对矢量曲线路径图中路径轨迹的坐标点进行提取，获得矢量曲线路径图中路径轨迹的各坐标点；基于document对象对各坐标点进行坐标值分析，确定各坐标点的坐标值；根据各坐标点的坐标值使界面元素在矢量曲线路径图中进行曲线运动。其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备，服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一个实施例中，如图2所示，提供了一种界面元素曲线运动的处理方法，以该方法应用于图1中的服务器为例进行说明，包括步骤S220只步骤S320：

步骤S220，获取基于SVG技术绘制的矢量曲线路径图。

其中，SVG技术指的是绘制SVG的技术，可以用Inkscape(开源矢量图形编辑软件)或Sketch(素描绘画类的软件)等工具绘制SVG。SVG指可伸缩矢量图形(Scalable VectorGraphics)，是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。矢量曲线路径图是根据界面元素在界面上进行曲线运动的运动轨迹形成的曲线路径，绘制出的可伸缩矢量图形，该矢量曲线路径图中绘制了该曲线路径，该运动轨迹可以根据界面需求进行设计，比如：像盘旋公路一样弯弯绕绕，形成的曲线。

步骤S240，通过document对象获取所述矢量曲线路径图的SVG路径对象以及circle对象。

其中，在浏览器中，document对象是一个比较重要的对象，使用document对象可以对HTML文档进行检查、修改或添加内容，并处理该文档内部的事件。在Web页面上，document对象可通过window对象的document属性引用，或者直接引用。SVG路径对象是指SVG路径类在内存中装载的SVG路径实例。circle对象是指circle类在内存中装载的circle实例，circle对象附着在SVG路径对象上。

步骤S260，调用预设的解析脚本，根据SVG路径对象以及circle对象，对矢量曲线路径图中路径轨迹的坐标点进行提取，获得矢量曲线路径图中路径轨迹的各坐标点；

其中，预设的解析脚本可以是JavaScript脚本，将预设的解析脚本通过嵌入在HTML中，对矢量曲线路径图进行解析的功能，实现获取各坐标点的坐标值。路径轨迹的各坐标点指的是矢量曲线路径图中路径轨迹上的所有点。矢量曲线路径图是直接嵌套在HTML的内容中的，调用预设的解析脚本即可对矢量曲线路径图中路径轨迹的各坐标点进行提取。路径轨迹指的是矢量曲线路径图中曲线路径的运动轨迹。运动轨迹是基于各个点实现的，各个点即为各坐标点。

步骤S280，基于document对象对各坐标点进行坐标值分析，确定各坐标点的坐标值。

其中，坐标点在矢量曲线路径图中所在位置的坐标值，为该坐标点的坐标值。通过document对象进分析确定各坐标点的坐标值。在document对象中，有矢量曲线路径图的每个像素点的坐标值，将矢量曲线路径图中各坐标点对应到矢量曲线路径图中的像素点，可获得各坐标点的坐标值。

步骤S300，根据各坐标点的坐标值使界面元素在矢量曲线路径图中进行曲线运动。

其中，界面元素指的是可满***互需求的软件或系统界面所包含的满足用户交互要求的一系列元素，该界面元素可以是可移动的图标，该图标可以是一个或多个，该界面元素嵌在矢量曲线路径图中，该界面元素可以在矢量曲线路径图中根据路径轨迹进行曲线运动，界面元素在当前待移动时，所处的位置对应的坐标点为曲线运动的出发坐标点。

在矢量曲线路径图中，根据界面元素所处的坐标点，确定出发坐标点和终点坐标点，根据出发坐标点和终点坐标点使界面元素进行曲线运动。通过CSS3技术的位移translate()函数，通过CSS3技术的transform的位移translate()函数进行坐标点的位移操作，根据界面元素的出发坐标点的坐标，并根据预设的属性值在一定的时间区间内平滑的过渡，完成曲线路径运动。从而使界面元素从出发坐标点移动至终点坐标点。CSS3技术指的是CSS(层叠样式表)技术的升级版本，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。位移translate(x，y)函数基本含义是将一个元素的显示位置平移x和y。transform是指CSS3技术的变形属性，包括以下几种：旋转(rotate)、扭曲(skew)、缩放(scale)和移动(translate)以及矩阵变形(matrix)等等。

上述界面元素曲线运动的处理方法中，通过获取基于SVG技术绘制矢量曲线路径图，通过document对象获取矢量曲线路径图的SVG路径对象以及circle对象，调用预设的解析脚本，根据SVG路径对象以及circle对象，对矢量曲线路径图中路径轨迹的坐标点进行提取，获得矢量曲线路径图中路径轨迹的各坐标点；基于document对象对各坐标点进行坐标值分析，确定各坐标点的坐标值；根据各坐标点的坐标值使界面元素在矢量曲线路径图中进行曲线运动。通过document对象及调用预设的解析脚本确定进行界面元素曲线运动时所需的点坐标，提高了坐标点的提取效率。

在一个实施例中，获取基于SVG技术绘制的矢量曲线路径图的步骤，包括：获取基于SVG技术的曲线路径图编辑指令；根据曲线路径图编辑指令中的画布设置参数进行画布设置，得到画布；根据预设的相互对齐方式将画板和画布对齐；根据预设的d属性利用path标签在画布上绘制曲线路径，获得矢量曲线路径图。

其中，曲线路径图编辑指令可以用户通过终端发送的，用户可以基于终端上安装的Inkscape或Sketch等工具触发曲线路径图编辑指令，接收曲线路径图编辑指令后，进入Inkscape或Sketch等工具的绘图界面，在Inkscape或Sketch等工具的绘图界面中进行画布设置，调整对应的画布参数，如：画布大小是200px200px，画布大小是100px100px，那么你在里面画一条长度为10(不可以带单位)的线条，实际长度就是20px。预设的相互对齐方式可根据用户习惯或矢量曲线路径图的需要进行将画板和画布对齐。预设的相互对齐方式可以是将画布移动至画板的右边框，使画布的右边框与画板的右边框重合，也可以是将画布移动在画板中心位置。预设的d属性可以根据需要的曲线的形状长度等进行设置。path标签用来定义路径，相当于用指令控制的一支笔。通过SVG技术构建矢量曲线路径图，提高了工作效率，提高了曲线图的质量，通过矢量曲线路径图简化了曲线路径运动的处理。

在一个实施例中，调用预设的解析脚本，根据SVG路径对象以及circle对象，对矢量曲线路径图中路径轨迹的坐标点进行提取，获得矢量曲线路径图中路径轨迹的各坐标点的步骤，包括：SVG路径对象的animateMotion，根据circle对象沿着矢量曲线路径图的路径轨迹进行运动，获得运动完成总时长；根据预设分段时长对运动完成总时长进行时长分段，确定坐标点提取间隔；调用预设的解析脚本根据坐标点提取间隔，提取出矢量曲线路径图中路径轨迹的各坐标点。

其中，animateMotion是指animate+transform的组合，是对svg元素transform变换的动画操作的元素。运动完成总时长指的是circle对象在路径轨迹上从路径轨迹的起点匀速移动至路径轨迹的终点的时长，路径轨迹的一端为起点，则路径轨迹的另一端为终点。预设分段时长可以根据实际需要设置的，预设分段时长可以是1ms、2ms等等。坐标点提取间隔指的是隔多长时间提取一次坐标点。如：假设预设分段时长为1ms，假设运动完成总时长为1分钟，则1ms-1000ms都需要进行坐标点提取，坐标点提取间隔则为1ms，circle对象每移动1ms就需要提取一次坐标点，通过预设的解析脚本在circle对象每移动1ms进行一次坐标点，提取出矢量曲线路径图中路径轨迹的所有坐标点。从SVG曲线中提取坐标点比传统的手动打点要省时省力。

在一个实施例中，在矢量曲线路径图中，根据界面元素所处的坐标点，确定曲线运动的出发坐标点；根据出发坐标点及预设移动轨迹，确定曲线运动的终点坐标点；根据各坐标点的坐标值对出发坐标点和终点坐标点之间的坐标点进行距离分析，获得相邻坐标点之间的距离；根据相邻坐标点之间的距离及各坐标点对应的坐标值，将界面元素从出发坐标点移动至终点坐标点。

其中，预设移动轨迹是根据界面需求预设的，该移动轨迹可以根据曲线路径的长度或者是移动时长进行确定的，预设移动轨迹指的是预先设置的移动轨迹，该预设移动轨迹中，可以是多个不同的移动轨迹，也可以每次移动的移动轨迹相同。在出发坐标点和终点坐标点之间轨道上存在多个坐标点，各个坐标点依次连接起来，形成运动轨道，每个坐标点到相邻的坐标点之间的直线距离相同。

例如：界面用于显示签到的过程和记录签到次数时，假设1天签到一次，一个月为一个签到周期，一个月30天，则，界面中需要显示30天的签到标识，依次将从第1天至第30天的签到标识对应分布在矢量曲线路径图的曲线路径中去，由这30个标识在矢量曲线路径图中对应的点组成签到路径，界面元素则在签到路径上运动，假设界面元素处于第1天签到点(签到点指的是签到标识在矢量曲线路径图中对应的点)的位置，下一次界面元素的移动轨迹是从第1天签到点移动至第2天签到点，则第1天签到点为出发坐标点，第2天签到点为终点坐标点。在第1天签到点与第2天签到点之间存在3个用于使界面元素移动的点(坐标点)，设第1天签到点为a点，第2天签到点为e点，以a点为起始点，e点为终点，a点与e点之间还有b点、c点、d点，在运动轨道上的位置依次为：a→b→c→d→e，相邻坐标点有：a和b、b和c、c和d、d和e，对出发坐标点和终点坐标点之间的坐标点进行距离分析，获得相邻坐标点之间的距离有：a和b的距离，b和c的距离，c和d的距离，d和e的距离。

其中，通过CSS3技术将相邻坐标点之间的距离及各坐标点对应的坐标值赋值给CSS3技术的位移translate()函数，通过CSS3技术的transform的位移translate()函数进行坐标点的位移操作，根据界面元素的出发坐标点的坐标，根据给定的left(x坐标)和top(y坐标)位置参数(各坐标点的坐标值和相邻坐标点之间的距离)进行移动(如：以8px(这个可以手动调节)步长进行偏移运动)，并根据预设的属性值在一定的时间区间内平滑的过渡，完成曲线路径运动。从而使界面元素从出发坐标点移动至终点坐标点。

在一个实施例中，在矢量曲线路径图中，根据界面元素所处的坐标点，确定曲线运动的出发坐标点的步骤包括：根据界面元素的特征对矢量曲线路径图进行分析，确定界面元素在矢量曲线路径图中所处的位置；对矢量曲线路径图中界面元素所处的位置进行分析，确定界面元素所处坐标点；将界面元素所处坐标点作为曲线运动的出发坐标点。

其中，界面元素可以是一个图标，界面元素的特征可以是形状、颜色等。在对矢量曲线路径图中识别出界面元素，根据界面元素在矢量曲线路径图中所处的位置，对应到坐标上，将界面元素对应的点为界面元素所处坐标点，即为曲线运动的出发坐标点。基于根据界面元素所处的坐标点，确定曲线运动的出发坐标点，提高了工作效率。

在一个实施例中，根据各坐标点的坐标值对出发坐标点和终点坐标点之间的坐标点进行距离分析，获得相邻坐标点之间的距离的步骤，包括：通过预设的解析脚本获取出发坐标点和终点坐标点之间，在预设移动轨迹上的所有坐标点；通过预设的解析脚本，对预设移动轨迹上的所有坐标点中的相邻坐标点以像素为单位进行分析，得到相邻坐标点之间的距离。

其中，像素是指在由一个数字序列表示的图像中的一个最小单位。在对曲线路径运动的处理时不需要花时间去计算确定相邻坐标点之间的距离，提高了工作效率。

应该理解的是，虽然图2的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图2中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

在一个实施例中，如图3所示，提供了一种界面元素曲线运动的处理装置，包括：路径图获取模块310、对象获取模块320、坐标点确定模块330、坐标点值模块340和曲线运动模块350，其中：

路径图获取模块310，用于获取基于SVG技术绘制的矢量曲线路径图；对象获取模块320，用于通过document对象获取所述矢量曲线路径图的SVG路径对象以及circle对象；坐标点确定模块330，用于调用预设的解析脚本，根据所述SVG路径对象以及所述circle对象，对所述矢量曲线路径图中路径轨迹的坐标点进行提取，获得所述矢量曲线路径图中所述路径轨迹的各坐标点；坐标点值模块340，用于基于所述document对象对各所述坐标点进行坐标值分析，确定各所述坐标点的坐标值；曲线运动模块350，用于根据各坐标点的坐标值使界面元素在矢量曲线路径图中进行曲线运动。

在一个实施例中，所述路径图获取模块310包括：指令获取单元，用于获取基于SVG技术的曲线路径图编辑指令；画布设置单元，用于根据所述曲线路径图编辑指令中的画布设置参数进行画布设置，得到画布；画布调整单元，用于根据预设的相互对齐方式将画板和所述画布对齐；曲线路径图绘制单元，用于根据预设的d属性利用path标签在所述画布上绘制曲线路径，获得所述矢量曲线路径图。

在一个实施例中，坐标点确定模块330用于：SVG路径对象的animateMotion，根据circle对象沿着矢量曲线路径图的路径轨迹进行运动，获得运动完成总时长；根据预设分段时长对运动完成总时长进行时长分段，确定坐标点提取间隔；调用预设的解析脚本根据坐标点提取间隔，提取出矢量曲线路径图中路径轨迹的各坐标点。

在一个实施例中，曲线运动模块350包括：出发坐标点确定单元，用于在矢量曲线路径图中，根据界面元素所处的坐标点，确定曲线运动的出发坐标点；终点坐标点确定单元，用于根据出发坐标点及预设移动轨迹，确定曲线运动的终点坐标点；距离分析单元，用于根据各坐标点的坐标值对出发坐标点和终点坐标点之间的坐标点进行距离分析，获得相邻坐标点之间的距离；曲线运动单元，用于根据相邻坐标点之间的距离及各坐标点对应的坐标值，将界面元素从出发坐标点移动至终点坐标点。

在一个实施例中，出发坐标点确定单元用于：根据界面元素的特征对矢量曲线路径图进行分析，确定界面元素在矢量曲线路径图中所处的位置；对矢量曲线路径图中界面元素所处的位置进行分析，确定界面元素所处坐标点；将界面元素所处坐标点作为曲线运动的出发坐标点。

在一个实施例中，距离分析单元用于：通过预设的解析脚本获取出发坐标点和终点坐标点之间，在预设移动轨迹上的所有坐标点；通过预设的解析脚本，对预设移动轨迹上的所有坐标点中的相邻坐标点以像素为单位进行分析，得到相邻坐标点之间的距离。

关于界面元素曲线运动的处理装置的具体限定可以参见上文中对于界面元素曲线运动的处理方法的限定，在此不再赘述。上述界面元素曲线运动的处理装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图4所示。该计算机设备包括通过系统总线连接的处理器、存储器和网络接口。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种界面元素曲线运动的处理方法。

本领域技术人员可以理解，图4中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，该存储器存储有计算机程序，该处理器执行计算机程序时实现以下步骤：

获取基于SVG技术绘制的矢量曲线路径图；通过document对象获取矢量曲线路径图的SVG路径对象以及circle对象；调用预设的解析脚本，根据SVG路径对象以及circle对象，对矢量曲线路径图中路径轨迹的坐标点进行提取，获得矢量曲线路径图中路径轨迹的各坐标点；基于document对象对各坐标点进行坐标值分析，确定各坐标点的坐标值；根据各坐标点的坐标值使界面元素在矢量曲线路径图中进行曲线运动。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：获取基于SVG技术的曲线路径图编辑指令；根据曲线路径图编辑指令中的画布设置参数进行画布设置，得到画布；根据预设的相互对齐方式将画板和画布对齐；根据预设的d属性利用path标签在画布上绘制曲线路径，获得矢量曲线路径图。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：SVG路径对象的animateMotion，根据circle对象沿着矢量曲线路径图的路径轨迹进行运动，获得运动完成总时长；根据预设分段时长对运动完成总时长进行时长分段，确定坐标点提取间隔；调用预设的解析脚本，根据坐标点提取间隔，提取出矢量曲线路径图中路径轨迹的各坐标点。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：在矢量曲线路径图中，根据界面元素所处的坐标点，确定曲线运动的出发坐标点；根据出发坐标点及预设移动轨迹，确定曲线运动的终点坐标点；根据各坐标点的坐标值对出发坐标点和终点坐标点之间的坐标点进行距离分析，获得相邻坐标点之间的距离；根据所述相邻坐标点之间的距离及各所述坐标点对应的坐标值，将所述界面元素从所述出发坐标点移动至所述终点坐标点。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：根据界面元素的特征对矢量曲线路径图进行分析，确定界面元素在矢量曲线路径图中所处的位置；对矢量曲线路径图中界面元素所处的位置进行分析，确定界面元素所处坐标点；将界面元素所处坐标点作为曲线运动的出发坐标点。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：通过预设的解析脚本获取出发坐标点和终点坐标点之间，在预设移动轨迹上的所有坐标点；通过预设的解析脚本，对预设移动轨迹上的所有坐标点中的相邻坐标点以像素为单位进行分析，得到相邻坐标点之间的距离。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

获取基于SVG技术绘制的矢量曲线路径图；通过document对象获取矢量曲线路径图的SVG路径对象以及circle对象；调用预设的解析脚本，根据SVG路径对象以及circle对象，对矢量曲线路径图中路径轨迹的坐标点进行提取，获得矢量曲线路径图中路径轨迹的各坐标点；基于document对象对各坐标点进行坐标值分析，确定各坐标点的坐标值；根据各坐标点的坐标值使界面元素在矢量曲线路径图中进行曲线运动。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：获取基于SVG技术的曲线路径图编辑指令；根据曲线路径图编辑指令中的画布设置参数进行画布设置，得到画布；根据预设的相互对齐方式将画板和画布对齐；根据预设的d属性利用path标签在画布上绘制曲线路径，获得矢量曲线路径图。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：SVG路径对象的animateMotion，根据circle对象沿着矢量曲线路径图的路径轨迹进行运动，获得运动完成总时长；根据预设分段时长对运动完成总时长进行时长分段，确定坐标点提取间隔；调用预设的解析脚本，根据坐标点提取间隔，提取出矢量曲线路径图中路径轨迹的各坐标点。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：在矢量曲线路径图中，根据界面元素所处的坐标点，确定曲线运动的出发坐标点；根据出发坐标点及预设移动轨迹，确定曲线运动的终点坐标点；根据各坐标点的坐标值对出发坐标点和终点坐标点之间的坐标点进行距离分析，获得相邻坐标点之间的距离；根据所述相邻坐标点之间的距离及各所述坐标点对应的坐标值，将所述界面元素从所述出发坐标点移动至所述终点坐标点。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：根据界面元素的特征对矢量曲线路径图进行分析，确定界面元素在矢量曲线路径图中所处的位置；对矢量曲线路径图中界面元素所处的位置进行分析，确定界面元素所处坐标点；将界面元素所处坐标点作为曲线运动的出发坐标点。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：通过预设的解析脚本获取出发坐标点和终点坐标点之间，在预设移动轨迹上的所有坐标点；通过预设的解析脚本，对预设移动轨迹上的所有坐标点中的相邻坐标点以像素为单位进行分析，得到相邻坐标点之间的距离。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。