CN112860357A - 动画资源的渲染方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本发明提供了一种动画资源的渲染方法、装置、计算机设备和存储介质。该方法包括：响应于应用程序的启动操作，发送动画资源请求至服务器；接收服务器返回的动画资源应答，其中，动画资源应答包括动画资源获取地址；根据动画资源获取地址下载动画资源；响应于目标页面的打开操作，获取终端的系统时间，以得到第一时间；在动画资源中确定与第一时间相对应的资源，作为第一资源；显示目标页面；以及在目标页面上渲染第一资源。通过本发明，能够减小APP安装包、丰富页面动画以及避免多次请求动画资源。

Description

动画资源的渲染方法、装置、计算机设备和存储介质

技术领域

本发明涉及动画资源处理技术领域，尤其涉及一种动画资源的渲染方法、装置、计算机设备和存储介质。

背景技术

随着通信技术的发展，移动终端已经成为人们工作和生活娱乐的主要工具，为了使移动终端的功能更加完善，通常会在移动终端的系统上运营各种功能的第三方应用程序(Application，APP)，以完善原始系统的不足与个性化。

在现有技术中，为了给用户提供友好的交互，部分APP会在页面上加载图片，其中，加载时所需的图片资源随着APP的安装包下发至移动终端，移动终端的系统解析安装包安装APP，同时将图片资源存储至本地，当显示对应的页面时，在本地获取图片资源进行加载。在此基础上，为了进一步丰富用户体验，部分APP会在页面上渲染动画，但是，将动画资源封装在安装包时，使得安装包的数据量过大，影响用户安装应用程序的体验。

因此，提供一种动画资源的渲染方法、装置、计算机设备和存储介质，以减小上述安装包的数据量，成为本领域亟需解决的技术问题。

发明内容

本发明的目的是提供一种动画资源的渲染方法、装置、计算机设备和存储介质，用于解决现有技术中存在的上述技术问题。

一方面，为实现上述目的，本发明提供了一种动画资源的渲染方法。

该动画资源的渲染方法包括：响应于应用程序的启动操作，发送动画资源请求至服务器；接收服务器返回的动画资源应答，其中，动画资源应答包括动画资源获取地址；根据动画资源获取地址下载动画资源；响应于目标页面的打开操作，获取终端的系统时间，以得到第一时间；在动画资源中确定与第一时间相对应的资源，作为第一资源；显示目标页面；以及在目标页面上渲染第一资源。

进一步地，第一时间包括日期，目标页面包括第一环形控件，第一环形控件的圆环上等分设置12个星座，在动画资源中确定与第一时间相对应的资源，作为第一资源的步骤包括：确定第一时间对应的星座，作为第一星座；根据星座与资源的对应关系在动画资源中确定与第一星座对应的资源，作为第一资源；显示目标页面的步骤包括：显示第一环形控件，且将第一环形控件的圆环上设置第一星座的部分显示在预设位置。

进一步地，该动画资源的渲染方法还包括：响应于对第一环形控件的转动操作，根据转动操作控制第一环形控件转动，其中，转动后预设位置内的星座为第二星座；根据星座与资源的对应关系在动画资源中确定与第二星座对应的资源，得到第二资源；在目标页面上渲染第二资源。

进一步地，根据转动操作控制第一环形控件转动的步骤包括：获取转动操作对应的终端的系统时间，以得到第二时间，其中，第二时间包括时钟；根据第二时间和预置的时间星座模型确定第二星座，其中，时间星座模型的输入参数为系统时间，输出参数为星座；以及控制第一环形控件转动，以使预设位置内的星座为第二星座。

进一步地，目标页面还包括圆形控件，圆形控件与第一环形控件同心设置，动画资源的渲染方法还包括：控制圆形控件与第一环形控件同时转动，且与第一环形控件的转动方向相反；响应于对圆形控件的点击操作，调用预设功能组件。

进一步地，目标页面还包括背景图层和第二环形控件，第二环形控件与第一环形控件同心设置，第二环形控件的圆环上等分设置24个小时，动画资源的渲染方法还包括：响应于对第二环形控件的转动操作，确定第二环形控件的转动角度；根据转动角度、角度与红色分量的对应关系、角度与绿色分量的对应关系和角度与蓝色分量的对应关系，分别计算红色分量值、绿色分量值和蓝色分量值；叠加红色分量值、绿色分量值和蓝色分量值得到色值；以及按照色值调整背景图层的亮度。

进一步地，在发送动画资源请求至服务器的步骤之前，接收应用程序的启动操作的步骤之后，动画资源的渲染方法还包括：获取应用程序的版本信息；根据版本信息封装动画资源请求，其中，服务器用于根据版本信息确定动画资源获取地址。

