CN107015788B - 在移动设备上动画展现图像的方法和装置 - Google Patents

Abstract

本申请提供一种在移动设备上动画展现图像的方法，包括：在隐藏画布上绘制最终展现的图像，并将绘制完成的图像保存为终点图片；以一定的时间间隔，逐帧采用变化的显示参数在动画展现区域显示至少部分终点图片，直到最终显示终点图片；所述变化的显示参数根据动画效果确定。通过本申请的技术方案，避免了逐帧计算、缓存和绘制动画过程中的每帧图像，极大的减少了动画展现所需的代码量，降低了内存占用，提高了动画的执行效率。

Description

在移动设备上动画展现图像的方法和装置

技术领域

本申请涉及网络通信技术领域，尤其涉及一种在移动设备上动画展现图像的方法和装置。

背景技术

随着移动设备的性能发展，运行在移动设备上的用户界面的复杂程度和友好程度也随之提升。为了让用户有更好的体验，越来越多的网络服务提供商在其浏览器页面或客户端界面中采用动画方式来进行各种素材的展现。

现有技术中，移动设备上的动画实现通常沿用PC(Personal Computer，个人电脑)上的方案，即：计算出每帧图像的大小、位置等用于显示的数据，将用于显示的数据和图像本身的数据一并缓存在内存中，在动画的执行过程中，每隔一定时间清除画布上的当前内容，并且用缓存的下一帧数据在画布上重新绘制出下一帧的显示内容。

这种方案在实现中，需要记录各帧图像的层级、属性的信息，编程的代码量相当大，缓存每帧图像的数据将占用大量的内存，而重新绘制每帧图像还会消耗较多的处理能力。对于硬件资源和运算速度相比于PC仍然有相当差距的移动设备而言，这种方案存在代码量过大、内存开销大、执行效率低的问题。

发明内容

有鉴于此，本申请提供一种在移动设备上动画展现图像的方法，包括：

在隐藏画布上绘制最终展现的图像，并将绘制完成的图像保存为终点图片；

以一定的时间间隔，逐帧采用变化的显示参数在动画展现区域显示至少部分终点图片，直到最终显示终点图片；所述变化的显示参数根据动画效果确定。

本申请还提供了一种在移动设备上动画展现图像的装置，包括：

终点图片生成单元，用于在隐藏画布上绘制最终展现的图像，并将绘制完成的图像保存为终点图片；

动画展现单元，用于以一定的时间间隔，逐帧采用变化的显示参数在动画展现区域显示至少部分终点图片，直到最终显示终点图片；所述变化的显示参数根据动画效果确定。

由以上技术方案可见，本申请的实施例中，将最终展现的图像绘制在隐藏画布上并保存为终点图片，在动画执行过程中利用变化的显示参数来显示终点图片，从而无需逐帧计算、缓存和绘制动画过程中的每帧图像，极大的减少了动画展现所需的代码量，降低了内存占用，提高了动画的执行效率。

附图说明

图1是本申请实施例中一种在移动设备上动画展现图像的方法的流程图；

图2是本申请应用示例中一种走势图的终点图片示例图；

图3是本申请应用示例中一种走势图展示动画中各帧图像序列的示意图；

图4是本申请应用示例中一种柱状图的终点图片示例图；

图5是本申请应用示例中一种柱状图展示动画中各帧图像序列的示意图；

图6是移动设备的一种硬件结构图；

图7是本申请实施例中一种在移动设备上动画展现图像的装置的逻辑结构图。

具体实施方式

本申请的实施例提出一种新的在移动设备上动画展现图像的方法，将作为动画终点要展现的图像绘制在隐藏画布上，并保存为终点图片，在动画执行过程中，按照要展现的动画效果确定每帧的显示参数，并采用每帧的显示参数来显示部分或全部的终点图片，直到最终显示终点图片。本申请的实施例通过以变化的显示方式来展现全部或部分的终点图片来达到动画效果，避免了计算和记录动画过程中每帧图像的层级、属性信息，减少了程序的代码量；动画过程使用一幅绘制完成的图片而不必绘制每帧图像，无需缓存每帧图像的数据，极大的降低了内存占用和对处理能力的消耗，从而解决现有技术中存在的问题。

本申请的实施例可以应用在任何具有计算、存储和显示能力的移动设备上，包括手机、平板电脑、笔记本等设备。在软件层面，本申请的实施例可以应用在C/S(Client/Server，客户端/服务器)结构的客户端，也可以应用在B/S(Browser/Server，浏览器/服务器)结构的浏览器页面，还可以应用在其他运行在移动设备上的软件中。

本申请的实施例中，在移动设备上动画展现图像的方法的流程如图1所示。

