CN109144655B - 图像动态展示的方法、装置、系统及介质 - Google Patents

Abstract

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

Description

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

技术领域

本公开涉及互联网技术领域，更具体地，涉及一种图像动态展示的方法、装置、系统及介质。

背景技术

在终端设备的用户界面上，时常会遇到一些需要通过动画效果动态地展现图像，以体现出数据的变化和/或变迁过程，以此方式来提升用户的交互体验。现有技术中，为实现图像动态展示往往需要编写大量代码，其中在一些非动画的场景下会直接用图片代替代码。

在实现本公开构思的过程中，发明人发现现有技术中至少存在如下问题：往往会存在大量冗余代码，而且如果用图片的话会无法满足例如实时更新之类的应用场景的需求。

发明内容

有鉴于此，本公开提供了一种能够在一定程度上极大的减少重复开发大量冗余代码、并提高用户界面展示效率的图像动态展示的方法、装置、系统及介质。

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

根据本公开的实施例，获取的所述当前动态参数为零，或者获取的所述当前动态参数为接收到图像更新指令时所述图像中的动态参数。

根据本公开的实施例，所述方法还包括绘制所述静态要素和所述动态要素，以及存储所述静态要素和所述动态要素。

根据本公开的实施例，所述方法应用于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的系统等)。本领域技术人员还应理解，实质上任意表示两个或更多可选项目的转折连词和/或短语，无论是在说明书、权利要求书还是附图中，都应被理解为给出了包括这些项目之一、这些项目任一方、或两个项目的可能性。例如，短语“A或B”应当被理解为包括“A”或“B”、或“A和B”的可能性。

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

根据本公开的实施例，在用户界面展示中，对于图像中不会变化的静态要素，可以仅一次配置保存好，并在每次图像展示中直接调用并展示。而对于图像中另一部分会随时间或其他因素发生变化的动态要素(例如实时更新的进度条、随用户资料填写情况而改变的用户资料完善度显示条、实时变化的倒计时指针等)，则在每次图像展示时，根据该动态要素的动态参数动态连续更新其展示从而实现动画效果。这样能够在实现图像动态展示效果的同时，提高代码的利用率，简单易行，避免重复开发。

根据本公开的实施例，可以至少部分地减少在实现图像动态展示的过程中重复开发的代码，解决在业务支持过程中多次开发带来的造成资源浪费问题，并因此可以实现高效快速地用户界面展示的技术效果。

图1示意性示出了根据本公开实施例的图像动态展示的方法和装置的系统架构100。需要注意的是，图1所示仅为可以应用本公开实施例的系统架构的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他设备、系统、环境或场景。

如图1所示，根据该实施例的系统架构100可以包括终端设备101、 102、103，网络104和服务器105。网络104用以在终端设备101、102、 103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105 交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。在终端设备101、102、103的用户界面上，可以显示具有动态效果的图像。该具有动态效果的图像可以是由终端设备101、102、103从服务器105接收的图像数据，也可以是终端设备 101、102、103本身存储的图像数据。根据本公开的实施例，该图像动态展示的方法可以应用于抢票进度、倒计时、个人资料完善进度、用户等级进度等展示场景。

服务器105可以是提供各种服务的服务器，例如对用户利用终端设备101、102、103所浏览的网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的用户请求等数据进行分析等处理，并将处理结果(例如根据用户请求获取或生成用于动态展示图像的静态要素、动态要素、以及动态要素的动态参数等)反馈给终端设备。

需要说明的是，本公开实施例所提供的图像动态展示的方法一般可以由服务器105执行。相应地，本公开实施例所提供的图像动态展示的装置一般可以设置于服务器105中。或者，本公开实施例所提供的图像动态展示的方法可以由终端设备101、102、103执行。相应地，本公开实施例所提供的图像动态展示的装置可以设置于终端设备101、 102、103中。或者，本公开实施例所提供的图像动态展示的方法也可以由不同于服务器105且能够与终端设备101、102、103和/或服务器 105通信的服务器或服务器集群执行。相应地，本公开实施例所提供的图像动态展示的装置也可以设置于不同于服务器105且能够与终端设备101、102、103和/或服务器105通信的服务器或服务器集群中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

图2A和图2B示意性示出了根据本公开实施例的图像动态展示的方法的流程图。其中图2B示意出了图2A中操作S203的实现过程。

