CN110502305B

CN110502305B - 一种动态界面的实现方法、装置及相关设备

Info

Publication number: CN110502305B
Application number: CN201910789427.7A
Authority: CN
Inventors: 刘洋; 李坤; 郑健
Original assignee: Shenyang Meihang Technology Co ltd
Current assignee: Shenyang Meihang Technology Co ltd
Priority date: 2019-08-26
Filing date: 2019-08-26
Publication date: 2022-12-02
Anticipated expiration: 2039-08-26
Also published as: CN110502305A

Abstract

本发明提供一种动态界面的实现方法、装置及相关设备，根据界面的动态显示图片建立所述界面中的动态变化区域的三维模型；获取构建所述动态变化区域的三维模型的各构建点的位置，在每个所述构建点的位置处建立粒子，并对所述粒子进行渲染；在所述界面中的非动态变化区域中确定第一参考点；基于所述第一参考点与每个所述粒子的位置关系，确定所述粒子在所述界面上的显示尺寸；动态调整所述动态变化区域的三维模型，实现界面的动态变化，通过粒子的动态变化，呈现出界面的动态变化效果，能够有效降低运算量，提高图像的处理效率，满足智能终端的需求。

Description

一种动态界面的实现方法、装置及相关设备

技术领域

本发明涉及界面显示技术领域，特别涉及一种动态界面的实现方法、装置及相关设备。

背景技术

目前，实现界面的动态变化，其中一种方法是美工设计n张原始图像，然后采用n张粒子排列具有不同效果但有位置关联的帧图像依次显示，达到图像中的粒子有规则运动的效果，实现动态的动画效果，如果要实现连续流畅的动态效果，则需要至少数二十四张帧图像才能达成，这样不仅耗费美工的工作成本，而且数十张祯图像也占用了系统的一定内存。

另一种方法则是在通过在屏幕上有特定规则的移动大量2D图像来实现动画效果，但是这种方式需要在预先在屏幕上绘制大量的纹理四边形(或者三角形带)形成所述的2D图像，且为了确保动态效果，需要所有的2D图像在移动时都面对着照相机，这就要求对每个多边形执行开销巨大的旋转，大大增加了GPU的负荷。

由于上述两种方法中涉及的运算量都比较大，而基于帧动画或者2D纹理贴图旋转实现粒子动画效果，都是需要在很短的时间内，动态的加载每一帧图像或者旋转每个2D纹理图像，这样就导致最终呈现出来的动效性能较差，不够流畅。

因此迫切需要一种动态界面的实现方法、装置及相关设备，来满足人们的需求。

发明内容

鉴于上述问题，本发明提出了一种克服上述问题或者至少部分地解决上述问题的动态界面的实现方法、装置及相关设备。

具体地，本发明是通过如下技术方案实现的：

第一方面，本发明实施例提供一种动态界面的实现方法，包括：

根据界面的动态显示图片建立所述界面中的动态变化区域的三维模型；

获取构建所述动态变化区域的三维模型的各构建点的位置，在每个所述构建点的位置处建立粒子，并对所述粒子进行渲染；

在所述界面中的非动态变化区域中确定第一参考点；

基于所述第一参考点与每个所述粒子的位置关系，确定所述粒子在所述界面上的显示尺寸；

动态调整所述动态变化区域的三维模型，实现界面的动态变化。

在一个实施例中，所述方法还包括：

在所述界面中的动态变化区域中确定第二参考点；

基于所述第二参考点与每个所述粒子的位置关系，确定所述粒子在所述界面上的显示透明度；

动态调整所述动态变化区域的三维模型，实现界面的边缘虚化。

在一个实施例中，所述获取构建所述动态变化区域的三维模型的各构建点的位置，具体方法为：

根据选取的三维模型及其匹配的建模算法，确定构建所述动态变化区域的三维模型的各构建点的坐标，获取到所述构建点的位置。

在一个实施例中，所述对所述粒子进行渲染，具体方法为：

通过片段着色器，对建立的所述粒子的形状、颜色及透明度进行渲染。

在一个实施例中，所述非动态变化区域为所述界面中的未分布所述粒子的区域；

所述在所述界面中的非动态变化区域中确定第一参考点，具体为：