步骤110，在隐藏画布上绘制最终展现的图像，并将绘制完成的图像保存为终点图片。

移动设备创建隐藏画布，将最终展现的图像，即动画结束时要显示给用户的图像绘制在隐藏画布上，在绘制完成后，将隐藏画布上的图像保存为终点图片。

移动设备绘制最终显示的图像所需的数据可以根据实际应用场景中图像要表现的内容确定。绘制图像所需的数据可以由移动设备在本地读取或计算得出，也可以从服务器获取或者根据从服务器获取的其他数据计算得出。在绘制图像时所采用的具体绘制方式可以参照现有技术实现。本申请的实施例对绘制图像的数据来源、图像的表现内容、图像的绘制方式均不做限定。

移动设备可以根据动画展现区域来创建隐藏画布。例如，可以参考最终显示的图像的峰值数据，按照动画展现区域的形状，创建同比例放大或缩小的隐藏画布。再如，可以创建与动画展现区域形状及大小相同的隐藏画布，这样终点图片在动画结束时可以无需缩放而直接显示在动画展示区域，能够简化计算。当然，移动设备也可以任意创建隐藏画布，而在后续的动画过程中通过设置显示参数来将全部或部分终点图片显示在动画展现区域。

在隐藏画布上绘制完成的终点图片可以以文件的形式保存在移动设备本地，也可以以图像数据的形式保存在缓存中。在保存终点图片后，可以删除隐藏画布。

步骤120，以一定的时间间隔，逐帧采用变化的显示参数在动画展现区域显示至少部分终点图片，直到最终显示终点图片。

在生成终点图片后，根据要展现的动画效果确定动画执行过程中各帧的显示参数，以一定的时间间隔依次采用各帧的显示参数来将部分或全部终点图片显示在动画展现区域，直到在动画结束时显示终点图片。相邻帧的显示参数互不相同，其变化方式与要展现的动画效果相关。

显示参数可以包括对终点图片进行处理、以得到各帧图像的终点图片处理参数，和用来确定将处理后的终点图片显示在动画展现区域哪个位置的显示位置参数；相邻帧的终点图片处理参数和显示位置参数中，至少有一个不同。动画执行过程中，移动设备按照每帧的终点图片处理参数来对终点图片进行处理，得到该帧的图像，并在每帧图像对应的时间点(相邻两帧图像之间相隔上述一定的时间间隔)采用该帧的显示位置参数将该帧的图像显示在动画展现区域。当相邻各帧的终点图片处理参数发生变化、或显示位置参数发生变化、或终点图片处理参数和显示位置参数都发生变化时，可以实现不同的动画效果。以下举例说明。

第一个例子：以固定的显示位置参数和根据动画效果确定的每帧的截图参数来作为变化的显示参数，可以达到将终点图片从部分到全部逐渐呈现在动画展现区域的效果。具体而言，以一定的时间间隔，采用固定的显示位置参数，在动画展现区域逐帧显示根据每帧的截图参数截取的部分终点图片，直到最终显示全部终点图片。即，在各帧对应的时间点，移动设备按照该帧的截图参数截取部分终点图片，得到该帧的图像，并按照固定的显示位置参数将该帧图像显示在动画展现区域内；其中，按照截图参数截取的部分图片逐渐变大，直到成为完整的终点图片。

作为第一个例子的一种应用，可以将每帧图像左上角的显示位置参数固定为动画展现区域的左上角，截取左边的部分终点图片作为各帧的图像并将所截取的面积逐渐变大，可以达到终点图片从左向右逐渐呈现的动画效果。作为第一个例子的另一种应用，还可以将每帧图像中心点的显示位置参数固定为动画展现区域的中心点，以终点图片中心点为截取的各帧图像的中心点并将所截取的面积逐渐变大，可以达到终点图像从中心向外围逐渐呈现的动画效果。其他的应用场景不再赘述。

第二个例子：以根据动画效果确定的每帧的显示位置参数和每帧的截图参数来作为变化的显示参数，可以达到将终点图片从动画展现区域外逐渐移动到全部呈现在动画展现区域的效果。具体而言，以一定的时间间隔，逐帧采用该帧的显示位置参数，在动画展现区域显示根据该帧的截图参数截取的部分终点图片，直到最终显示全部终点图片。即，在各帧对应的时间点，移动设备按照该帧的截图参数截取部分终点图片，得到该帧的图像，并将该帧的图像按照该帧的显示位置参数显示在动画展现区域内；其中，按照截图参数截取的部分图片逐渐变大，其显示位置也相应移动以便使得该帧图像能够完全显示在动画展现区域，直到最后一帧图像成为完整的终点图片，并占满整个动画展现区域。