如图2A和2B所示，该图像动态展示的方法包括操作S201～操作 S203，其中操作S203具体可以包括操作S213～操作S243。

在操作S201，获取图像的静态要素和动态要素、以及该动态要素的动态参数，其中该动态参数包括当前动态参数和目标动态参数。该目标动态参数，可以是在本次图像展示中该动态要素中的动态参数需要达到的值。例如，在展示个人资料完善进度时，该目标动态参数可以是在进行本次图像展示时个人资料的完成百分率。

然后，在操作S202，展示该静态要素。

在操作S203，根据该动态参数，动态更新所述动态要素的展示。具体地，操作S203的实现过程如图2B所示。首先在操作S213，按照该当前动态参数绘制该动态要素。然后在操作S223，展示该动态要素。接着在操作S233，以当前动态参数加上预定变化量来更新当前动态参数。在操作S243，判断更新后的当前动态参数与目标动态参数是否一致。如果一致，则结束对该动态要素的动态更新；否则重新执行操作 S213～操作S243。可以理解的是，操作S233中的预定变化量可以是正数，也可以是负数。

操作S203中动态更新该动态要素具体为循环执行对该动态要素的绘制、展示、以及更新当前动态参数，循环的终止条件为当前动态参数与目标动态参数一致。以此方式，通过对动态要素的一遍遍重绘，并且每次重绘后，由于当前动态参数与前一次的不同而导致展示效果的差异，从而展示出图像的变化或变迁过程，从而实现图像展示的动画效果实现。

根据本公开的实施例，在操作S201中获取的当前动态参数为零，或者，在操作S201中获取的该当前动态参数为接收到图像更新指令时该图像中的动态参数。当操作S201中获取的当前动态参数为零，从而在操作S203中对动态要素的展示是从动态参数为零的状态开始一遍遍重绘和展示。与之不同的是，当操作S201中获取的该当前动态参数为接收到图像更新指令时该图像中的动态参数，则在操作S203中对动态要素的展示是该动态要素的上一次展示状态开始一遍遍重绘和展示。两种不同的动态展示效果可以根据实际需要自由选择。

根据本公开的实施例，在用户界面展示中，区分出图像中每次展示都不会发生变化的静态要素(例如背景图像等)、以及在不同次的展示中会变化的动态要素。然后在实现动画效果时，可以对静态要素和动态要素分别进行展示。具体地，对于动态要素可以进行动态更新展示，从而能够实现高效快速地用户界面展示。

更进一步地，根据本公开的实施例，对于图像中不会变化的静态要素，可以仅一次配置保存好，并在每次图像展示中直接调用并展示。而对于图像中另一部分会随时间或其他因素发生变化的动态要素，则在每次图像展示时，根据该动态要素的动态参数动态连续更新其展示从而实现动画效果。这样能够在实现图像动态展示效果的同时，提高代码的利用率，简单易行，避免重复开发。

根据本公开的实施例，该图像动态展示的方法可以应用于canvas。 canvas是HTML元素，是为了客户端矢量图形而设计的。canvas自已没有行为，但却把一个绘图应用程序接口(API)展现给客户端 JavaScript脚本，以使JavaScript脚本能够把想绘制的东西都绘制到一块canvas画布上。canvas和SVG(Scalable Vector Graphics，可缩放矢量图形)以及VML(Vector Makeup Language，矢量可标记语言)之间的一个重要的不同是，canvas有一个基于JavaScript的绘图应用程序接口API。而SVG和VML使用一个XML文档来描述绘图。利用canvas中的各种接口(或者称之为函数)在用户界面UI(User Interface)展示中，对于图像中的静态要素，可以仅一次配置保持好，等待调用。另一部分会随时间发生变化的动态要素，则在每次显示时对引起变化的参数进行重新配置。这样能够提高代码的利用率，简单易行，避免重复开发。

在canvas中实现本公开实施例的图像动态展示方法时，核心代码中可以运用了save方法和restore方法，分别是用来保存和恢复canvas 状态的，都没有参数。canvas状态就是当前画面应用的所有样式和变形的一个快照。canvas状态是以堆栈(stack)的方式保存的。每一次调用save方法，当前的canvas状态就会被推入堆中保存起来。每一次调用restore方法，上一个保存的canvas状态就从堆栈中弹出，所有设定都恢复。在每一次图像动态展示的过程中，利用clearRect()方法不断清空画板，然后重绘并展示，可通过配执行时间控制动效快慢。

