CN108255546B

CN108255546B - 一种数据加载动画的实现方法及装置

Info

Publication number: CN108255546B
Application number: CN201611241713.2A
Authority: CN
Inventors: 张坤
Original assignee: Tencent Technology Beijing Co Ltd
Current assignee: Tencent Technology Beijing Co Ltd
Priority date: 2016-12-29
Filing date: 2016-12-29
Publication date: 2021-09-24
Anticipated expiration: 2036-12-29
Also published as: CN108255546A

Abstract

本申请公开了一种数据加载动画的实现方法，包括：在应用软件的执行过程中，响应于用户的数据加载请求，获取在加载数据的过程中显示的动画文件；以及根据所述动画文件，显示动画直至所述数据加载完成；其中，所述显示动画包括：根据所述动画文件设置的画布宽度和高度确定绘制动画的区域；根据所述动画文件设置的至少一个动画元素的属性绘制所述至少一个动画元素；以及定时清除已在绘制动画的区域内绘制的至少一个动画元素，按照所述动画文件设置的所述至少一个动画元素的移动方式，更新所述至少一个动画元素的属性，并根据更新后的所述至少一个动画元素的属性重新绘制所述至少一个动画元素。本申请还公开了一种数据加载动画的实现装置。

Description

一种数据加载动画的实现方法及装置

技术领域

本申请涉及互联网技术领域，尤其涉及一种数据加载动画的实现方法及装置。

背景技术

目前，随着移动互联网技术的不断发展，可以在移动终端上安装并使用的应用(APP)也越来越丰富。对于很多应用来讲，在用户点击移动终端上某个应用的图标进入该应用客户端主页面、点击应用的某个选项请求进入该应用的某个子页面或者进行其他类型的页面切换时，移动终端上的应用客户端通常需要先向对应的应用服务器请求相应的数据，以便完成主页面或者子页面的显示。例如，对于某些新闻类应用、视频类应用、甚至针对金融产品的应用，这些应用的主页面以及各个子页面上显示的数据或者内容是随着时间的变化而不断变化的。因此，在打开这些应用的主页面或者各个子页面时，移动终端上的客户端需要首先向对应的应用服务器请求相应的主页面或者子页面的数据，并在完成这些数据的加载过程后，才能显示相应的主页面或者子页面。可以理解，这样的数据传输以及加载过程需要或多或少的一段时间，而且在这段时间内这个应用是处于不可用的状态。因此，为了提示用户客户端正在加载数据的过程中，以防止用户二次提交数据加载请求，目前市场上的移动客户端在加载数据时通常会显示简单的动画，告知用户该数据正在加载过程中，请其耐心等待，以缓解用户等待的情绪。上述的这种在数据加载过程中显示动画的方式可以提供视觉反馈，管理用户期望，降低用户放弃浏览数据的几率。

发明内容

本申请实例提供一种数据加载动画的实现方法，该方法包括：在应用软件的执行过程中，响应于用户的数据加载请求，在从应用服务器加载数据的同时，获取在加载数据的过程中显示的动画文件；以及根据所述动画文件，显示动画直至所述数据加载完成；其中，所述显示动画包括：根据所述动画文件设置的画布宽度和高度确定绘制动画的区域；根据所述动画文件设置的至少一个动画元素的属性在所确定绘制动画的区域内绘制所述至少一个动画元素；以及定时清除已在绘制动画的区域内绘制的至少一个动画元素，按照所述动画文件设置的所述至少一个动画元素的移动方式更新所述至少一个动画元素的属性，并根据更新后的所述至少一个动画元素的属性重新绘制所述至少一个动画元素。

本申请还提供了一种数据加载动画的实现装置，该装置包括：数据加载模块，在应用软件的执行过程中，响应于用户的数据加载请求，在从应用服务器加载数据的同时，获取在加载数据的过程中显示的动画文件；以及显示模块，根据所述动画文件，显示动画直至所述数据加载完成；其中，所述显示模块包括：画布区域设置单元，根据所述动画文件设置的画布宽度和高度确定绘制动画的区域；第一绘制单元，根据所述动画文件设置的至少一个动画元素的属性在所确定绘制动画的区域内绘制所述至少一个动画元素；以及第二绘制单元，定时清除已在绘制动画的区域内绘制的至少一个动画元素，按照所述动画文件设置的所述至少一个动画元素的移动方式更新所述至少一个动画元素的属性，并根据更新后的所述至少一个动画元素的属性重新绘制所述至少一个动画元素。

采用本申请提出的上述技术方案，能够在提示用户正在加载数据的同时为用户带来了更为丰富和新奇的体验，还能够降低用户等待的枯燥乏味感，增强用户的使用感受。而且，在本申请提出的技术方案中，动画文件本身不包含图片，因此，文件大小非常小，方便下载以及存储，而且既能节省下载所需的网络资源又能节省存储所需的存储器的空间。

附图说明

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

图1是为本申请涉及的动画效果图示例；

图2为本申请一个实例所述的数据加载动画的实现方法流程图；

图3为本申请一个实例所述的显示数据加载动画的方法流程图；

图4是为本申请一个实例中的动画效果图；