作为第二个例子的一种应用，可以将每帧图像右上角的显示位置参数沿动画展现区域的上部边缘逐渐右移，截取左边的部分终点图片(其大小对应于显示位置参数)作为各帧的图像并将所截取的面积逐渐变大，可以达到终点图片从左向右从动画展现区域外移入动画展现区域的效果。其他的应用场景不再赘述。

第三个例子：以固定的显示位置参数和根据动画效果确定的每帧的压缩参数来作为变化的显示参数，可以达到将整个终点图片从占据部分动画展现区域到逐渐扩大为占据全部动画展现区域的效果。具体而言，以一定的时间间隔，采用显示位置参数，在动画展现区域逐帧显示根据该帧的压缩参数压缩后的终点图片，直到最终显示匹配于动画展现区域的终点图片。即，在各帧对应的时间点，移动设备按照该帧的压缩参数将终点图片压缩后得到该帧的图像，并按照固定的显示位置参数将该帧图像显示在动画展现区域内；其中，按照压缩参数压缩后的各帧图像逐渐变大，直到占满完整的动画展现区域。

作为第三个例子的一种应用，可以将每帧图像左上角的显示位置参数固定为动画展现区域的左上角，各帧按照终点图片的长宽比进行等比例压缩并将压缩程度逐渐减小，可以达到终点图片动画展现去区域的左上角由远及近逐渐呈现的动画效果。作为第三个例子的另一种应用，还可以将每帧图像下部边缘的显示位置参数固定为动画展现区域的下部边缘，各帧对终点图片的宽度进行压缩并将压缩程度逐渐减小，可以达到终点图片从底部逐渐长大到占满完整的动画展现区域的效果。其他的应用场景不再赘述。

当要实现的动画效果不同时，还可以采用有别于上述截图参数和压缩参数的其他类型的终点图片处理参数，如对终点图片进行旋转的旋转参数、对终点图片进行色彩处理的滤镜参数等等。另外，还可以结合使用各种不同类型的终点图片处理参数来对终点图片进行多重处理，如压缩参数和旋转参数结合使用可以达到将终点图片由小到大以某个点为中心旋转而出的动画效果。本申请的实施例对所采用的终点图片处理参数的类型和数量、以及与固定或变化的显示位置参数的结合使用均不做限定。

可见，本申请的实施例中，将最终展现的图像绘制在隐藏画布上并保存为终点图片，在动画执行过程中，按照要展现的动画效果确定每帧的显示参数，并采用每帧的显示参数来显示部分或全部的终点图片，通过变化的显示参数来达到动画效果，避免了计算和记录动画过程中每帧图像的层级、属性信息，减少了程序的代码量；动画过程使用终点图片而不必绘制每帧图像，无需缓存每帧图像的数据，极大的降低了内存占用，并提高了动画的执行效率。

在本申请的一个应用示例中，在智能手机的浏览器环境中，在向用户展现图形(包括走势图和柱状图)的时候会采用动画效果。

当浏览器页面上需要显示走势图时，创建与走势图展示区域相同大小的隐藏画布，根据从服务器接收的走势图的图形数据，在隐藏画布上绘制最终显示给用户的走势图，如图2所示。绘制完成的走势图在内存中缓存为走势图终点图片。

走势图是某个变量按照时间顺序的变化趋势图，在展现走势图时，采用按照时间顺序逐渐形成变量走势的动画效果。因此，可以将固定的显示位置参数和变化的截图参数作为显示参数。将每帧图像左上角的显示位置参数固定为走势图展现区域的左上角；从走势图终点图片的左边缘起，每帧截取不同长度的部分走势图终点图片作为该帧图像，所截取的长度不断增加。一种可能的各帧图像序列的如图3所示。这样，当各帧图像以一定时间间隔陆续显示在走势图展示区域时，将形成变量的走势沿时序出现的动画效果。

当浏览器页面上需要显示柱状图时，创建与柱状图展示区域相同大小的隐藏画布，根据从服务器接收的柱状图的图形数据，在隐藏画布上绘制最终显示给用户的柱状图，如图4所示。绘制完成的柱状图在内存中缓存为柱状图终点图片。

柱状图用来反映某个变量在某个时间点的值，在展现柱状图时，采用将图形柱从低到高逐渐变为最终值的动画效果。因此，可以将固定的显示位置参数和变化的压缩参数作为显示参数。将每帧图像左下角的显示位置参数固定为柱状图展现区域的左下角；每帧采用不同的压缩比例对柱状图终点图片的宽度进行压缩后生成该帧的图像，压缩比例不断减小，直到最后一帧图像的压缩比例为1。一种可能的各帧图像序列的如图5所示。这样，当各帧图像以一定时间间隔陆续显示在柱状图展示区域时，将形成变量的值从小到大直至达到最终值的动画效果。