根据本公开的实施例，该静态要素和该动态要素绘制于该canvas 的不同层。该静态要素和该动态要素分别绘制在canvas的不同层，可以互不影响，便于实现独立的绘制、调用和展示。在canvas中，因为要进行多层绘制，故必须调用beginPath用来开始一个新的路径层，如果不加就表示在原来路径层上绘制。通过beginPath这样的方式，将不同层进行拆分绘制，互不影响。另外，调用beginPath后，要进行闭合操作。如果不需要路径闭合，closePath可以不用，如果使用了fill则路径则会自动闭合。

图3示意性示出了根据本公开另一实施例的图像动态展示的方法的流程图。

如图3所示，根据本公开的实施例，该图像动态展示的方法除了包括操作S201～操作S203以外，还可以包括操作S301和操作S302。在操作S301，绘制静态要素和动态要素。在绘制该动态要素的过程中，设置该动态要素的动态参数的传入接口，以作为进行图像动态展示时的反复重绘和展示的循环起始和终止条件。然后，在操作S302，存储该静态要素和该动态要素。以此方式，在需要进行图像展示时，对应调用该静态要素和动态要素(操作S201)，并对应展示该静态要素(操作S202)以及，根据操作S201中获取到的动态参数动态更显该动态要素的展示(操作S203)。

根据本公开的实施例，在业务开发过程中，对于图像中的静态要素可以仅一次配置保存好，并在每次图像展示中直接调用并展示，对于图像中的动态要素，可以在开发之初绘制动态要素的基本元素，并设置或指定会动态变化的该动态要素的动态参数的传入接口，然后在每次图像展示时，根据该动态要素的动态参数动态连续更新其展示从而实现动画效果。通过这种方式，可以至少部分地减少在实现图像动态展示的过程中重复开发的代码，解决在业务支持过程中多次开发带来的造成资源浪费问题，并因此可以实现高效快速地用户界面展示的技术效果。

根据本公开的实施例，该图像动态展示方法中的图像包括弧形进度条，所述弧形进度条的静态要素包括背景条，所述弧形进度条的动态要素包括进度条。其中，该进度条沿所述背景条所限定的区域伸展，与该背景条具有相同的起点。该动态参数包括所述进度条在所述背景条中伸展的百分率。通过该动态参数可以确定该进度条的终点位置。具体地，该弧形进度条的视觉效果示例可以参见图4A和图4B的示例。

图4A示意性示出了根据本公开实施例的弧形进度条401的展示示例。图4B示意性示出了根据本公开实施例的弧形进度条401的一个应用实例。

在图4A中展示了该弧形进度条401在T0和T1的不同时刻的展示画面。

以该动态参数为进度条在该背景条中伸展的百分率为例进行说明。在T0时刻，该进度条在该背景条中伸展的百分率为0％，该进度条的终点位置与起点位置重合，均位于该背景条的起点，因此在用户界面上仅可以看到背景条而看不到进度条。在T1时刻，该进度条在该背景条中伸展的百分率为14％动态参数，从而该进度条从起点开始的覆盖了该背景条14％的面积。

假设T0时刻到T1时刻为该弧形进度条401的一次动态展示过程，即在T0时刻接收到一图像更新展示指令，然后在T1时刻完成本次动态展示。根据本公开的实施例，T0时刻获得的当前动态参数为0％，目标动态参数为14％。在当前动态参数从0％加上预定变化量逐步更新到达14％的期间(即，T1-T0时间内)，在展示该背景条的同时不断动态更新该进度条的展示，最终实现了该弧形进度条401从T0时刻逐渐变化到T1时刻的动态效果。根据本公开的实施例，在一次动态展示中通过配置执行时间的长短可以有效控制动画效果的快慢。根据本公开的另一实施例，在一次动态展示中通过配置用于更新当前动态参数的预定变化量的大小，可以有效控制动画效果的平滑性。

图4B示意出了弧形进度条展示401的一个应用实例。具体地，在图4B该弧形进度条展示401被用于展示“男装部分商品”抢单进度的场景中。可以理解，该弧形进度条展示401还可以被应用于其他类似场景，例如用户资料完善度、用户等级进度、倒计时、工作执行进度等诸多场景。

图5示意性示出了根据本公开实施例的弧形进度条401的绘制示意。

图5中，以在canvas中绘制弧形进度条401为例进行说明。基于 canvas的特性，该弧形进度条401的绘制大概可拆分为4个部分：画布，背景条，进度条，修饰圆点(可有可无)。