图5a和图5b分别为本申请一个实例所述的动画元素的示意图以及动画元素的移动轨迹示意图；

图6是为本申请一个实例提供的动画元素融合的判断方法流程图；

图7a、图7b和图7c分别为本申请一个实例提供的两个动画元素融合的三个过程示意图；

图8a、图8b和图8c分别为本申请一个实例提供的两个动画元素融合的三个过程的曲线绘制示意图；

图9为本申请一个实例所述的小程序架构示意图；

图10为本申请一个实例所述的数据加载动画的实现装置的内部结构示意图；以及

图11为本申请一个实例所述的数据加载动画的实现装置的硬件结构示意图。

具体实施方式

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

如前所述，对于当前的很多应用而言，移动客户端在加载数据时会显示简单的动画，以告知用户该数据正在加载过程中，请其耐心等待，以缓解用户等待的情绪。例如，在当前的一些应用软件的设计中，移动客户端在加载数据的过程中，采用整屏或局部屏幕白底/黑底并加上菊花转的动效方式，来提示用户当前正在加载数据。这种菊花转的动效方式可以如图1所示。然而，这种动画效果虽然达到了用户需要等待的交互目的，但是这种效果用到现在已是枯燥乏味，等待时间过长后旋转的效果使用户烦闷，不利于产品的优化。为了方便描述，在本申请中，将上述在数据加载过程中显示的动画简称为数据加载动画。

为了降低等待数据加载的枯燥乏味感，移动客户端可以在数据加载时使用更为复杂和灵活的动画方式。这种复杂动画的实现方式通常可以包括以下两种。一种是通过GIF动画(Graphics Interchange Format，原义是“图像互换格式”)实现。GIF是CompuServe公司在1987年开发的图像文件格式。一种是通过Canvas实现。Canvas是HTML5新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染等等。然而，GIF动画是把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，这往往会导致文件过大，从而在移动设备上使用会消耗大量资源。而且GIF动画的逐帧设计较繁琐，且有些设计上的细节不能很好的体现。而Canvas动画可以通过程序实现复杂动画，例如，Canvas可以利用一些物理原理设计动画元素及其运动，同时程序文件体积极小、执行效率高，适合在移动设备上使用。考虑到以上因素，在本申请中选择使用Canvas实现动画。

因此，本申请提出了一种数据加载动画的实现方法。该方法可应用于各种客户端设备上的数据加载动画的实现模块，该数据加载动画的实现模块可内置于各种应用(APP)客户端上，例如：微博、微信、QQ、博客、BBS、新闻客户端等。这里，客户端设备可以为诸如手机、平板电脑、笔记本电脑等各种便携式的电子设备。

图2显示了本申请提出的数据加载动画实现方法的流程。如图2所示，该方法包括如下步骤：

步骤201：在应用软件的执行过程中，响应于用户的数据加载请求，在从应用服务器加载数据的同时，获取在数据加载过程中显示的动画文件。

其中，在本申请的一些实例中，上述用户的数据加载请求可以是用户选择打开某个应用客户端的主页面的请求，表示用户请求应用客户端显示该应用软件主页面的数据；上述用户的数据加载请求还可以是用户进行页面切换或者选择应用的某个选项的请求，表示用户请求应用客户端显示被切换至的或者选择的该应用软件主页面或某个子页面的数据。

上述数据加载请求可通过安装应用客户端的客户端设备的各种输入设备输入，例如，可以是鼠标移动和鼠标按钮点击、触摸屏上的各种手势操作(如点击、长按、滑动、轻击、拖动、滚动等)，也可以是触控笔输入、通过麦克风输入的口头指令、通过重力传感器监测到的设备姿态变化，还可以是通过摄像模块、指纹识别模块或红外模块等检测到的生物特征输入，或者是以上任意几项的组合。

在接收到用户的上述数据加载请求后，应用客户端将基于用户的请求向对应的应用服务器请求相应的数据。例如，如果用户请求显示的是应用客户端主页面，则应用客户端向对应的应用服务器请求主页面的数据；如果用户请求显示的是应用客户端某个子页面，则应用客户端向对应的应用服务器请求该子页面的数据。

如前所述，由于所请求数据的传输以及加载过程需要一定的时间，而且在这段时间内，应用软件是处于不可使用状态的，因此，应用客户端通常会显示一段动画来告知用户正在加载数据，缓解用户等待的枯燥感。

因此，在本步骤中，应用客户端需要首先获取需要在数据加载过程中显示的动画文件。

通常，所述动画文件可以为存储在本地的动画文件。在本申请的一些实施中，应用软件的开发者会在设计应用软件的过程中确定应用客户端在加载数据时(例如，加载主页面数据或者子页面数据时)要展示什么样的动画，也即应用软件的开发者会设计并生成在应用客户端加载数据时由应用客户端执行的动画文件。通常，上述动画文件会包含在应用客户端软件的安装包中。这样，在客户端设备安装某个应用客户端软件时，其安装包中的动画文件就会存储在客户端设备本地的存储器中，而且，应用客户端会记录该动画文件在本地存储的路径。因此，在本步骤中，应用客户端可以根据记录的该动画文件在自身存储器存储的路径而直接获取该动画文件。