在所述界面中的未分布所述粒子的区域中确定任意一个位置点作为第一参考点。

在一个实施例中，所述动态变化区域为所述界面中的分布所述粒子的区域；

所述在所述界面中的动态变化区域中确定第二参考点，具体为：

在所述界面中的分布所述粒子的区域中确定任意一个构建点作为第二参考点。

在一个实施例中，所述动态调整所述动态变化区域的三维模型，实现界面的动态变化，具体方法为：

转动所述动态变化区域的三维模型，改变每个所述粒子的位置；

实时获取所述每个所述粒子的位置；

根据所述第一参考点的位置及实时获取的每个所述粒子的位置，得到所述第一参考点与每个所述粒子的实时距离；

基于所述第一参考点与每个所述粒子的实时距离，确定对应时刻每个所述粒子在界面上的显示尺寸，实现界面的动态变化。

在一个实施例中，所述动态调整所述动态变化区域的三维模型，实现界面的边缘虚化，具体方法为：

实时获取所述每个所述粒子的位置；

根据所述第二参考点的位置及实时获取的每个所述粒子的位置，得到所述第二参考点与每个所述粒子的实时距离；

基于所述第二参考点与每个所述粒子的实时距离，确定对应时刻每个所述粒子在界面上的显示透明度，实现界面的边缘虚化。

在一个实施例中，所述方法还包括：

记录所述界面的动态变化时长；

当所述界面的动态变化时长达到预设时长时，停止所述界面的动态变化。

第二方面，本发明实施例提供一种动态界面的实现装置，所述装置包括：

三维构建模块，用于根据界面的动态显示图片建立所述界面中的动态变化区域的三维模型；

获取模块，用于获取构建所述动态变化区域的三维模型的各构建点的位置；

粒子建立模块，用于在每个所述构建点的位置处建立粒子；

粒子渲染模块，用于对建立的所述粒子进行渲染；

第一参考点确定模块，用于在所述界面中的非动态变化区域中确定第一参考点；

显示尺寸确定模块，用于基于所述第一参考点与每个所述粒子的位置关系，确定所述粒子在所述界面上的显示尺寸；

调整模块，用于动态调整所述动态变化区域的三维模型，实现界面的动态变化。

在一个实施例中，所述装置还包括：

第二参考点确定模块，用于在所述界面中的动态变化区域中确定第二参考点；

显示透明度确定模块，用于基于所述第二参考点与每个所述粒子的位置关系，确定所述粒子在所述界面上的显示透明度。

第三方面，本发明实施例提供一种终端设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例提供的动态界面的实现方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本发明实施例提供的动态界面的实现方法。

本发明实施例提供的上述技术方案的有益效果至少包括：

本发明实施例提供的一种动态界面的实现方法、装置及相关设备，在本实施例中，首先根据界面的动态显示图片建立所述界面中的动态变化区域的三维模型；然后获取构建所述动态变化区域的三维模型的各构建点的位置，在每个所述构建点的位置处建立粒子，并对所述粒子进行渲染；其次在所述界面中的非动态变化区域中确定第一参考点；并基于所述第一参考点与每个所述粒子的位置关系，确定所述粒子在所述界面上的显示尺寸；最后动态调整所述动态变化区域的三维模型，实现界面的动态变化，通过粒子的动态变化，呈现出界面的动态变化效果，能够有效降低运算量，提高图像的处理效率，满足智能终端的需求。

通过上述描述可知，在本发明实施例中，通过对建立的所述动态变化区域的三维模型的动态调整，动态改变构建所述动态变化区域的三维模型的各构建点的位置，进而实时改变基于第一参考点与每个所述粒子的距离，实时调整每个所述粒子的显示尺寸，实现界面的动态效果。还可以基于实时改变第二参考点与每个所述例子的距离，实时调整每个所述例子的显示透明度，进一步实现界面的边缘虚化，增强界面的显示效果。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例一提供的一种动态界面的实现方法的流程示意图；

图2为本发明实现界面的边缘虚化的流程示意图；

图3为本发明实施例二提供的一种动态界面的实现装置的结构示意图；

图4为本发明实施例二提供的另一种动态界面的实现装置的结构示意图；