画布的绘制：运用canvas通过画布的getContext()方法，获得一个“绘图环境”对象，从而获得画布。

背景条的绘制：调用arc()方法绘制圆形， 圆形是有起始位置是通过参数进行配置，目的是为了实现用户界面UI层的整圆或缺口圆。

进度条的绘制：进度条的起点与背景条的起点相同，即图中的起始角，进度条的伸展直至终点的绘制可以通过两部分代码(圆的左右) 进行绘制圆弧，保证圆的正常展示。例如，从图5中的起始角到1.5*PI 的部分使用一部分代码，从1.5*PI到结束角的部分使用另一部分代码。

修饰圆点：在背景条和/或进度条的结束位置可开启圆点样式，可配置颜色、大小，根据用户界面进行配置。这个方案设计的目的就是为了实现多场景下不同用于界面样式下的高灵活扩展性能。

另外，在背景条和进度条的绘制中，背景条颜色和进度条颜色可自定义配置。例如，进度条颜色可配置渐变色，背景条可以配置为只支持纯色，运用strokeStyle进行颜色和渐变填充。缺口圆起始结束线帽通过lineCap配置。在canvas中，strokeStyle是用于设置图形轮廓的颜色，而fillStyle用于设置填充颜色。color可以是表示CSS颜色值的字符串，渐变对象或者图案对象。lineWidth属性设置当前绘制的线条的粗细，也就是可配置用户界面中的展示宽度。

需要说明的是，弧形进度条仅是本公开实施例中的图像的一种示例。在实际应用中，该图像可以是任意一种一部分要素不变、另一部分要素会变化的图像(例如时钟，其中不断变化的指针为动态要素)。

图6示意性示出了根据本公开实施例的图像动态展示的装置600 的框图。

如图6所示，该装置600包括获取模块610、第一展示模块620 和第二展示模块630。该装置600可以用于实现参考图2A ～图5所描述的根据本公开实施例的图像动态展示的方法。

获取模块610可以执行例如操作S201，用于获取图像的静态要素和动态要素、以及该动态要素的动态参数，其中该动态参数包括当前动态参数和目标动态参数。

第一展示模块620可以执行例如操作S202，用于展示该静态要素。

第二展示模块630可以执行例如操作S203，用于根据该动态参数，动态更新该动态要素的展示，包括以当前动态参数开始，循环执行如下操作直到当前动态参数与该目标动态参数一致：按照当前动态参数绘制该动态要素，展示该动态要素，以及以当前动态参数加上预定变化量来更新该当前动态参数。

根据本公开的实施例，获取模块610获取的当前动态参数为零，或者获取模块610获取的当前动态参数为接收到图像更新指令时该图像中的动态参数。

根据本公开的实施例，该装置600还包括绘制模块640和存储模块650。绘制模块640例如可以执行操作S301，用于绘制该静态要素和该动态要素。存储模块650例如可以执行操作S302，用于存储该静态要素和该动态要素。

根据本公开的实施例，该静态要素和该动态要素绘制于canvas的不同层。

根据本公开的实施例，该图像包括弧形进度条，该弧形进度条的静态要素包括背景条，以及该弧形进度条的动态要素包括进度条。其中，该进度条沿该背景条所限定的区域伸展，与该背景条具有相同的起点，并且该动态参数包括该进度条在该背景条中伸展的百分率。

根据本公开的实施例的模块、子模块、单元、子单元中的任意多个、或其中任意多个的至少部分功能可以在一个模块中实现。根据本公开实施例的模块、子模块、单元、子单元中的任意一个或多个可以被拆分成多个模块来实现。根据本公开实施例的模块、子模块、单元、子单元中的任意一个或多个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式的硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，根据本公开实施例的模块、子模块、单元、子单元中的一个或多个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

例如，获取模块610、第一展示模块620、第二展示模块630、绘制模块640以及存储模块650中的任意多个可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。根据本公开的实施例，获取模块610、第一展示模块620、第二展示模块630、绘制模块640以及存储模块 650中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，获取模块610、第一展示模块620、第二展示模块630、绘制模块640以及存储模块650中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