作为上述方案的替代方案，上述动画文件也可以是预先存储在客户端设备的存储器中的默认动画文件。根据应用程序的配置，应用客户端已知该默认动画文件的存储路径，并且根据应用程序的配置已知在怎样的触发条件下从该存储路径获取并执行该动画文件。

在本申请的一些实例中，上述动画文件可以是基于Canvas元素的动画文件，例如，可以是包含Canvas元素的HTML5文件。这样的动画文件可以由支持Canvas元素的浏览器或具有支持Canvas元素的浏览器内核的应用软件执行，或者可以由可以调用操作系统自身支持Canvas的绘图能力的应用软件执行。

步骤202：根据所述动画文件，显示动画直至所述数据加载完成。

如前所述，在本申请的一些实例中，上述动画文件可以是包含Canvas元素的HTML5文件，因此，在本步骤中，应用客户端需要能够支持Canvas的绘图能力，或者应用客户端需要能够调用支持Canvas绘图能力的其他开放平台或操作系统。例如，如果该应用客户端本身具备支持Canvas元素的浏览器功能，则该应用客户端可以直接执行该动画文件，从而显示动画。或者如果该应用客户端本身并不具备支持Canvas元素的浏览器功能，但是可以调用某个开放平台(例如微信平台)提供的应用程序接口(API)或者操作系统提供的API，且该API支持Canvas的绘图能力，从而用户客户端可以利用某些开放平台的绘图或者操作系统本身的绘图能力，从而执行该动画文件，显示相应动画。

具体而言，图3显示了本申请一个实例所提出的显示动画的方法流程。如图3所示，该显示动画的方法可以包括：

步骤301：根据上述动画文件设置的画布的宽度和高度确定绘制动画的区域。

如前所述，上述动画文件可以是包含Canvas元素的HTML5文件。通常一个Canvas标签会包含两个属性：宽度和高度。通过设置这两个属性的值，即可完成对画布的宽度和高度的设置。如果应用软件的开发者不对一个Canvas标签的宽度和高度进行设置，则通常会认为该Canvas标签对应的画布的大小是默认大小，例如宽度为300像素和高度为150像素。该画布大小可以设置为客户端设备展示区域的全部或者一部分。例如，图4显示了一个画布大小的示例。如图4所示，可以在客户端设备展示区域的一部分展示上述动画。

因此，在本步骤中，应用客户端可以直接根据动画文件的设置的画布的宽度和高度确定绘制动画的区域。

步骤302：根据所述动画文件的设置的动画元素的属性在所确定绘制动画的区域内绘制并显示至少一个动画元素。

除了画布的宽度和高度之外，动画文件中还可以设置动画元素。上述动画元素可以是指在上述绘制动画的区域内显示的一个或者多个元素，该一个或多个元素中的每一个元素可以具有以下属性：形状、大小、填充颜色、透明度以及位置等等。例如，一个动画元素可以设置为一个长方形，其大小为55像素*50像素，其左上角的坐标位置是(10,10)，其填充颜色可以通过RGB值设置为红色，并且还可以设置其透明度是半透明的。当然，上述举例仅是一个示例，还可以设置不同形状和大小、不同颜色以及不同透明度不同位置的一个或者多个动画元素。

上述动画文件中将会明确定义在绘制动画的区域内显示的各个动画元素的形状、大小填充颜色、透明度以及初始位置等等，因此，在本步骤中，应用客户端可以根据动画文件设置的动画元素的各项属性在绘制动画的区域内绘制出一个或者多个动画元素。

步骤303：定时清除已在绘制动画的区域内绘制的至少一个动画元素，按照所述动画文件设置的所述至少一个动画元素的移动方式更新所述至少一个动画元素的属性，并根据更新后的所述至少一个动画元素的属性重新绘制并显示所述至少一个动画元素。

由于在本申请中，在加载数据的过程中客户端设备在显示装置上展示的一段动画，因此，除了画布的宽度和高度、各个动画元素的属性之外，上述动画文件中还可以进一步设置各个动画元素的移动方式。上述移动方式可以包括动画元素的移动轨迹、移动速率以及碰撞规则等等。并且，应用客户端绘制动画时是一帧一帧绘制且一帧一帧显示的，也即，在绘制完上一帧的图像并且要重新绘制下一帧的图像之前，需要首先清空画布(绘制动画的区域)，然后再重新绘制下一帧的图像，这样，在用户侧看到的就是动态变化的图案，也即动画。因此，在本步骤中，首先需要按照动画文件设置的重绘时间间隔(也即每一帧图像保留的时间)，定时清除上一帧已在绘制动画的区域内绘制的动画元素，并在清空画布之后，根据动画元素的移动轨迹、移动速率以及碰撞规则更新动画元素的形状、大小、颜色以及位置等等属性，再按照更新的属性重新绘制这一帧的动画元素。