另一方面，为实现上述目的，本发明提供了一种动画资源的渲染装置。

该动画资源的渲染装置包括：第一响应模块，用于响应于应用程序的启动操作，发送动画资源请求至服务器；接收模块，用于接收服务器返回的动画资源应答，其中，动画资源应答包括动画资源获取地址；下载模块，用于根据动画资源获取地址下载动画资源；第二响应模块，用于响应于目标页面的打开操作，获取终端的系统时间，以得到第一时间；确定模块，用于在动画资源中确定与第一时间相对应的资源，作为第一资源；显示模块，用于显示目标页面；以及渲染模块，用于在目标页面上渲染第一资源。

为实现上述目的，本发明还提供一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，该处理器执行计算机程序时实现上述方法的步骤。

为实现上述目的，本发明还提供计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述方法的步骤。

本发明提供的动画资源的渲染方法、装置、计算机设备和存储介质，在APP启动操作的触发下，向服务器发送动画资源请求，能够接收到服务器返回的动画资源应答，该动画资源应答包括动画资源获取地址，通过该动画资源获取地址，可下载动画资源，下载的动画资源包括多个动画对应的资源，每个动画与时间相对应，在目标页面打开操作的触发下，获取终端的系统时间，然后可在动画资源中确定与该系统时间对应的资源，最终在显示目标页面后，在目标页面上渲染前述与系统时间对应的资源。通过本发明，响应于APP的启动操作来获取动画资源，无需将动画资源放入安装包，相对于将动画资源通过安装包下发的方式来说，不仅能够减小安装包的大小，提升用户安装APP的体验，而且动画资源可在服务器一端更新，不依赖发版更改动画，能够提高APP版本的迭代速度，进一步，获取的动画资源与时间相关联，对于一次获取的动画资源，在不同时间打开目标页面可以渲染不同的动画，进一步丰富页面显示内容，提升用户体验的同时，减少请求动画资源的次数。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1为本发明实施例一提供的动画资源的渲染方法的流程图；

图2为本发明实施例提供的动画资源的渲染方法中背景图层亮度变化效果图；

图3为本发明实施例提供的动画资源的渲染方法中一种根据转动操作确定转动角度的示意图；

图4为本发明实施例二提供的动画资源的渲染装置的框图；

图5为本发明实施例三提供的计算机设备的硬件结构图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

为了丰富用户使用APP的体验，在APP的页面上进行动画资源的渲染，同时避免动画资源占用APP安装包的空间，本发明提供了一种动画资源的渲染方法、装置、计算机设备和存储介质，在本发明提供的动画资源的渲染方法中，在APP启动时，也即基于APP启动操作的触发，发送动画资源请求至服务器，服务器在接收到动画资源请求时，返回动画资源应答，在动画资源应答中封装动画资源获取地址，APP根据资源获取地址下载动画资源，下载得到的动画资源与时间相关；在APP的目标页面打开时，也即基于目标页面的打开操作的触发，获取终端的系统时间，然后在动画资源中可确定出与系统时间对应的资源，最终在显示目标页面时，渲染上述与系统时间对应的资源。

从中可以看出，在本发明提供的动画资源的渲染方法中，目标页面上渲染的动画资源并不封装在APP的安装包中，而是基于APP的启动操作，实时向服务器请求动画资源，服务器向APP返回动画资源获取地址，APP通过动画资源获取地址获取动画资源，一方面，在启动APP时获取动画资源，动画资源不用占用安装包的体积，用户下载下来的安装包更小，节省安装包下载的流量资源，提升用户安装APP的体验，另一方面，APP的开发维护人员在提供资源的服务器一端更新动画资源，即可实现APP页面上渲染内容的更新，而无需更改APP的逻辑处理过程，简化APP的开发程序。进一步，动画资源与时间相关，在目标页面打开时获取终端的系统时间，基于终端的系统时间确定待渲染的动画，能够随时间变化而使渲染的动画资源相应变化，也即，当用户在不同时间打开目标页面，APP能够渲染出不同的动画，在更加丰富页面动画，提升用户体验的同时，减少请求动画资源的次数。

综上所述，本发明提供的动画资源的渲染方法，各技术特征相互结合，能够实现减小APP安装包、丰富页面动画以及避免多次请求动画资源的技术效果。关于本发明提供的动画资源的渲染方法、装置、计算机设备和存储介质的具体实施例，将在下文中详细描述。

实施例一

本发明实施例提供了一种动画资源的渲染方法，该动画资源的渲染方法应用于APP的前端，通过与后端服务器的交互，实现在APP页面上动态渲染动画的功能，通过该方法，通过APP请求的方式获取动画资源，使得被渲染的动画资源不占用APP安装包的大小，并且既能够丰富页面动画，又能够避免多次请求。具体地，图1为本发明实施例一提供的动画资源的渲染方法的流程图，如图1所示，该实施例提供的动画资源的渲染方法包括如下的步骤S101至步骤S107。