图5为本发明实施例三提供的一种终端设备的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例一：

根据本发明实施例，提供了一种动态界面的实现方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本发明实施例一提供一种动态界面的实现方法，如图1所示，可以包括以下步骤S11-S15：

S11：根据界面的动态显示图片建立所述界面中的动态变化区域的三维模型；

在一个实施例中，根据界面的动态显示图片来确定需要建立的三维模型，可以是根据单帧特征较明显的动态显示图片确定所建立的三维模型，也可以是通过连续多帧的动态显示图片呈现的动态效果，确定所建立的三维模型，然后，可以引用MATLAB仿真建模软件进行建模，建立所述界面中的动态变化区域的三维模型。

S12：获取构建所述动态变化区域的三维模型的各构建点的位置，在每个所述构建点的位置处建立粒子，并对所述粒子进行渲染；

在一个实施例中，首先根据选取的三维模型确定的得到与其匹配的建模算法，然后通过该算法确定构建所述动态变三化区域的三维模型的各构建点的坐标，获取到所述构建点的位置，在各构建点的位置处，建立粒子，并通过片段着色器，对建立的所述粒子的形状、颜色及透明度进行渲染，在界面上呈现出满足用户需求的显示效果，

其中，可以是对每个所述粒子进行渲染，将单个粒子的形状渲染为方形、圆形、三角形或者多边形，根据设定RGB值将单个粒子渲染呈现对应颜色，并渲染粒子的透明度为0～100％中的任一透明度值。还可以是将预设个数的粒子描画成一定形状，构成粒子组合单元，片段着色器对该粒子组合单元进行形状、颜色及透明度的渲染，形成单个显示单元，具体举例来说，可以是通过三个粒子描画呈三角形，构成单个三角形的粒子组合单元，片段着色器对该三角形的粒子组合单元进行渲染，如果渲染形状为圆形，RGB为(0，0，255)，且透明度为100％，最终在界面上呈现出多个黑色实体的圆点，还可以是通过四个粒子描画呈四边形，或者四个以上的粒子描画呈多边形，构成单个四边形或多边形的粒子组合单元，片段着色器对该四边形或多边形的粒子组合单元进行渲染，如果渲染形状为正方形，RGB为(255，192，203)，且透明度为50％，最终在界面上呈现出多个粉色半透明的方块。

S13：在所述界面中的非动态变化区域中确定第一参考点；

具体地，将界面中未分布粒子的区域设定为非动态变化区域，并在该非动态变化区域中确定任意一个位置点作为第一参考点，所述第一参考点为固定点，在动态调整所述动态变化区域的三维模型时，第一参考点始终作为观察点，其位置不发生改变。

S14：基于所述第一参考点与每个所述粒子的位置关系，确定所述粒子在所述界面上的显示尺寸；

在一个实施例中，采用如下公式(1)计算粒子在界面上的显示尺寸：

其中：size为粒子在界面上的显示尺寸，d为每个所述粒子到所述第一参考点的距离，而a、b、c则是二次方程的参数。如果我们想设置点大小随着距离变化而线性变化，那么就将a和c设置为0，b设置为非0常数值，通过上述公式(1)计算得到的值即为粒子的尺寸值。

S15：动态调整所述动态变化区域的三维模型，实现界面的动态变化。

具体地，是通过动态转动所述动态变化区域的三维模型，实时改变每个所述粒子的位置，通过实时获取到的每个粒子的位置的坐标与第一参考点的位置的坐标，计算每个粒子和第一参考点的实时距离，通过上述公式(1)计算得到每个粒子当前时刻的显示尺寸，通过粒子的显示尺寸的不停变化，实现界面呈现出的动态变化效果，在动态转动该动态变化区域的三维模型时，可以是匀速转动，也可以是先加速后减速转动，还可以是先减速后加速转动，使得三维模型转动时的角度变化呈线性分布，呈现不同的动态效果，满足不同用户的需求。

在一个实施例中，所述方法如图2所示，还包括以下步骤S21-S23：

S21：在所述界面中的动态变化区域中确定第二参考点；