上述移动轨迹定义了各个动画元素在绘制动画的区域内的移动的轨迹。该轨迹可以是多种多样的，例如可以是圆形轨迹、椭圆形轨迹、甚至是不规则的形状、直线或者任意曲线轨迹等等。根据上述动画文件的设置，动画文件被执行时，上述动画元素将显示为按照设置的轨迹移动。需要说明的是，在本申请的一些实例中可以仅设置部分动画元素的移动轨迹，而对于其他动画元素可以不设置移动轨迹。对于不设置移动轨迹的动画元素，其位置是保持固定不变的。

上述移动速率是指在动画的显示过程中动画元素按照其移动轨迹移动的快慢。

上述碰撞规则定义了不同的动画元素在边界被触碰到一起时将按照怎样的轨迹继续移动。该碰撞规则也可以是多种多样的，至少包括：融合、反弹和按照原有轨迹移动。例如，在本申请的一些实例中，两个动画元素在发生碰撞之后可以继续按照原有轨迹移动，或者相互碰撞的动画元素融合成一个动画元素并继续按照新的轨迹运动，再或者相互碰撞的动画元素按照物理学的原理相互反弹并按照新的轨迹运动等等。

根据上述定义，在本步骤中，应用客户端将首先按照所述动画文件设置的所述至少一个动画元素的移动轨迹以及碰撞规则，按照自身客户端设备显示器的刷新频率，定时更新所述至少一个动画元素的属性。即确定在显示器的每个刷新时刻上述至少一个动画元素的属性。由于移动轨迹的设置，在显示器的每个刷新时刻上，各个动画元素的位置可能是不同的。而且由于碰撞规则的设置，上述至少一个动画元素在碰撞时可能会造成动画元素其他属性上的变化，例如，大小、形状、颜色、透明度等等都有可能发生变化，因此，除了位置之外，还要在显示器的每个刷新时刻更新上述至少一个动画元素的其他属性。

在定时更新所述至少一个动画元素的属性之后，就可以在绘制动画的区域内，根据更新后的动画元素的属性，绘制至少一个动画元素了。也即在显示器的每个刷新时刻上根据更新后的动画元素的属性绘制至少一个动画元素。

由于上述绘制是定时完成的，例如可以在客户端设备显示设备的刷新时刻进行上述步骤303所述的更新和绘制，因此，在用户看来，动画元素就是按照一定的轨迹以及碰撞规则运动的。

下面将结合一个具体的示例以及几个附图详细描述根据动画文件显示动画的一个示例。

在本实例中，上述动画文件设置了一个正方形的画布(绘制动画的区域)以及4个圆形的动画元素，在本例中简称为4个水滴。如图5a、5b所示，在正方形的画布中，有A、B、C三个小水滴(半径较小)以及一个相对较大的水滴O(半径较大)。水滴O的坐标为P₀(x₀，y₀)，固定不动。并且水滴O上可以带有特定的标志，例如水滴O上带有当前应用客户端的标志(LOGO)等。而水滴A、B、C均按照如图5b所示的椭圆型轨迹运动，图5a为该动画第一帧的图像效果。

假设水滴A的椭圆移动轨迹的中心点坐标为(x1₀，y1₀)，则该水滴A移动轨迹上各点的坐标(x1，y1)则可以根据椭圆的标准公式得到，如下述公式(1)所示：

其中，a1为椭圆的长半轴；b1为椭圆的短半轴；且满足a1>b1>0。

进一步根据下述公式sinα²+cosα²＝1可以推导出水滴A的移动轨迹以角度α为参数时的方程(2)，并由此可以得出水滴A椭圆移动轨迹上的坐标值为(x1，y1)：

设置完水滴A的移动轨迹之后，水滴A的圆心将根据上述公式(2)随着角度α的变化(例如，递增)而进行移动。

随后，可以进一步将水滴A的移动轨迹分别逆时针和顺时针旋转θ度角，得到两个斜椭圆的移动轨迹，并将这两个斜椭圆的移动轨迹分别作为水滴B和水滴C的移动轨迹。例如，根据变换矩阵的数学线性代数概念，用矩阵方式可以将水滴B的移动轨迹上的坐标值(x1’，y1’)表示为下面的公式(3)：

将水滴B的移动轨迹上的坐标值(x2’，y2’)表示为下面的公式(4)：

当然，上述水滴B和水滴C的移动轨迹也可以换过来，也即水滴B的移动轨迹上的坐标值为(x2’，y2’)；水滴C的移动轨迹上的坐标值为(x1’，y1’)。

设置完水滴B和C的移动轨迹之后，水滴B和C的圆心将根据上述公式(3)或(4)随着角度α的变化(例如，递增)而进行移动。

如图5b所示，当水滴A、B、C按照椭圆型轨迹运动时，会与水滴O碰撞。而且根据一般的物理现象，水滴之间在相互碰撞时会发生融合，则可以设置水滴A、B、C与水滴O接近并碰撞时会进行融合，也即将上述动画元素的碰撞规则设置为融合。

在申请的一些实例中，如果碰撞规则设置为融合，则在更新动画元素的属性时需要首先判断动画元素是否满足融合的条件，如果是，则除了根据动画文件的设置更新动画元素的属性之外，还需要进一步执行融合动画效果。