步骤S101：响应于应用程序的启动操作，发送动画资源请求至服务器。

针对应用本发明提供的动画资源的渲染方法的APP，APP的启动操作包括用户启动APP的操作、其他应用程序启动APP的命令以及其他启动APP的命令或操作，在对该启动操作进行响应时，发送动画资源请求至服务器，也就是说，基于该启动操作的触发，发送动画资源请求至服务器，请求动画资源。

步骤S102：接收服务器返回的动画资源应答。

其中，动画资源应答包括动画资源获取地址。

服务器在接收到动画资源请求时，将动画资源获取地址封装在动画资源应答中，返回APP。该动画资源获取地址可以为提供动画资源的服务器的地址，通过访问该地址，即可获得相应的动画资源。

在该步骤S102中，APP接收服务器返回的动画资源应答，能够解析得到动画资源获取地址。

步骤S103：根据动画资源获取地址下载动画资源。

动画资源获取地址为动画资源的存储地址，APP在该动画资源获取地址能够下载到相应的动画资源，在下载到动画资源后，可缓存至本地。

步骤S104：响应于目标页面的打开操作，获取终端的系统时间，以得到第一时间。

目标页面的打开操作包括用户打开目标页面的操作、其他应用程序打开目标页面的命令以及其他打开目标页面的命令或操作，在对该打开操作进行响应时，获取终端当前的系统时间，也就是说，基于该打开操作的触发，获取终端当前的系统时间，为了描述方便，将该步骤中获取到的系统时间命名为第一时间。

步骤S105：在动画资源中确定与第一时间相对应的资源，作为第一资源。

通过步骤S103下载到的动画资源包括多个动画对应的资源，每个动画与时间相关联，通过该步骤S105，能够在该动画资源中确定出与上述第一时间相关联的动画的资源，也即与第一时间相对应的资源，为了描述方便，将该步骤中确定出的资源命名为第一资源。

例如，通过步骤S103下载到的动画资源包括A、B、C和D共四个动画对应的资源，其中A动画对应一天当中的1时-6时，B动画对应一天当中的7时-12时，C动画对应一天当中的13时-18时，D动画对应一天当中的19时-24时；通过步骤S104获取到的第一时间为15时；通过步骤S105，能够在动画资源中确定出与15时相对应的资源为C动画的资源。

步骤S106：显示目标页面。

步骤S107：在目标页面上渲染第一资源。

在该实施例提供的动画资源的渲染方法中，在APP启动操作的触发下，向服务器发送动画资源请求，能够接收到服务器返回的动画资源应答，该动画资源应答包括动画资源获取地址，通过该动画资源获取地址，可下载动画资源，下载的动画资源包括多个动画对应的资源，每个动画与时间相对应，在目标页面打开操作的触发下，获取终端的系统时间，然后可在动画资源中确定与该系统时间对应的资源，最终在显示目标页面后，在目标页面上渲染前述与系统时间对应的资源。采用该实施例提供的动画资源的渲染方法，响应于APP的启动操作来获取动画资源，无需将动画资源放入安装包，相对于将动画资源通过安装包下发的方式来说，不仅能够减小安装包的大小，提升用户安装APP的体验，而且动画资源可在服务器一端更新，不依赖发版更改动画，能够提高APP版本的迭代速度，进一步，获取的动画资源与时间相关联，对于一次获取的动画资源，在不同时间打开目标页面可以渲染不同的动画，进一步丰富页面显示内容，提升用户体验的同时，减少请求动画资源的次数。

可选地，在一种实施例中，第一时间包括日期，目标页面包括第一环形控件，第一环形控件的圆环上等分设置12个星座，在动画资源中确定与第一时间相对应的资源，作为第一资源的步骤包括：确定第一时间对应的星座，作为第一星座；根据星座与资源的对应关系在动画资源中确定与第一星座对应的资源，作为第一资源；显示目标页面的步骤包括：显示第一环形控件，且将第一环形控件的圆环上设置第一星座的部分显示在预设位置。

具体地，按照星座的划分方法，将一年划分为12个时间段，每个时间段对应一个星座，例如，1.20～2.18这一时间段对应的是水瓶座，2.19～3.20这一时间段对应的是双鱼座，基于此，星座与资源的对应关系属于时间与资源的对应关系中的一种。那么，当系统时间包括日期，在获取到一个系统时间时，也即确定一个日期时，即可确定该日期所属的星座，进而可根据星座与资源的对应关系在动画资源中确定此星座对应的资源，也就是说，通过一个系统时间可在动画资源中确定一种资源。基于此，在动画资源中确定与第一时间相对应的资源，作为第一资源时，首先通过第一时间中的日期确定一个星座，再根据星座与资源的对应关系在动画资源中确定与该星座对应的资源，也即第一资源。

