图像动态展示的方法、装置、系统及介质制造方法及图纸

本公开提供了一种图像动态展示的方法。所述方法包括获取图像的静态要素、动态要素、和所述动态要素的动态参数，展示所述静态要素，以及根据所述动态参数，动态更新所述动态要素的展示。其中根据所述动态参数，动态更新所述动态要素的展示，包括以当前动态参数开始，循环执行如下操作直到当前动态参数与目标动态参数一致：按照所述当前动态参数绘制所述动态要素，展示所述动态要素，以及以所述当前动态参数加上预定变化量来更新所述当前动态参数。本公开还提供了一种图像动态展示的装置、系统及介质。

【技术实现步骤摘要】
图像动态展示的方法、装置、系统及介质
本公开涉及互联网
，更具体地，涉及一种图像动态展示的方法、装置、系统及介质。
技术介绍
在终端设备的用户界面上，时常会遇到一些需要通过动画效果动态地展现图像，以体现出数据的变化和/或变迁过程，以此方式来提升用户的交互体验。现有技术中，为实现图像动态展示往往需要编写大量代码，其中在一些非动画的场景下会直接用图片代替代码。在实现本公开构思的过程中，专利技术人发现现有技术中至少存在如下问题：往往会存在大量冗余代码，而且如果用图片的话会无法满足例如实时更新之类的应用场景的需求。
技术实现思路
有鉴于此，本公开提供了一种能够在一定程度上极大的减少重复开发大量冗余代码、并提高用户界面展示效率的图像动态展示的方法、装置、系统及介质。本公开的一个方面提供了一种图像动态展示的方法。所述方法包括获取图像的静态要素和动态要素、以及所述动态要素的动态参数，其中所述动态参数包括当前动态参数和目标动态参数，展示所述静态要素，以及根据所述动态参数，动态更新所述动态要素的展示。其中根据所述动态参数，动态更新所述动态要素的展示包括以所述当前动态参数开始，循环执行如下操作直到所述当前动态参数与所述目标动态参数一致：按照所述当前动态参数绘制所述动态要素，展示所述动态要素，以及以所述当前动态参数加上预定变化量来更新所述当前动态参数。根据本公开的实施例，获取的所述当前动态参数为零，或者获取的所述当前动态参数为接收到图像更新指令时所述图像中的动态参数。根据本公开的实施例，所述方法还包括绘制所述静态要素和所述动态要素，以及存储所述静态要素和所述动态要素。根据本公开的实施例，所述方法应用于canvas。根据本公开的实施例，所述静态要素和所述动态要素绘制于所述canvas的不同层。根据本公开的实施例，所述图像包括弧形进度条。所述弧形进度条的静态要素包括背景条，以及所述弧形进度条的动态要素包括进度条。其中，所述进度条沿所述背景条所限定的区域伸展，与所述背景条具有相同的起点，以及所述动态参数包括所述进度条在所述背景条中伸展的百分率。本公开的另一方面提供了一种图像动态展示的装置。所述装置包括获取模块、第一展示模块和第二展示模块。获取模块用于获取图像的静态要素和动态要素、以及所述动态要素的动态参数，其中所述动态参数包括当前动态参数和目标动态参数。第一展示模块用于展示所述静态要素。第二展示模块用于根据所述动态参数，动态更新所述动态要素的展示，包括以所述当前动态参数开始，循环执行如下操作直到所述当前动态参数与所述目标动态参数一致：按照所述当前动态参数绘制所述动态要素，展示所述动态要素，以及以所述当前动态参数加上预定变化量来更新所述当前动态参数。根据本公开的实施例，获取的所述当前动态参数为零，或者获取的所述当前动态参数为接收到图像更新指令时所述图像中的动态参数。根据本公开的实施例，所述装置还包括绘制模块和存储模块。绘制模块用于绘制所述静态要素和所述动态要素。存储模块用于存储所述静态要素和所述动态要素。根据本公开的实施例，所述静态要素和所述动态要素绘制于canvas的不同层。根据本公开的实施例，所述图像包括弧形进度条，所述弧形进度条的静态要素包括背景条，以及所述弧形进度条的动态要素包括进度条。其中，所述进度条沿所述背景条所限定的区域伸展，与所述背景条具有相同的起点，并且所述动态参数包括所述进度条在所述背景条中伸展的百分率。本公开的另一方面提供了一种图像动态展示的系统。所述系统包括一个或多个处理器，以及用于存储一个或多个程序的存储装置。其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器执行如上所述的图像动态展示的方法。本公开的另一方面提供了一种计算机可读介质，其上存储有可执行指令。该指令被处理器执行时使处理器执行如上所述的图像动态展示的方法。本公开的另一方面提供了一种计算机程序。所述计算机程序包括计算机可执行指令。所述指令在被执行时用于实现如上所述的图像动态展示的方法。根据本公开的实施例，在用户界面展示中，对于图像中不会变化的静态要素，可以仅一次配置保存好，并在每次图像展示中直接调用并展示。而对于图像中另一部分会随时间或其他因素发生变化的动态要素(例如实时更新的进度条、随用户资料填写情况而改变的用户资料完善度显示条、实时变化的倒计时指针等)，则在每次图像展示时，根据该动态要素的动态参数动态连续更新其展示从而实现动画效果。这样能够在实现图像动态展示效果的同时，提高代码的利用率，简单易行，避免重复开发。根据本公开的实施例，可以至少部分地减少在实现图像动态展示的过程中重复开发的代码，解决在业务支持过程中多次开发带来的造成资源浪费问题，并因此可以实现高效快速地用户界面展示的技术效果。附图说明通过以下参照附图对本公开实施例的描述，本公开的上述以及其他目的、特征和优点将更为清楚，在附图中：图1示意性示出了根据本公开实施例的图像动态展示的方法和装置的系统架构；图2A和图2B示意性示出了根据本公开实施例的图像动态展示的方法的流程图；图3示意性示出了根据本公开另一实施例的图像动态展示的方法的流程图；图4A示意性示出了根据本公开实施例的弧形进度条的展示示例；图4B示意性示出了根据本公开实施例的弧形进度条的一个应用实例；图5示意性示出了根据本公开实施例的弧形进度条的绘制示意；图6示意性示出了根据本公开实施例的图像动态展示的装置的框图；以及图7示意性示出了根据本公开实施例的适于实现图像动态展示的计算机系统的方框图。具体实施方式以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。在使用类似于“A、B或C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B或C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。本领域技术人员还应理解，实质上任意表示两个或更多可选项目的转折连词和/或短语，无论是在说明书、权利要求书还是附图中，都应被理解为本文档来自技高网...