在本申请的一些实例中，可以设置发生上述融合的条件为：两个动画元素(例如上述水滴)之间的距离小于预定的参数时，两个动画元素融合。

下面的图6给出了本申请一个实例提供的动画元素融合的判断方法流程图。如图6所示，该方法包括：

步骤601：实时计算动画元素之间的距离D。

以水滴(圆形动画元素)为例，两个水滴之间的距离可以定义为两个水滴的圆心之间的距离。当然，也可以采用其他的定义方式来定义动画元素之间的距离，本申请对此不进行限定。

步骤602：判断两个动画元素之间的距离D是否小于或等于预定的距离门限值T，如果是，则确定上述两个动画元素满足融合的条件，并执行步骤603；如果否，则返回步骤601，继续判断。

仍以水滴(圆形动画元素)为例，如前所述，两个水滴之间的距离可以定义为两个水滴的圆心之间的距离。当这个距离等于两个水滴的半径之和时，两个水滴相切；当这个距离大于两个水滴的半径之和时，两个水滴相离；当这个距离小于两个水滴的半径之和时，两个水滴相交。在本申请的实例中，可以设定上述距离门限值略大于两个水滴的半径之和，这样，在两水滴移动到距离足够近但还没有相切时就可以执行融合的效果动画。这样更加符合水滴在融合时的自然现象。

步骤603：绘制动画元素融合的效果动画。

下面将具体说明，本申请实例给出的两个水滴在融合时绘制融合的效果动画的方法。

假设水滴A的圆心动态坐标为P1(x₁，y₁)；水滴O的圆心坐标为P0(x₀，y₀)。且假设两个圆的半径分别为R₁和R₀。那么，两个水滴之间的动态距离可以用如下公式(5)表示：

假设预定的距离门限值为36像素，则在满足Distance-(R₁+R₀)≤36时(两个水滴距离相切小于或等于36像素时)，绘制融合的效果动画。

同理，水滴B、C的融合的判断条件也可以采用上述方法判断。

在本申请的一些实例中，水滴融合的动画可以分解为三个动作，分别为如图7a、图7b、图7c所示。由于水滴表面张力的作用，在两者相距一定距离时，就会发生吸引，如图7a所示；当两者靠近时，就发生相互融合，如图7b所示；直至完全融合，如图7c所示。

为了模拟水滴融合更加生动，减少融合的生硬感，可以利用Canvas支持的二次贝塞尔曲线函数实现融合的效果动画的曲线绘制，如图8a、图8b、图8c所示。

例如，图8a中水滴A的曲线可以通过以下代码段实现，其中context是获取canvas的有关上下文引用：

context.beginPath()；

context.moveTo(0,0)；

context.lineTo(2,-10)；

context.quadraticCurveTo(22,0,2,10)；

context.lineTo(0,0)；

图8a中水滴O的曲线可以通过以下代码段实现：

context.beginPath()；

context.moveTo(0,0)；

context.lineTo(11,-11)；

context.quadraticCurveTo(36,0,11,11)；

context.lineTo(0,0)；

context.stroke()；

图8b和图8c中水滴A和O融合后的曲线可以通过以下代码段实现：

context.beginPath()；

context.moveTo(0,0)；

context.lineTo(0,-9)；

context.quadraticCurveTo(10,-4,25,-14)；

context.lineTo(25,14)；

context.quadraticCurveTo(10,4,0,9)；

context.lineTo(0,0)；

而且，由于水滴A是沿着椭圆形的移动轨迹运动的，因此，上述利用二次贝塞尔曲线绘制的融合效果动画中的曲线，简称为融合曲线，也需要进一步跟随水滴A的移动进行转动。在本申请的一些实例中，上述融合曲线具体的转动方法可以根据两个融合的动画元素中心连线的斜率变化而确定。具体而言，例如，通过两个水滴圆心的动态坐标P1(x₁,y₁)和固定坐标P0(x₀，y₀)形成的斜率的角度计算公式：var angle＝Math.atan2(y₁-y₀,x₁-x₀)。然后，根据上述斜率的角度公式计算的角度值动态旋转上述融合曲线，具体可以通过如下代码实现：

context.rotate(utils.angle(Droplets[3].role,Droplets[index].role))；

当然上述融合的效果动画仅仅是一个示例，还可以采用多种效果动画实现动画元素的融合、反弹甚至相交等碰撞规则，本申请对此不进行限定。

通过上述方法可以看出，在本申请中，通过自身可以支持的Canvas绘图能力或者通过调用支持Canvas绘图能力的开放平台或者操作系统提供的API，应用客户端可以在收到用户的数据请求至加载完成用户请求的数据这段时间内显示设计复杂、个性化的动画，来提示用户正在加载数据，在信息通知的同时为用户带来了更为丰富和新奇的体验，不但避免了用户的二次请求，还够降低用户等待的枯燥乏味感，增强了用户的使用感受。