此外，为了进一步提升交互体验，设置目标页面包括表征星座的控件，该控件在本发明中被命名为第一环形控件，该第一环形控件的圆环表征一年365天，该圆环被12等分，12等分后的每一部分对应一个星座，也即第一环形控件的圆环上等分设置12个星座。在显示目标页面时，显示该第一环形控件，同时，设定一预设位置，该预设位置可通过不同表现形式标识，将第一环形控件的圆环上设置第一星座的部分显示在预设位置，以通过第一环形控件表征第一时间对应的星座。

采用该实施例提供的动画资源的渲染方法，动画资源包括对应不同星座的资源，在动画资源中可确定当前日期所属的星座所对应资源，在目标页面上渲染动画时，可在目标页面上渲染系统当前日期所属星座对应的动画；此外，通过第一环形控件的不同部分表征对应的星座，在显示目标页面上，可在目标页面上通过过第一环形控件指示系统当前日期所属的星座。也就是说，在打开目标页面时，由第一环形控件指示当前的星座，并在目标页面上播放当前星座对应的动画，提升用户体验。

可选地，在一种实施例中，动画资源的渲染方法还包括如下的步骤：在目标页面上显示第一环形控件后，响应于对第一环形控件的转动操作，根据转动操作控制第一环形控件转动，其中，转动后预设位置内的星座为第二星座；根据星座与资源的对应关系在动画资源中确定与第二星座对应的资源，得到第二资源；在目标页面上渲染第二资源。

具体地，第一环形控件作为可操作控件，用户可对第一环形控件进行转动操作，例如，用户可在第一环形控件的圆环上沿圆环轴向进行滑动，实现对第一环形控件的转动操作，APP响应于该转动操作，也即基于该转动操作的触发，控制第一环形控件的转动，可选地，可设置不同的转动控制逻辑，例如，每接收到一次转动操作，控制第一环形控件转动预设角度；又如，根据用户执行转动操作在终端上滑动轨迹所对应的弧度大小，控制第一环形控件的转动角度等。无论以哪种转动控制逻辑，第一环形控件转动后，将预设位置内的星座定义为第二星座，在动画资源中确定与该第二星座对应的资源，并在目标页面上渲染该第二资源，其中，第二星座可以与第一星座相同，也可以不同。

采用该实施例提供的动画资源的渲染方法，用户可对第一环形控件进行转动操作，并且，当用户对第一环形控件转动后，目标页面上播放预设位置内星座对应的动画，提升APP与用户的互动体验。

可选地，在一种实施例中，根据转动操作控制第一环形控件转动的步骤包括：获取转动操作对应的终端的系统时间，以得到第二时间，其中，第二时间包括时钟；根据第二时间和预置的时间星座模型确定第二星座，其中，时间星座模型的输入参数为系统时间，输出参数为星座；以及控制第一环形控件转动，以使预设位置内的星座为第二星座。

具体地，系统时间包括日期和时钟，获取到当前的系统时间，即可获知当前时间具体为哪天的几时几分；同时，预置一种时间星座模型，该时间星座模型的输入参数为系统时间，输出参数为星座，也即通过该时间星座模型，建立起系统时间与星座的关系，星座可随日时间不同而发生变化，也即不同日期的同一时间，星座可不同，同一日期的不同时间，星座也可不同。在根据转动操作控制第一环形控件转动时，首先获取转动操作对应的终端的系统时间，再将该系统时间输入预置的时间星座模型，即可确定一星座，将该星座作为第二星座。在确定第二星座后，控制第一环形控件进行转动，直到将第一环形控件上表征第二星座的部分转动至预设位置内。

采用该实施例提供的动画资源的渲染方法，基于系统时间来控制第一环形控件进行转动，从而实现用户在不同时间转动第一环形控件时，在目标页面上播放不同星座的动画的目的，APP与用户的互动体验。

可选地，在一种实施例中，目标页面还包括圆形控件，圆形控件与第一环形控件同心设置，动画资源的渲染方法还包括：控制圆形控件与第一环形控件同时转动，且与第一环形控件的转动方向相反；响应于对圆形控件的点击操作，调用预设功能组件。

具体地，目标页面还包括与第一环形控件通信设置的圆形控件，在根据转动操作控制第一环形控件转动的同时，控制圆形控件与第一环形控件同时且反向转动，也即，根据转动操作控制第一环形控件顺时针转动时，控制圆形控件逆时针转动，反之亦然。对该圆形控件的点击操作能够触发预设功能组件的调用。