与上述流程实现对应，本申请的实施例还提供了一种应用在移动设备上的动画展现图像的装置。该装置可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为逻辑意义上的装置，是通过移动设备的CPU(Central Process Unit，中央处理器)将对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，除了图6所示的CPU、内存以及非易失性存储器之外，在移动设备上动画展现图像的装置所在的移动设备通常还包括用于进行无线信号收发的芯片等其他硬件，和/或用于实现网络通信功能的板卡等其他硬件。

图7所示为本申请实施例提供的一种在移动设备上动画展现图像的装置，包括终点图片生成单元和动画展现单元，其中：终点图片生成单元用于在隐藏画布上绘制最终展现的图像，并将绘制完成的图像保存为终点图片；动画展现单元用于以一定的时间间隔，逐帧采用变化的显示参数在动画展现区域显示至少部分终点图片，直到最终显示终点图片；所述变化的显示参数根据动画效果确定。

可选的，所述显示参数包括：用于对终点图片进行处理得到各帧图像的终点图片处理参数、和用于确定各帧图像在动画展现区域显示位置的显示位置参数；相邻帧的终点图片处理参数和显示位置参数中至少有一个不相同。

一个例子中，所述显示参数包括：显示位置参数和根据动画效果确定的每帧的截图参数；所述动画展现单元具体用于：以一定的时间间隔，采用显示位置参数，在动画展现区域逐帧显示根据所述帧的截图参数截取的部分终点图片，直到最终显示全部终点图片。

另一个例子中，所述显示参数包括：根据动画效果确定的每帧的显示位置参数和截图参数；所述动画展现单元具体用于：以一定的时间间隔，逐帧采用所述帧的显示位置参数，在动画展现区域显示根据所述帧的截图参数截取的部分终点图片，直到最终显示全部终点图片。

再一个例子中，所述显示参数包括：显示位置参数和根据动画效果确定的每帧的压缩参数；所述动画展现单元具体用于：以一定的时间间隔，采用显示位置参数，在动画展现区域逐帧显示根据所述帧的压缩参数压缩后的终点图片，直到最终显示匹配于动画展现区域的终点图片。

可选的，所述隐藏画布与动画展现区域的形状及大小相同。

可选的，所述装置还包括：隐藏画布删除单元，用于在保存终点图片后，删除隐藏画布。

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

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

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

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

Claims (6)

1.一种在移动设备上动画展现图像的方法，其特征在于，包括：

在隐藏画布上绘制最终展现的图像，并将绘制完成的图像保存为终点图片作为动画最后一帧图像；

以一定的时间间隔，采用固定的显示位置参数，在动画展现区域逐帧显示根据每帧的截图参数截取的部分终点图片，直到最终显示全部终点图片；

其中，所述截图参数用于对终点图片进行截取得到各帧图像，所述根据每帧的截图参数截取的部分终点图片的面积逐帧变大，直到成为完整的终点图片；所述显示位置参数用于确定各帧图像在动画展现区域的显示位置，在每帧对应的时间点，将该帧图像目标边沿或目标点的显示位置参数固定为动画展现区域的目标位置；所述截图参数和所述固定的显示位置参数根据动画效果确定。

2.根据权利要求1所述的方法，其特征在于，所述隐藏画布与动画展现区域的形状及大小相同。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：在保存终点图片后，删除隐藏画布。

4.一种在移动设备上动画展现图像的装置，其特征在于，包括：

终点图片生成单元，用于在隐藏画布上绘制最终展现的图像，并将绘制完成的图像保存为终点图片作为动画最后一帧图像；

动画展现单元，用于以一定的时间间隔，按照固定的显示位置参数，在动画展现区域逐帧显示根据每帧的截图参数截取的部分终点图片，直到最终显示全部终点图片；

其中，所述截图参数用于对终点图片进行截取得到各帧图像，所述根据每帧的截图参数截取的部分终点图片的面积逐帧变大，直到成为完整的终点图片；所述显示位置参数用于确定各帧图像在动画展现区域的显示位置，在每帧对应的时间点，将该帧图像目标边沿或目标点的显示位置参数固定为动画展现区域的目标位置；所述截图参数和所述固定的显示位置参数根据动画效果确定。

5.根据权利要求4所述的装置，其特征在于，所述隐藏画布与动画展现区域的形状及大小相同。

6.根据权利要求4所述的装置，其特征在于，所述装置还包括：隐藏画布删除单元，用于在保存终点图片后，删除隐藏画布。

Images