而且，进一步，在本申请的方法中，上述动画文件是基于Canvas元素的动画文件，例如包含Canvas元素的HTML5文件。Canvas可以利用物理原理设计动画元素的运动，从而完成动画的设计，从而可以实现更为真实和复杂的动画。而且，通常情况下，这样的动画文件不包含任何图片，只包含一些可以由浏览器、应用软件的浏览器内核或者操作系统本身来执行的指令，因此，文件大小非常小，通常只有7K左右。这不仅大大降低了客户端设备下载动画文件所需的时间和通信资源，也大大降低了客户端设备存储该动画文件所需的存储资源。

如前所述，上述数据加载动画的实现方法可以由应用客户端执行。由于在本申请的实例中动画文件是基于Canvas元素的，因此需要应用客户端支持Canvas绘图能力。例如，应用客户端应具有支持Canvas元素的浏览器功能，或者应用客户端可以调用支持Canvas元素的开发平台或操作系统提供的API。

目前，由微信平台提出的小程序架构作为一种开放的平台已经为应用软件的开发人员提供了一系列的基础组件以及API，其中包括画布(Canvas)组件和JS API、JSBridge。应用软件的开发者可以通过组合这些基础组件快速开发出一些小程序或称为小应用，并且这些小程序在执行时通过调用小程序架构提供的API实现各种系统调用，从而实现各种功能。在利用小程序构架搭建完小程序后，小程序的开发者可以将小程序上传至微信服务器。此后，如果有某个用户在微信里搜索这个小程序的名称或者扫描了其他用户分享的这个小程序对应的二维码，微信中就会出现这个小程序的标题。此时，用户如果点击这个小程序标题之后，应用客户端会从微信服务器下载这个小程序，并安装到应用客户端中，通常是微信客户端中。这种下载以及安装的过程是静默的，而且不会被用户感知的。因此，从用户的角度来看，这些小程序是一种不需要用户下载安装即可使用的应用。目前，通过提出的小程序架构，微信平台提高了自身对于HTML5的特性支持能力，从而开放了更多的系统调用，例如系统自身的绘图能力、GPS、传感器等的调用等等。

图9显示了小程序架构的一个示例。如前所述，小程序架构提供有一系列的基础的组件，例如画布Canvas组件。应用软件的开发者可以直接利用小程序架构提供的组件通过简单的编程实现更为丰富的系统调用从而实现各种功能。如图9所示，应用逻辑层中包含Java Script(JS)API和JSBridge，可以作为网页(Web)与系统自身能力(Native)之间交互的桥梁。具体而言，小程序在被执行的过程中可以通过上述JS API和JSBridge进行系统调用。在这些组件和接口的帮助下，建立在上述小程序构架下的小程序在运行能力和流畅度方面可以保持和系统Native APP一样的体验。

而且由于当前操作系统自身的绘图能力支持Canvas元素。因此，应用软件的开发人员可以利用小程序构架提供的画布Canvas组件开发应用软件，从而实现在应用的执行过程中绘制更为复杂图形甚至动画的目的。这些应用软件在执行时，可以调用小程序构架为小程序提供的JS API和JSBridge，进而调用操作系统本身的功能，从而完成基于Canvas元素的绘图。例如，可以基于小程序架构开发自选股小程序。在该小程序中，对于各个股票的K线图等图像的绘制功能，则可以利用小程序构架提供的画布Canvas组件来编写。此时，该自选股小程序在执行的过程中，当需要绘制某个股票的K线时，则可以调用小程序架构提供的JS API和JSBridge，进而调用操作系统本身(Native)的绘图功能，绘制出该股票的K线图。

由此可以看出，本申请所提出动画加载方法也可以应用到上述小程序架构上。也即应用软件的开发者通过小程序架构提供的各个组件开发小程序，其中可以包括利用上述画布Canvas组件开发的动画文件。并且在小程序中，在哪些情况下需要执行该动画文件，例如可以设置用户在打开上述小程序或者在小程序提供的各个页面上进行切换时，执行上述利用Canvas组件开发的动画文件，从而通过客户端设备向用户展示自己设计的动画。在上述动画文件的执行过程中，小程序将通过小程序架构提供的JS API和JSBridge调用操作系统本身(Native)的绘图功能，从而根据动画文件的设计绘制动画，例如，包括：确定画布的大小；根据动画元素的属性绘在画布上制动画元素；以及根据动画元素的移动轨迹以及碰撞规则，动态地定时(例如按帧)重新绘制各动画元素。这样，客户端设备的显示设备上即可显示上述动画元素按照预定的移动轨迹和碰撞规则移动的动画。

与调用浏览器功能完成动画的方法相比，上述这种通过小程序架构提供的JS API和JSBridge调用系统层Native功能(如图形库)的方法可以更为流畅的展示动画，也即具有更高的流畅度，可以防止卡顿或掉网的情况出现。

需要说明的是，虽然从用户的角度来看小程序不需要下载安装，但是在用户首次打开该小程序时，还是需要从服务器端下载安装文件并进行安装的，因此，本申请实例中提及的动画文件可以和安装文件一起被下载并存储在本地存储器中。在随后小程序的执行过程中，根据小程序的设计如果需要显示动画，则应用客户端可以执行已存储在本地存储器中的动画文件。