采用该实施例提供的动画资源的渲染方法，将触发预设功能组件调用行为的操作与对第一环形控件的转动操作相关联，进一步增加APP与用户的互动体验。

可选地，在一种实施例中，目标页面还包括背景图层和第二环形控件，第二环形控件与第一环形控件同心设置，第二环形控件的圆环上等分设置24个小时，动画资源的渲染方法还包括：响应于对第二环形控件的转动操作，确定第二环形控件的转动角度；根据转动角度、角度与红色分量的对应关系、角度与绿色分量的对应关系和角度与蓝色分量的对应关系，分别计算红色分量值、绿色分量值和蓝色分量值；叠加红色分量值、绿色分量值和蓝色分量值得到色值；以及按照色值调整背景图层的亮度。

具体地，设置目标页面包括表征时钟的控件，该控件在本发明中被命名为第二环形控件，该第二环形控件的圆环表征一天24小时，该圆环被24等分，24等分后的每一部分对应一个小时，也即第二环形控件的圆环上等分设置24个小时，该第二环形控件与第一环形控件同心设置。第二环形控件作为可操作控件，用户可对第二环形控件进行转动操作，例如，用户可在第二环形控件的圆环上沿圆环轴向进行滑动，实现对第二环形控件的转动操作，APP响应于该转动操作，也即基于该转动操作的触发，确定第二环形控件的转动角度，可选地，可设置不同的角度确定逻辑，例如，每接收到一次转动操作，确定第二环形控件的转动角度为预设角度；又如，根据用户执行转动操作在终端上滑动轨迹所对应的弧度大小，确定第二环形控件的转动角度等。无论以哪种角度确定逻辑，第二环形控件转动后，可确定第二环形控件的转动角度。

此外，设置目标页面包括背景图层，基于第二环形控件的转动角度，可对背景图层的亮度进行调整，具体地，预置角度与不同颜色分量的对应关系，在确定第二环形控件的转动角度后，根据转动角度、角度与红色分量的对应关系、角度与绿色分量的对应关系和角度与蓝色分量的对应关系，分别计算得到红色分量值、绿色分量值和蓝色分量值，然后再将红色分量值、绿色分量值和蓝色分量值叠加而得到色值，最后按照色值调整背景图层的亮度。

采用该实施例提供的动画资源的渲染方法，设置表征时钟的第二环形控件，对第二环形控件的转动操作可确定第二环形控件的转动角度，该转动角度作为背景图层亮度变化的因变量，提升用户操作的便利性和交互体验；根据角度与红色分量的对应关系、角度与绿色分量的对应关系和角度与蓝色分量的对应关系，分别计算得到红色分量值、绿色分量值和蓝色分量值，最后将三原色分量值叠加为色值，对背景进行调整，能够在调整背景图层色值时单独计算不同颜色分量值的大小，以便能够对不同颜色进行单独控制，达到灵活控制色值中三原色配比的效果，进而实现在改变背景图层亮度变化的同时不改变页面颜色色系的目的，提升页面显示效果。并且，基于对背景图层亮度的调整，既能够调整目标页面的亮度，又不影响目标页面的正常显示，相对调整目标页面的整体亮度而言，能够避免对目标页面中图像颜色显示的影响。

可选地，在一种实施例中，对第二环形控件的转动操作可以为在目标页面上进行的滑动操作，随着用户手指滑动，第二环形控件轮回滚动0度至360度，对应的时间为0时至24时，对应的页面亮度为第一色值至第二色值，背景图层为星空时，通过设置第一色值和第二色值，可实现星空色值随时间而变化，体现出由天黑至天亮再至天黑的效果，提升用户体验。

可选地，在一种实施例中，转动角度由0度至180度时，背景图层的亮度由第一色值至第二色值，转动角度由0度至180度时，背景图层的亮度由第二色值至第一色值，其中，第一色值和第二色值为不同的色值。

具体而言，转动角度由0度变化至180度再至360度，实现一个圆的变化时，背景图层的亮度对应由第一色值变化至第二色值再返回至第一色值。图2为本发明实施例提供的动画资源的渲染方法中背景图层亮度变化效果图，如图2所示，第一色值为RGB(红色分量值、绿色分量值和蓝色分量值)：0,0,0；第二色值为RGB：24,78,129。

采用该实施例提供的动画资源的渲染方法，设定第一色值和第二色值后，通过转动第二环形控件的操作，可方便的由第一色值逐渐调整至第二色值，再由第二色值逐渐返回至第一色值，使得亮度变化更顺滑。

可选地，在一种实施例中，采用以下公式分别计算红色分量值R、绿色分量值G和蓝色分量值B：R＝a*θ²，G＝b*θ²，B＝c*θ²，其中，θ为转动角度，a＝R₀/180²，b＝G₀/180²，c＝B₀/180²，R₀、G₀、B₀依次为第二色值中的红色分量值、绿色分量值和蓝色分量值。