图7示意性示出了根据本公开实施例的适于实现图像动态展示的计算机系统700的方框图。图7示出的计算机系统700仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图7所示，根据本公开实施例的计算机系统700包括处理器701，其可以根据存储在只读存储器(ROM)702中的程序或者从存储部分 708加载到随机访问存储器(RAM)703中的程序而执行各种适当的动作和处理。处理器701例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))，等等。处理器701还可以包括用于缓存用途的板载存储器。处理器701可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 703中，存储有系统700操作所需的各种程序和数据。处理器701、ROM 702以及RAM 703通过总线704彼此相连。处理器 701通过执行ROM 702和/或RAM 703中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除 ROM702和RAM 703以外的一个或多个存储器中。处理器701也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，系统700还可以包括输入/输出(I/O)接口 705，输入/输出(I/O)接口705也连接至总线704。系统700还可以包括连接至I/O接口705的以下部件中的一项或多项：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705 。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。

根据本公开的实施例，根据本公开实施例的方法流程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该计算机程序被处理器701执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

本公开还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、有线、光缆、射频信号等等，或者上述的任意合适的组合。

例如，根据本公开的实施例，计算机可读介质可以包括上文描述的ROM 702和/或RAM 703和/或ROM 702和RAM 703以外的一个或多个存储器。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合或/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。

Claims (11)

1.一种图像动态展示的方法，包括：

获取图像的静态要素和动态要素、以及所述动态要素的动态参数，其中所述动态参数包括当前动态参数和目标动态参数；

展示所述静态要素；以及

在展示所述静态要素的同时，根据所述动态参数，动态更新所述动态要素的展示，包括以所述当前动态参数开始，循环执行如下操作直到所述当前动态参数与所述目标动态参数一致：

按照所述当前动态参数绘制所述动态要素；

展示所述动态要素；以及

以所述当前动态参数加上预定变化量来更新所述当前动态参数；

其中，所述图像包括弧形进度条，所述弧形进度条的静态要素包括背景条；所述弧形进度条的动态要素包括进度条，其中：

所述进度条沿所述背景条所限定的区域伸展，与所述背景条具有相同的起点；以及，所述动态参数包括所述进度条在所述背景条中伸展的百分率，其中，对所述进度条的展示包括从所述百分率为零的状态开始一遍遍重绘和展示。

2.根据权利要求1所述的方法，其中：

获取的所述当前动态参数为零；或者

获取的所述当前动态参数为接收到图像更新指令时所述图像中的动态参数。

3.根据权利要求1所述的方法，还包括：

绘制所述静态要素和所述动态要素；以及

存储所述静态要素和所述动态要素。

4.根据权利要求1所述的方法，其中，所述方法应用于canvas。

5.根据权利要求4所述的方法，其中，所述静态要素和所述动态要素绘制于所述canvas的不同层。

6.一种图像动态展示的装置，包括：

获取模块，用于获取图像的静态要素和动态要素、以及所述动态要素的动态参数，其中所述动态参数包括当前动态参数和目标动态参数；

第一展示模块，用于展示所述静态要素；

第二展示模块，用于在展示所述静态要素的同时，根据所述动态参数，动态更新所述动态要素的展示，包括以所述当前动态参数开始，循环执行如下操作直到所述当前动态参数与所述目标动态参数一致：

按照所述当前动态参数绘制所述动态要素；

展示所述动态要素；以及

以所述当前动态参数加上预定变化量来更新所述当前动态参数；

其中，所述图像包括弧形进度条，所述弧形进度条的静态要素包括背景条，所述弧形进度条的动态要素包括进度条：其中：所述进度条沿所述背景条所限定的区域伸展，与所述背景条具有相同的起点；所述动态参数包括所述进度条在所述背景条中伸展的百分率，其中，对所述进度条的展示包括从所述百分率为零的状态开始一遍遍重绘和展示。

7.根据权利要求6所述的装置，其中：

获取的所述当前动态参数为零；或者

获取的所述当前动态参数为接收到图像更新指令时所述图像中的动态参数。

8.根据权利要求6所述的装置，还包括：

绘制模块，用于绘制所述静态要素和所述动态要素；以及

存储模块，用于存储所述静态要素和所述动态要素。

9.根据权利要求6或8所述的装置，其中，所述静态要素和所述动态要素绘制于canvas的不同层。

10.一种图像动态展示的系统，包括：

一个或多个处理器；

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

其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器执行根据权利要求1～5任意一项所述的图像动态展示的方法。

11.一种计算机可读介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行根据权利要求1～5任意一项所述的图像动态展示的方法。

Images