需要说明的是，上述是以微信平台提出的小程序架构为例进行说明的，但是本申请的方案并不限于上述微信平台提出的小程序架构。本申请提出的方法可以执行在任何为应用程序提供系统API以完成系统调用的开放平台上。这样，在动画文件被执行的过程中，可以通过系统API进行系统调用从而利用操作系统本身的绘图能力完成动画的绘制过程。本申请对开放平台本身不进行限定。

图10显示了本申请实例提出的一种数据加载动画的实现装置内部结构示意图。如图10所示，所述数据加载动画实现装置1000包括：数据加载模块1001，在应用软件的执行过程中，响应于用户的数据加载请求，在从应用服务器加载数据的同时，获取在加载数据的过程中显示的动画文件。

显示模块1002，根据所述动画文件，显示动画直至所述数据加载完成。

其中，所述显示模块1002包括：

画布区域设置单元10021，根据所述动画文件设置的画布宽度和高度确定绘制动画的区域。

第一绘制单元10022，根据所述动画文件设置的至少一个动画元素的属性在所确定绘制动画的区域内绘制所述至少一个动画元素；

其中，所述动画元素的属性包括：动画元素的形状、大小、颜色以及位置。

第二绘制单元10023，定时清除已在绘制动画的区域内绘制的至少一个动画元素，按照所述动画文件设置的所述至少一个动画元素的移动方式更新所述至少一个动画元素的属性，并根据更新后的所述至少一个动画元素的属性重新绘制所述至少一个动画元素。

在一些实例中，所述第一绘制单元可以通过调用开放平台提供的应用程序接口调用操作系统自身的绘图能力，根据所述动画文件设置的至少一个动画元素的属性在所确定绘制动画的区域内绘制所述至少一个动画元素；以及所述第二绘制单元可以通过调用开放平台提供的应用程序接口调用操作系统自身的绘图能力，根据所述动画文件设置的所述至少一个动画元素的移动轨迹以及碰撞规则重新绘制所述至少一个动画元素。

或者，作为上述方案的替代方案，所述第一绘制单元调用所述应用软件浏览器内核支持的绘图能力，根据所述动画文件设置的至少一个动画元素的属性在所确定绘制动画的区域内绘制所述至少一个动画元素；以及所述第二绘制单元调用所述应用软件浏览器内核支持的绘图能力，根据所述动画文件设置的所述至少一个动画元素的移动轨迹以及碰撞规则重新绘制所述至少一个动画元素。

上述各模块功能的具体实现原理在前文已有描述，这里不再赘述。

另外，在本申请各个实例中的动画加载方法和动画加载装置以及其中的各模块可以集成在一个处理单元中，也可以是各个模块单独物理存在，也可以两个或两个以上装置或模块集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

在一实例中，上述的数据加载动画实现装置可运行在各种可基于互联网而进行用户信息处理的计算设备中，并加载在该计算设备的存储器中。

图11示出了数据加载动画实现装置所在的计算设备的组成结构图。如图11所示，该计算设备包括一个或者多个处理器(CPU)1102、通信模块1104、存储器1106、用户接口1110，以及用于互联这些组件的通信总线1108。

处理器1102可通过通信模块1104接收和发送数据以实现网络通信和/或本地通信。

用户接口1110包括一个或多个输出设备1112，其包括一个或多个扬声器和/或一个或多个可视化显示器。用户接口1110也包括一个或多个输入设备1114，其包括诸如，键盘，鼠标，声音命令输入单元或扩音器，触屏显示器，触敏输入板，姿势捕获摄像机或其他输入按钮或控件等。

存储器1106可以是高速随机存取存储器，诸如DRAM、SRAM、DDR RAM、或其他随机存取固态存储设备；或者非易失性存储器，诸如一个或多个磁盘存储设备、光盘存储设备、闪存设备，或其他非易失性固态存储设备。

存储器1106存储处理器1102可执行的指令集，包括：

操作系统1116，包括用于处理各种基本系统服务和用于执行硬件相关任务的程序；

应用1118，包括用于实现动画加载的各种程序，这种程序能够实现上述各实例中的处理流程，比如可以包括图10所示的数据加载动画实现装置1000。在一些实例中，数据加载动画实现装置1000可包括图10所示的各模块1001～1002、10021～10023，各模块1001～1002、10021～10023可以存储有机器可执行指令。处理器1102通过执行存储器1106中各模块1001～1002、10021～10023中的机器可执行指令，进而能够实现上述各模块1001～1002、10021～10023的功能。

另外，本申请的每一个实例可以通过由数据处理设备如计算机执行的数据处理程序来实现。显然，数据处理程序构成了本发明。此外，通常存储在一个存储介质中的数据处理程序通过直接将程序读取出存储介质或者通过将程序安装或复制到数据处理设备的存储设备(如硬盘和或内存)中执行。因此，这样的存储介质也构成了本发明。存储介质可以使用任何类型的记录方式，例如纸张存储介质(如纸带等)、磁存储介质(如软盘、硬盘、闪存等)、光存储介质(如CD-ROM等)、磁光存储介质(如MO等)等。

因此本申请还公开了一种非易失性存储介质，其中存储有数据处理程序，该数据处理程序用于执行本申请上述方法的任何一种实例。