具体而言，请继续参考图2，转动角度在0度至180之间变化时，与转动角度在180度至360度之间变化时，产生页面亮度的变化的色值大小对称，因而，只需要计算0度至180之间角度与各颜色色值变化的关系即可。在一种实施例中，转动角度在0度至180之间变化时，亮度对应的色值为#000000～#184E81，也即第一色值为#000000，第二色值为#184E81，第二色值对应的十进制数值RGB：24，78，129，同时，为满足亮度调整时不改变色系的色值变化要求，当角度为90度时，色值对应的十进制数值RGB：6，15，30。在此基础上，为得到转动角度与色值变化的关系，转动角度与色值构成的二维坐标分别为：

转动角度与红色分量R的二维坐标：(0,0)；(90,6)；(180,24)；

转动角度与绿色分量G的二维坐标：(0,0)；(90,15)；(180,78)；

转动角度与蓝色分量B的二维坐标：(0,0)；(90,30)；(180,129)。

其中，对于转动角度与红色分量R的二维坐标：(0,0)；(90,6)；(180,24)，拟合后的连接曲线接近于一个二次函数曲线，同时又经过原点(0,0)，因而设转动角度与红色分量R的关系函数为R＝a*θ²，将点(180,24)代入R＝a*θ²，即可得到a＝24/180²＝0.00074074f。

同理，转动角度与绿色分量G的关系函数为G＝b*θ²，将点(180,78)代入G＝b*θ²，即可得到b＝78/180²＝0.00240741f。

同理，转动角度与蓝色分量B的关系函数为B＝c*θ²，将点(180,129)代入G＝c*θ²，即可得到c＝129/180²＝0.00398148f。

其中，第一色值、第二色值和/或色值变换要求发生变化时，a、b、c的值相应发生变化。

可选地，在一种实施例中，转动操作包括在页面上由点A(x_a,y_a)沿曲线滑动至点B(x_b,y_b)的第一转动操作，采用以下公式确定第一转动操作对应的转动角度θ：θ＝arcsin(|BB₁|/|BO|)-arcsin(|AA₁|/|AO|)，其中，点O为预设中心点，点O的坐标为(x_o,y_o)，点B1的坐标为(x_o-x_b，y_o-y_b)，点A1的坐标为(x_o-x_a，y_o–y_a)，|BB₁|为点B至点B1的距离，|BO|为点B至点O的距离，|AA₁|为点A至点A1的距离，|AO|为点A至点O的距离。

具体而言，转动操作为一种滑动操作，根据滑动位置确定转动角度。图3为本发明实施例提供的动画资源的渲染方法中一种根据转动操作确定转动角度的示意图，如图3所示，用户由点A(x_a,y_a)沿曲线滑动至点B(x_b,y_b)时，当用户与终端的接触点在点A(x_a,y_a)，点A(x_a,y_a)相对预设中心点O(x_o,y_o)的相对参考点为A1(x_o-x_a，y_o–y_a)，根据点A至点A1的距离|AA₁|与点A至点O之间的距离|AO|，可以计算出点A相对预设中心点的角度θ_a＝arcsin(|AA₁|/|AO|)；当用户与终端的接触点在点B(x_b,y_b)，点B(x_b,y_b)相对预设中心点O(x_o,y_o)的相对参考点为B1(x_o-x_b，y_o-y_b)，根据点B至点B1的距离|BB₁|与点B至点O之间的距离|BO|，可以计算出点B相对预设中心点的角度θ_b＝arcsin(|BB₁|/|BO|)，则θ＝θ_b-θ_a即为转动操作对应的转动角度。

可选地，在一种实施例中，在发送动画资源请求至服务器的步骤之前，接收应用程序的启动操作的步骤之后，动画资源的渲染方法还包括：获取应用程序的版本信息；根据版本信息封装动画资源请求，其中，服务器用于根据版本信息确定动画资源获取地址。

具体地，APP在接收到应用程序的启动操作之后，获取当前的版本信息，将当前的版本信息封装在动画资源请求中，发送至服务器，服务器在确定动画资源获取地址时，根据版本信息确定，例如，当前版本信息为最高版本信息时，确定动画资源获取地址为最高版本对应的资源获取地址，当前版本信息为较低版本信息时，确定动画资源获取地址为较低版本对应的资源获取地址。

采用该实施例提供的动画资源的渲染方法，获取到的动画资源与APP的当前版本信息相对应，能够使得动画资源随APP的版本进行更新，使得动画资源与APP的版本保持统一，有利于APP整体风格的统一。

实施例二