【技术保护点】
1.一种图像动态展示的方法，包括：获取图像的静态要素和动态要素、以及所述动态要素的动态参数，其中所述动态参数包括当前动态参数和目标动态参数；展示所述静态要素；以及根据所述动态参数，动态更新所述动态要素的展示，包括以所述当前动态参数开始，循环执行如下操作直到所述当前动态参数与所述目标动态参数一致：按照所述当前动态参数绘制所述动态要素；展示所述动态要素；以及以所述当前动态参数加上预定变化量来更新所述当前动态参数。

【技术特征摘要】
1.一种图像动态展示的方法，包括：获取图像的静态要素和动态要素、以及所述动态要素的动态参数，其中所述动态参数包括当前动态参数和目标动态参数；展示所述静态要素；以及根据所述动态参数，动态更新所述动态要素的展示，包括以所述当前动态参数开始，循环执行如下操作直到所述当前动态参数与所述目标动态参数一致：按照所述当前动态参数绘制所述动态要素；展示所述动态要素；以及以所述当前动态参数加上预定变化量来更新所述当前动态参数。2.根据权利要求1所述的方法，其中：获取的所述当前动态参数为零；或者获取的所述当前动态参数为接收到图像更新指令时所述图像中的动态参数。3.根据权利要求1所述的方法，还包括：绘制所述静态要素和所述动态要素；以及存储所述静态要素和所述动态要素。4.根据权利要求1所述的方法，其中，所述方法应用于canvas。5.根据权利要求4所述的方法，其中，所述静态要素和所述动态要素绘制于所述canvas的不同层。6.根据权利要求1所述的方法，其中，所述图像包括弧形进度条，所述弧形进度条的静态要素包括背景条；所述弧形进度条的动态要素包括进度条，其中：所述进度条沿所述背景条所限定的区域伸展，与所述背景条具有相同的起点；以及，所述动态参数包括所述进度条在所述背景条中伸展的百分率。7.一种图像动态展示的装置，包括：获取模块，用于获取图像的静态要素和动态要素、以及所述动态要素的动态参数，其中所述动态参数包括当前动态参数和目标动态参数；第一展示模块，用于展示所述静...

【专利技术属性】
技术研发人员：李东华，
申请(专利权)人：北京京东金融科技控股有限公司，
类型：发明
国别省市：北京,11