另外，本申请所述的方法步骤除了可以用数据处理程序来实现，还可以由硬件来实现，例如，可以由逻辑门、开关、专用集成电路(ASIC)、可编程逻辑控制器和嵌微控制器等来实现。因此这种可以实现本申请所述方法的硬件也可以构成本申请。

以上所述仅为本申请的较佳实例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims

1.一种数据加载动画的实现方法，其特征在于，由应用客户端执行，所述方法包括：

从应用服务器下载小程序，并安装到所述应用客户端中，其中，基于所述应用客户端对应的小程序架构提供的画布组件开发所述小程序，所述小程序包括动画文件；

在所述小程序的执行过程中，响应于用户的数据加载请求，在从所述应用服务器加载数据的同时，获取在加载数据的过程中显示的所述动画文件；以及

通过所述小程序架构提供的接口调用操作系统本身的绘图功能，执行所述动画文件，显示动画直至所述数据加载完成；

其中，所述通过所述小程序架构提供的接口调用操作系统本身的绘图功能，执行所述动画文件，包括：

根据所述动画文件设置的画布宽度和高度，确定绘制动画的区域；

根据所述动画文件设置的至少一个动画元素的属性，在绘制动画的区域内，绘制所述至少一个动画元素，所述至少一个动画元素包括第一动画元素和至少一个第二动画元素，所述第一动画元素上带有所述小程序的标志；以及

按照所述动画文件设置的所述至少一个动画元素的移动方式，更新所述至少一个动画元素的属性，并根据更新后的所述至少一个动画元素的属性，重新绘制所述至少一个动画元素，其中，对于任一第二动画元素，当该第二动画元素与所述第一动画元素之间的距离大于第二距离门限值时，绘制融合效果动画，并绘制融合效果动画中的融合曲线，所述融合曲线跟随该第二动画元素的移动进行转动。

2.根据权利要求1所述的方法，其特征在于，所述操作系统本身的绘图功能包括图形库。

3.根据权利要求1所述的方法，其特征在于，所述至少一个动画元素的移动方式包括：动画元素的移动轨迹、移动速率以及碰撞规则；其中，

所述移动轨迹为圆形、椭圆形、任意直线或曲线；以及

所述碰撞规则为融合。

4.根据权利要求1所述的方法，其特征在于，所述第一动画元素固定不动。

5.根据权利要求1所述的方法，其特征在于，在判断出该第二动画元素与所述第一动画元素之间的距离大于第二距离门限值之前，所述方法还包括：

实时计算该第二动画元素与所述第一动画元素之间的距离。

6.根据权利要求1所述的方法，其特征在于，所述绘制融合效果动画中的融合曲线，包括：

利用二次贝塞尔曲线，绘制所述融合曲线。

7.根据权利要求1所述的方法，其特征在于，所述动画文件不包括图片。

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

将所述动画文件存储在本地存储器中，并记录所述动画文件的存储路径；

所述获取在加载数据的过程中显示的所述动画文件，包括：

根据记录的所述动画文件的存储路径，获取所述动画文件。

9.根据权利要求1所述的方法，其特征在于，所述小程序架构的应用逻辑层中包括所述接口。

10.一种数据加载动画的实现装置，其特征在于，包括：

数据加载模块，用于从应用服务器下载小程序，并安装到应用客户端中，其中，基于所述应用客户端对应的小程序架构提供的画布组件开发所述小程序，所述小程序包括动画文件；在所述小程序的执行过程中，响应于用户的数据加载请求，在从所述应用服务器加载数据的同时，获取在加载数据的过程中显示的所述动画文件；以及

显示模块，用于通过所述小程序架构提供的接口调用操作系统本身的绘图功能，执行所述动画文件，显示动画直至所述数据加载完成；

其中，所述显示模块包括：

画布区域设置单元，根据所述动画文件设置的画布宽度和高度，确定绘制动画的区域；

第一绘制单元，根据所述动画文件设置的至少一个动画元素的属性，在绘制动画的区域内，绘制所述至少一个动画元素，所述至少一个动画元素包括第一动画元素和至少一个第二动画元素，所述第一动画元素上带有所述小程序的标志；以及

第二绘制单元，按照所述动画文件设置的所述至少一个动画元素的移动方式，更新所述至少一个动画元素的属性，并根据更新后的所述至少一个动画元素的属性，重新绘制所述至少一个动画元素，其中，对于任一第二动画元素，当该第二动画元素与所述第一动画元素之间的距离大于第二距离门限值时，绘制融合效果动画，并绘制融合效果动画中的融合曲线，所述融合曲线跟随该第二动画元素的移动进行转动。

11.根据权利要求10所述的装置，其特征在于，所述操作系统本身的绘图功能包括图形库。

12.根据权利要求10所述的装置，其特征在于，所述第一动画元素固定不动。

13.一种计算设备，其特征在于，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现如权利要求1至9中任一项所述的方法。

14.一种计算机可读存储介质，其特征在于，存储有计算机可读指令，所述计算机可读指令被至少一个处理器执行时，实现如权利要求1至9中任一项所述的方法。