对应于上述实施例一，本发明实施例二提供了一种动画资源的渲染装置，该动画资源的渲染装置应用于APP的前端，通过与后端服务器的交互，实现在APP页面上动态渲染动画的功能，通过该装置，通过APP请求的方式获取动画资源，使得被渲染的动画资源不占用APP安装包的大小，并且既能够丰富页面动画，又能够避免多次请求。需要说明的时，该实施例二的技术特征与上述事实例一中的技术特征和相应的技术效果相同，相关内容在该实施例中不再详述，具体可参考上文。图4为本发明实施例二提供的动画资源的渲染装置的框图，如图4所示，该装置包括：第一响应模块201、接收模块202、下载模块203、第二响应模块204、第一确定模块205、显示模块206和渲染模块207。

其中，第一响应模块201用于响应于应用程序的启动操作，发送动画资源请求至服务器；接收模块202用于接收服务器返回的动画资源应答，其中，动画资源应答包括动画资源获取地址；下载模块203用于根据动画资源获取地址下载动画资源；第二响应模块204用于响应于目标页面的打开操作，获取终端的系统时间，以得到第一时间；第一确定模块205用于在动画资源中确定与第一时间相对应的资源，作为第一资源；显示模块206用于显示目标页面；以及渲染模块207用于在目标页面上渲染第一资源。

可选地，在一种实施例中，第一时间包括日期，目标页面包括第一环形控件，第一环形控件的圆环上等分设置12个星座，第一确定模块205在动画资源中确定第一资源时，具体执行的步骤包括：确定第一时间对应的星座，作为第一星座；根据星座与资源的对应关系在动画资源中确定与第一星座对应的资源，作为第一资源；显示模块206显示目标页面时，具体执行的步骤包括：显示第一环形控件，且将第一环形控件的圆环上设置第一星座的部分显示在预设位置。

可选地，在一种实施例中，该动画资源的渲染装置还包括：第三响应模块，用于响应于对第一环形控件的转动操作，根据转动操作控制第一环形控件转动，其中，转动后预设位置内的星座为第二星座；第二确定模块，用于根据星座与资源的对应关系在动画资源中确定与第二星座对应的资源，得到第二资源；渲染模块207还用于在目标页面上渲染第二资源。

可选地，在一种实施例中，第三响应模块在根据转动操作控制第一环形控件转动时，具体执行的步骤包括：获取转动操作对应的终端的系统时间，以得到第二时间，其中，第二时间包括时钟；根据第二时间和预置的时间星座模型确定第二星座，其中，时间星座模型的输入参数为系统时间，输出参数为星座；以及控制第一环形控件转动，以使预设位置内的星座为第二星座。

可选地，在一种实施例中，目标页面还包括圆形控件，圆形控件与第一环形控件同心设置，动画资源的渲染装置还包括：控制模块，用于控制圆形控件与第一环形控件同时转动，且与第一环形控件的转动方向相反；第四响应模块，用于响应于对圆形控件的点击操作，调用预设功能组件。

可选地，在一种实施例中，目标页面还包括背景图层和第二环形控件，第二环形控件与第一环形控件同心设置，第二环形控件的圆环上等分设置24个小时，动画资源的渲染装置还包括：第四响应模块，用于响应于对第二环形控件的转动操作，确定第二环形控件的转动角度；计算模块，用于根据转动角度、角度与红色分量的对应关系、角度与绿色分量的对应关系和角度与蓝色分量的对应关系，分别计算红色分量值、绿色分量值和蓝色分量值，叠加红色分量值、绿色分量值和蓝色分量值得到色值；以及调整模块，用于按照色值调整背景图层的亮度。

可选地，在一种实施例中，动画资源的渲染装置还包括获取模块和封装模块，其中，获取模块用于在发送动画资源请求至服务器之前，接收应用程序的启动操作之后，获取应用程序的版本信息，封装模块用于根据版本信息封装动画资源请求，其中，服务器用于根据版本信息确定动画资源获取地址。

实施例三

本实施例还提供一种计算机设备，如可以执行程序的智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。如图5所示，本实施例的计算机设备01至少包括但不限于：可通过系统总线相互通信连接的存储器011、处理器012，如图5所示。需要指出的是，图5仅示出了具有组件存储器011和处理器012的计算机设备01，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

本实施例中，存储器011(即可读存储介质)包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器011可以是计算机设备01的内部存储单元，例如该计算机设备01的硬盘或内存。在另一些实施例中，存储器011也可以是计算机设备01的外部存储设备，例如该计算机设备01上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，存储器011还可以既包括计算机设备01的内部存储单元也包括其外部存储设备。本实施例中，存储器011通常用于存储安装于计算机设备01的操作系统和各类应用软件，例如实施例二的动画资源的渲染装置的程序代码等。此外，存储器011还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器012在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器012通常用于控制计算机设备01的总体操作。本实施例中，处理器012用于运行存储器011中存储的程序代码或者处理数据，例如动画资源的渲染方法。