具体地，将界面中分布粒子的区域设定为动态变化区域，并在该动态变化区域中确定任意一个构建点作为第二参考点，在动态调整所述动态变化区域的三维模型时，构建所述动态变化区域的三维模型的构建点的位置均在发生变化，第二参考点的位置随该三维模型的转动而动态改变。

S22：基于所述第二参考点与每个所述粒子的位置关系，确定所述粒子在所述界面上的显示透明度；

在一个实施例中，采用如下公式(2)计算粒子在动态转动所述动态变化区域的三维模型后的位置：

gl_Position＝u_project*u_modelview*a_pos；(2)

其中，gl_Position是粒子在动态转动所述动态变化区域的三维模型后当前时刻的位置，具体地，u_modelview是根据所述动态变化区域的三维模型的各构建点得到模型视图矩阵，将所述动态变化区域的三维模型按照等高变换函数实现空间分层，再将所述每个空间分层模型投影到参考平面(即界面所在平面)，构造得到投影矩阵u_project，a_pos则是上一个时刻粒子的位置。

float length＝distance(u_MiddlePoint，gl_Position)；(3)

采用上述公式(3)计算第二参考点和每个所述粒子的距离，u_MiddlePoint为所述第二参考点的位置的坐标，gl_Position是粒子在动态转动所述动态变化区域的三维模型后当前时刻的位置。

然后，采用如下公式(4)计算每个所述粒子的平滑过渡系数：

a＝1.0-smooth step(0.0，max length，float length)； (4)

其中，max length是预设的距离阈值，该距离阈值是根据实际界面呈现效果设定的大于等于零的一个常数值，float length为第二参考点和每个所述粒子的距离，将maxlength、第二参考点和每个所述粒子的距离代入上述平滑过渡函数中，计算得到平滑过渡系数a。

将平滑过渡系数a代入颜色容器，计算得到每个粒子在界面上的显示透明度，确定每个粒子的虚化程度，实现界面边缘的平滑过渡效果。

S23：动态调整所述动态变化区域的三维模型，实现界面的边缘虚化。

具体地，是通过动态转动所述动态变化区域的三维模型，实时改变每个所述粒子的位置，通过实时获取到的每个粒子的位置的坐标与第二参考点的位置的坐标，计算每个粒子和第二参考点的实时距离，进而计算得到每个粒子当前时刻的显示透明度，实现界面呈现出的边缘虚化效果。

在一个实施例中，所述方法还包括：

记录所述界面的动态变化时长；

具体地，是记录界面的动态变化时长，将该动态变化时长与预设时长进行比较，如果该动态变化时长达到预设时长，则说明动态变化的时间满足了用户的需求，停止所述界面的动态变化；如果该动态变化时长小于预设时长，则说明动态变化的时间与用户的需求不匹配，需要继续转动所述动态变化区域的三维模型，延长所述界面的动态变化时长，直至其达到预设时长时停止。

实施例二

本发明实施例二提供一种动态界面的实现装置，如图3所示，所述装置包括：

三维构建模块31，用于根据界面的动态显示图片建立所述界面中的动态变化区域的三维模型；

获取模块32，用于获取构建所述动态变化区域的三维模型的各构建点的位置；

粒子建立模块33，用于在每个所述构建点的位置处建立粒子；

粒子渲染模块34，用于对建立的所述粒子进行渲染；

第一参考点确定模块35，用于在所述界面中的非动态变化区域中确定第一参考点；

显示尺寸确定模块36，用于基于所述第一参考点与每个所述粒子的位置关系，确定所述粒子在所述界面上的显示尺寸；

调整模块37，用于动态调整所述动态变化区域的三维模型，实现界面的动态变化。

在一个实施例中，如图4所示，所述装置还包括：

第二参考点确定模块38，用于在所述界面中的动态变化区域中确定第二参考点；

显示透明度确定模块39，用于基于所述第二参考点与每个所述粒子的位置关系，确定所述粒子在所述界面上的显示透明度。

实施例三

如图5所示，本发明实施例三提供的终端设备包括：一个或多个处理器41和存储装置42；该终端设备中的处理器41可以是一个或多个，图4中以一个处理器41为例；存储装置42用于存储一个或多个程序；所述一个或多个程序被所述一个或多个处理器41执行，使得所述一个或多个处理器41实现如本发明实施例中任一项所述的动态界面的实现方法。