实施例四

本实施例还提供一种计算机可读存储介质，如闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘、服务器、App应用商城等等，其上存储有计算机程序，程序被处理器执行时实现相应功能。本实施例的计算机可读存储介质用于存储动画资源的渲染装置，被处理器执行时实现实施例一的动画资源的渲染方法。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种动画资源的渲染方法，其特征在于，包括：

响应于应用程序的启动操作，发送动画资源请求至服务器；

接收所述服务器返回的动画资源应答，其中，所述动画资源应答包括动画资源获取地址；

根据所述动画资源获取地址下载动画资源；

响应于目标页面的打开操作，获取终端的系统时间，以得到第一时间；

在所述动画资源中确定与所述第一时间相对应的资源，作为第一资源；

显示所述目标页面；以及

在所述目标页面上渲染所述第一资源。

2.根据权利要求1所述的动画资源的渲染方法，其特征在于，所述第一时间包括日期，所述目标页面包括第一环形控件，所述第一环形控件的圆环上等分设置12个星座，

在所述动画资源中确定与所述第一时间相对应的资源，作为第一资源的步骤包括：确定所述第一时间对应的星座，作为第一星座；根据星座与资源的对应关系在所述动画资源中确定与所述第一星座对应的资源，作为所述第一资源；

显示所述目标页面的步骤包括：显示所述第一环形控件，且将所述第一环形控件的圆环上设置所述第一星座的部分显示在预设位置。

3.根据权利要求2所述的动画资源的渲染方法，其特征在于，还包括：

响应于对所述第一环形控件的转动操作，根据所述转动操作控制所述第一环形控件转动，其中，转动后所述预设位置内的星座为第二星座；

根据所述星座与资源的对应关系在所述动画资源中确定与所述第二星座对应的资源，得到第二资源；

在所述目标页面上渲染所述第二资源。

4.根据权利要求3所述的动画资源的渲染方法，其特征在于，根据所述转动操作控制所述第一环形控件转动的步骤包括：

获取所述转动操作对应的所述终端的系统时间，以得到第二时间，其中，所述第二时间包括时钟；

根据所述第二时间和预置的时间星座模型确定所述第二星座，其中，所述时间星座模型的输入参数为所述系统时间，输出参数为星座；以及

控制所述第一环形控件转动，以使所述预设位置内的星座为所述第二星座。

5.根据权利要求4所述的动画资源的渲染方法，其特征在于，

所述目标页面还包括圆形控件，所述圆形控件与所述第一环形控件同心设置，所述动画资源的渲染方法还包括：

控制所述圆形控件与所述第一环形控件同时转动，且与所述第一环形控件的转动方向相反；

响应于对所述圆形控件的点击操作，调用预设功能组件。

6.根据权利要求2所述的动画资源的渲染方法，其特征在于，所述目标页面还包括背景图层和第二环形控件，所述第二环形控件与所述第一环形控件同心设置，所述第二环形控件的圆环上等分设置24个小时，所述动画资源的渲染方法还包括：

响应于对所述第二环形控件的转动操作，确定所述第二环形控件的转动角度；

根据所述转动角度、角度与红色分量的对应关系、角度与绿色分量的对应关系和角度与蓝色分量的对应关系，分别计算红色分量值、绿色分量值和蓝色分量值；

叠加所述红色分量值、所述绿色分量值和所述蓝色分量值得到色值；以及

按照所述色值调整所述背景图层的亮度。

7.根据权利要求1所述的动画资源的渲染方法，其特征在于，在发送动画资源请求至服务器的步骤之前，接收应用程序的启动操作的步骤之后，所述动画资源的渲染方法还包括：

获取所述应用程序的版本信息；

根据所述版本信息封装所述动画资源请求，其中，所述服务器用于根据所述版本信息确定所述动画资源获取地址。

8.一种动画资源的渲染装置，其特征在于，包括：

第一响应模块，用于响应于应用程序的启动操作，发送动画资源请求至服务器；

接收模块，用于接收所述服务器返回的动画资源应答，其中，所述动画资源应答包括动画资源获取地址；

下载模块，用于根据所述动画资源获取地址下载动画资源；

第二响应模块，用于响应于目标页面的打开操作，获取终端的系统时间，以得到第一时间；

确定模块，用于在所述动画资源中确定与所述第一时间相对应的资源，作为第一资源；

显示模块，用于显示所述目标页面；以及

渲染模块，用于在所述目标页面上渲染所述第一资源。

9.一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7任一项所述方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现权利要求1至7任一项所述方法的步骤。

Images