所述终端设备还可以包括：输入装置43和输出装置44。

终端设备中的处理器41、存储装置42、输入装置43和输出装置44可以通过总线或其他方式连接，图4中以通过总线连接为例。

该终端设备中的存储装置42作为一种计算机可读存储介质，可用于存储一个或多个程序，所述程序可以是软件程序、计算机可执行程序以及模块，如本发明实施例一所提供动态界面的实现方法对应的程序指令/模块(例如，附图3所示的动态界面的实现装置中的模块，包括：三维构建模块31、获取模块32、粒子建立模块33、粒子渲染模块34、第一参考点确定模块35、显示尺寸确定模块36及调整模块37)。处理器41通过运行存储在存储装置42中的软件程序、指令以及模块，从而执行终端设备的各种功能应用以及数据处理，即实现上述方法实施例中动态界面的实现方法。

存储装置42可包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端设备的使用所创建的数据等。此外，存储装置42可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储装置42可进一步包括相对于处理器41远程设置的存储器，这些远程存储器可以通过网络连接至设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置43可用于接收输入的数字或字符信息，以及产生与终端设备的用户设置以及功能控制有关的键信号输入。输出装置44可包括显示屏等显示设备。

并且，当上述终端设备所包括一个或者多个程序被所述一个或者多个处理器41执行时，程序进行如下操作：

在所述界面中的非动态变化区域中确定第一参考点；

实施例四

本发明实施例四提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时用于执行动态界面的实现方法，该方法包括：

在所述界面中的非动态变化区域中确定第一参考点；

可选的，该程序被处理器执行时还可以用于执行本发明任意实施例所提供的动态界面的实现方法。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(Random AccessMemory，RAM)、只读存储器(Read Only Memory，ROM)、可擦式可编程只读存储器(ErasableProgrammable Read Only Memory，EPROM)、闪存、光纤、便携式CD-ROM、光存储器件、磁存储器件、或者上述的任意合适的组合。计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于：电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、无线电频率(RadioFrequency，RF)等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)——连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims

1.一种动态界面的实现方法，其特征在于，包括：

在所述界面中的非动态变化区域中确定第一参考点；

动态转动所述动态变化区域的三维模型，改变每个所述粒子的位置，并实时获取每个所述粒子的位置；根据所述第一参考点的位置及实时获取的每个所述粒子的位置，得到所述第一参考点与每个所述粒子的实时距离；基于所述第一参考点与每个所述粒子的实时距离，确定所述粒子在所述界面上的显示尺寸，以通过粒子显示尺寸的变化实现界面的动态变化。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在所述界面中的动态变化区域中确定第二参考点；

3.根据权利要求1所述的方法，其特征在于，所述获取构建所述动态变化区域的三维模型的各构建点的位置，具体方法为：

4.根据权利要求1所述的方法，其特征在于，所述对所述粒子进行渲染，具体方法为：

5.根据权利要求1所述的方法，其特征在于，所述非动态变化区域为所述界面中的未分布所述粒子的区域；

6.根据权利要求2所述的方法，其特征在于，所述动态变化区域为所述界面中的分布所述粒子的区域；

7.根据权利要求2所述的方法，其特征在于，所述动态调整所述动态变化区域的三维模型，实现界面的边缘虚化，具体方法为：

实时获取所述每个所述粒子的位置；

8.根据权利要求1所述的方法，其特征在于，所述方法还包括：

记录所述界面的动态变化时长；

9.一种动态界面的实现装置，其特征在于，所述装置包括：

粒子建立模块，用于在每个所述构建点的位置处建立粒子；

粒子渲染模块，用于对建立的所述粒子进行渲染；

调整模块，用于动态转动所述动态变化区域的三维模型，改变每个所述粒子的位置，并实时获取每个所述粒子的位置；根据所述第一参考点的位置及实时获取的每个所述粒子的位置，得到所述第一参考点与每个所述粒子的实时距离；

显示尺寸确定模块，用于基于所述第一参考点与每个所述粒子的实时距离，确定所述粒子在所述界面上的显示尺寸；

所述调整模块，还用于通过粒子显示尺寸的变化实现界面的动态变化。