CN107644451A - 动画展示方法和装置 - Google Patents

Abstract

本发明涉及一种动画展示方法和装置，该方法包括：按照变化的缩放方式，生成相应缩放方式的第一图像对应的图像副本；所述第一图像包括透明区域和可视区域；在所述图像副本中的可视区域中形成第二图像中可视区域的形状，得到相应的动画帧；将所述动画帧按照相应图像副本的次序依次展示。本发明提供的动画展示方法和装置，由于仅需要采用第一图像和第二图像便可以实现动画，不需要事先准备好包括每一个动画帧的动画文件，减少了对存储资源的消耗。

Description

动画展示方法和装置

技术领域

本发明涉及图像处理技术领域，特别是涉及一种动画展示方法和装置。

背景技术

动画是将一系列的图像按序展示所形成的动态影像。相较于静态图像，动画可以提供更多的信息量，因此动画的应用非常广泛，目前在应用交互界面中或者网页中都可以展示动画，从而为用户提供更加丰富和容易理解的信息。

目前，一般需要制作动画的每帧图像，将制作的每帧图像按序排列制作成为动画文件，比如GIF(Graphics Interchange Format，图像互换格式)或者SWF(Shock WaveFlash)格式的动画文件。动画文件记录有动画各帧图像的播放时间间隔，在需要播放动画时，按照动画文件记录的播放时间间隔将动画文件中的每帧图像依次展示，从而实现动画展示。然而，目前展示动画需要预先制作每帧图像并存储在动画文件中，导致动画文件占用存储资源大。

发明内容

基于此，有必要针对目前展示动画所需的动画文件占用存储资源大的技术问题，提供一种动画展示方法和装置。

一种动画展示方法，包括：

按照变化的缩放方式，生成相应缩放方式的第一图像对应的图像副本；所述第一图像包括透明区域和可视区域；

在所述图像副本中的可视区域中形成第二图像中可视区域的形状，得到相应的动画帧；

将所述动画帧按照相应图像副本的次序依次展示。

一种动画展示装置，包括：

图像副本生成模块，用于按照变化的缩放方式，生成相应缩放方式的第一图像对应的图像副本；所述第一图像包括透明区域和可视区域；

动画帧生成模块，用于在所述图像副本中的可视区域中形成第二图像中可视区域的形状，得到相应的动画帧；

动画帧展示模块，用于将所述动画帧按照相应图像副本的次序依次展示。

上述动画展示方法和装置，第一图像包括透明区域和可视区域，按照变化的缩放方式，会得到对第一图像采用不同缩放方式的图像副本，按照图像副本的次序各图像副本中的可视区域的位置呈现出变化。第二图像包括可视区域，在图像副本中的可视区域中形成第二图像中可视区域的形状后，得到相应的动画帧。将所述动画帧按照相应图像副本的次序依次展示，将呈现出第二图像中可视区域的形状的位置随着时间变化的动画效果。由于仅需要采用第一图像和第二图像便可以实现动画，不需要事先准备好包括每一个动画帧的动画文件，减少了对存储资源的消耗。

附图说明

图1为一个实施例中终端的内部结构示意图；

图2为一个实施例中动画展示方法的流程示意图；

图3为一个实施例中第一图像和第二图像的对比示意图；

图4为一个实施例中保持等比例缩放，且依次按照从小到大的缩放比例将第一图像缩放后生成相应的逐渐增大的图像副本的示意图；

图5为一个实施例中按照变化的缩放方式，确定相应动画帧的绘制区域的步骤的流程示意图；

图6为一个实施例中重置第一图像中可视区域的颜色值的步骤的流程示意图；

图7为一个实施例中动画展示方法的流程示意图；

图8为一个实施例中生成当前动画帧并展示的步骤的流程示意图；

图9为一个实施例中图像副本和由第二图像并排组合而成的组合图像的对比示意图；

图10为一个实施例中在图像副本中的可视区域中，将与组合图像中的各个第二图像中的透明区域位置对应的区域置为透明区域得到的动画帧的示意图；

图11为一个实施例中在图像副本中的可视区域中，将与第二图像中的透明区域位置对应的区域置为透明区域，得到相应的动画帧的步骤的流程示意图；

图12为一个实施例中采用不同的第二图像所生成的各个动画帧的示意图；

图13为一个实施例中动画展示装置的结构框图；

图14为另一个实施例中动画展示装置的结构框图；

图15为再一个实施例中动画展示装置的结构框图；

图16为一个实施例中动画帧生成模块的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

可以理解，本发明所使用的术语“第一”、“第二”等可在本文中用于描述各种元件，但这些元件不受这些术语限制。这些术语仅用于将第一个元件与另一个元件区分。举例来说，在不脱离本发明的范围的情况下，可以将第一图像称为第二图像，且类似地，可将第二图像称为第一图像。第一图像和第二图像两者都是图像，但其不是同一图像。

图1为一个实施例中终端的内部结构示意图。如图1所示，该终端包括通过系统总线连接的处理器、非易失性存储介质、内存储器和显示屏。其中，终端的非易失性存储介质存储有操作系统，还包括一种动画展示装置，该动画展示装置用于实现一种动画展示方法。该处理器用于提供计算和控制能力，支撑整个终端的运行。终端中的内存储器为非易失性存储介质中的动画展示装置的运行提供环境，该内存储器中可存储有计算机可读指令，该计算机可读指令被处理器执行时，可使得处理器执行一种动画展示方法。终端的显示屏可以是液晶显示屏或者电子墨水显示屏等。该终端可以是手机、平板电脑或者个人数字助理或穿戴式设备等。本领域技术人员可以理解，图1中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的终端的限定，具体的终端可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

图2为一个实施例中动画展示方法的流程示意图，本实施例以该动画展示方法应用于上述图1中的终端来举例说明。该方法具体包括如下步骤：

S202，按照变化的缩放方式，生成相应缩放方式的第一图像对应的图像副本；第一图像包括透明区域和可视区域。

其中，缩放方式是指将第一图像缩小或者放大所采用的方式，缩放方式具体可包括缩放比例和缩放方向。其中缩放比例是指将第一图像缩小或者放大后相对于原始的第一图像的比例；缩放方向包括横向的缩放和纵向的缩放。终端可沿横向和纵向中的任一个缩放方向并按照相应的缩放比例进行缩放；终端也可以同时沿横向和纵向进行缩放，且两个缩放方向的缩放比例可以相同或者不同；当两个缩放方向的缩放比例相同时可称为等比例缩放。

变化的缩放方式是在依次对第一图像进行缩放处理的过程中整体呈现出的变化，这种变化使得缩放后的各个图像副本中的可视区域也是变化的。变化的缩放方式可以是每种缩放方式都不同，也可以存在部分缩放方式相同的情况。变化的缩放方式比如从预设最小缩放比例逐步变化到预设最大缩放比例，还比如从预设最大缩放比例逐步变化到预设最小缩放比例，还比如从第一预设缩放比例逐步增大后再逐步减少到第一预设缩放比例或者第二预设缩放比例，还比如从第一预设缩放比例逐步减小后再逐步增大到第一预设缩放比例或者第二预设缩放比例。缩放方式每次变化的步长可以相同也可以不同。缩放比例变化的同时缩放方向可以保持不变，也可以发生变化。

图像副本是依次将第一图像按照变化的缩放方式进行缩放后生成的图像，图像副本可以仅缓存在内存中，可称为缓存图片；图像副本也可以生成为图像文件。图像副本可以是将第一图像缩放后的完整图像，也可以限定图像副本的尺寸，并从缩放后的第一图像中截取一部分作为图像副本，具体可将缩放后的第一图像居中截取得到图像副本。

第一图像包括透明区域和可视区域，透明区域和可视区域是互斥的。透明区域中的像素在视觉上基本是看不到的，当第一图像置于背景图像之上时，从视觉上可以清晰地看到背景图像中透明区域相对应的位置处的像素颜色；可视区域中的像素在视觉上是看得到的，可视区域也可以具有一定的透明程度。这里的视觉可以是人眼视觉或者计算机视觉。

若定义透明度来表示透明程度，其中0表示完全透明，1至254分别表示透明程度逐步减小的半透明，255表示不透明。则可以将第一图像中透明度为0的像素构成透明区域，将第一图像中透明度为1至255的像素构成可视区域。也可以将第一图像中透明度小于等于预设值的像素构成透明区域，将第一图像中透明度大于预设值的像素构成可视区域，且预设值大于等于1小于255。第一图像可以用ARGB颜色模式表示，其中A表示透明度，R、G和B则分别表示红色、绿色和蓝色。

第一图像包括透明区域和可视区域，相应的图像副本也包括透明区域和可视区域。变化的缩放方式是在依次对第一图像进行缩放处理的过程中整体呈现出的变化，这种变化使得缩放后的各个图像副本中的可视区域也是变化的。

举例说明，参照图3，第一图像310包括透明区域312和314，还包括可视区域316，可视区域316呈环形，可视区域316包括完全不透明的区域和逐渐过渡到透明区域312和314的半透明区域。再参照图4，保持等比例缩放，且依次按照从小到大的缩放比例将第一图像310缩放后生成相应的逐渐增大的图像副本。

S204，在图像副本中的可视区域中形成第二图像中可视区域的形状，得到相应的动画帧。

其中，第二图像包括可视区域，还可以包括透明区域。第二图像可以采用ARGB颜色模式表示。可视区域的形状可由相应可视区域的边缘线条组成。第二图像的图像高度可以大于、等于或者小于第一图像的图像高度，第二图像的图像宽度可以大于、等于或者小于第一图像的图像宽度。终端在每个图像副本中的可视区域中形成第二图像中可视区域的形状后，得到与该图像副本对应的动画帧。

在一个实施例中，S204包括：将图像副本中的可视区域中与第二图像中可视区域对应位置的颜色值，替换为相应的第二图像中可视区域中像素的颜色值，从而实现在图像副本中的可视区域中形成第二图像中可视区域的形状。

S206，将动画帧按照相应图像副本的次序依次展示。

具体地，图像副本是依次生成的，每个图像副本对应有动画帧，按照图像副本的次序，依次将相应图像副本对应的动画帧进行展示，形成动画。终端具体可定时将动画帧按照相应图像副本的次序依次展示。相邻动画帧之间的时间间隔可根据需要设定。终端可将动画帧按照相应图像副本的次序循环展示，直至满足动画停止条件。

在一个实施例中，S206包括：将动画帧按照相应图像副本的次序依次展示在以指定的控件为中心的绘制区域中。本实施例中，指定的控件可以是图标或者按钮，控件可由触发动画展示的程序指定。在以指定的控件为中心的绘制区域中展示动画，可引导用户关注指定的控件。不同的控件可以使用不同的第二图像，以针对不同的控件实现不同的动画效果，便于区分不同的控件。

上述动画展示方法，第一图像包括透明区域和可视区域，按照变化的缩放方式，会得到对第一图像采用不同缩放方式的图像副本，按照图像副本的次序各图像副本中的可视区域的位置呈现出变化。第二图像包括可视区域，在图像副本中的可视区域中形成第二图像中可视区域的形状后，得到相应的动画帧。将动画帧按照相应图像副本的次序依次展示，将呈现出第二图像中可视区域的形状的位置随着时间变化的动画效果。由于仅需要采用第一图像和第二图像便可以实现动画，不需要事先准备好包括每一个动画帧的动画文件，减少了对存储资源的消耗。而且，通过使用不同的第一图像和/或第二图像便可以实现不同的动画效果，方便动画的灵活配置。

在一个实施例中，该方法还包括：按照变化的缩放方式，确定相应动画帧的绘制区域；S206包括：将动画帧按照相应图像副本的次序在相应的绘制区域中进行展示。

具体地，对于变化的每种对第一图像进行的缩放方式，对应有图像副本，该图像副本对应有动画帧，终端确定该与动画帧一一对应的绘制区域，从而在S206中，在展示每个动画帧时，将动画帧展示在相应的绘制区域中。所有的绘制区域可具有相同的区域中心，或者具有相同的区域边缘。图像副本的尺寸可根据绘制区域的尺寸确定。

本实施例中，按照变化的缩放方式，确定相应动画帧的绘制区域，这样每个动画帧在绘制时具有匹配的绘制区域，方便准确地进行动画展示。

如图5所示，在一个实施例中，按照变化的缩放方式，确定相应动画帧的绘制区域的步骤具体包括以下步骤：

S502，获取动画帧总数。

其中，动画帧总数是指展示的动画所需要的动画帧的总数。动画帧总数可以是预先设定的，比如15或者21，表示共有15或者21个动画帧。

S504，确定第一个动画帧的第一绘制区域及最后一个动画帧的第二绘制区域。

动画帧是具有顺序的，且动画帧的顺序与相应图像副本的次序一致。第一个动画帧的第一绘制区域的位置和尺寸，以及最后一个动画帧的第二绘制区域的位置和尺寸，可以是预先设定的，也可以是根据用于展示动画的背景图像的位置和尺寸确定的。

S506，根据变化的缩放方式和动画帧总数，确定从第一绘制区域经过中间动画帧的绘制区域变化为第二绘制区域的变化步长。

其中，中间动画帧是指展示动画所需的动画帧中除去第一个动画帧和最后一个动画帧的动画帧，按展示顺序位于第一个动画帧和最后一个动画帧之间。变化的缩放方式可描述第一图像如何缩放的过程，动画帧总数则限定了中间动画帧的数量，于是根据变化的缩放方式和动画帧总数，便可以确定从第一绘制区域逐渐变化到第二绘制区域的变化步长，每个变化步长表示从一个绘制区域变化到下一个绘制区域的变化量。

S508，按照变化步长确定中间动画帧的绘制区域。

具体地，已知第一个动画帧的第一绘制区域和最后一个动画帧的第二绘制区域，并且已知变化步长，便可以量化出各个中间动画帧的绘制区域。

在一个实施例中，终端可按照以下公式(1)确定各动画帧的绘制区域：

X_i＝X₀+((X_n–X₀)*i/n)

Y_i＝Y₀+((Y_n–Y₀)*i/n)

W_i＝W₀+((W_n–W₀)*i/n) 公式(1)

H_i＝H₀+((X_n–H₀)*i/n)

其中，i表示从0起编号的动画帧的序号，n为最后一个动画帧的序号，动画帧总数为n+1；X_i、Y_i、W_i和H_i分别表示序号为i的动画帧的绘制区域的横坐标、纵坐标、宽度和高度；X₀、Y₀、W₀和H₀分别表示第一个动画帧的第一绘制区域的横坐标、纵坐标、宽度和高度；X_n、Y_n、W_n和H_n分别表示最后一个动画帧的第二绘制区域的横坐标、纵坐标、宽度和高度。

基于上述公式(1)的上述实施例中，绘制区域的横坐标、纵坐标、宽度和高度的变化步长分别为：(X_n–X₀)/n、(Y_n–Y₀)/n、(W_n–W₀)/n以及(X_n–H₀)/n，基于第一绘制区域的横坐标、纵坐标、宽度和高度，便可以获得所有动画帧的绘制区域的横坐标、纵坐标、宽度和高度。绘制区域的横坐标和纵坐标是可用来定位相应绘制区域的像素的横坐标和纵坐标，比如绘制区域的起点或者中心点的横坐标和纵坐标。

本实施例中，根据变化的缩放方式和动画帧总数确定变化步长，从而利用变化步长确定各个中间动画帧的绘制区域，在已知第一个动画帧的第一绘制区域和最后一个动画帧的第二绘制区域后，便可以得到所有动画帧的绘制区域，计算复杂度低。

如图6所示，在一个实施例中，在S202之前动画展示方法还包括重置第一图像中可视区域的颜色值的步骤，具体包括如下步骤：

S602，加载第一图像。

具体地，终端可将文件形式的第一图像加载到内存中，还可以同时加载第二图像，以便后续生成动画帧时使用。

S604，获取用于展示动画的背景图像的背景颜色值。

具体地，背景图像是展示动画的承载体，背景图像可以是需要展示动画的交互界面的界面图像，也可以是需要展示的网页的背景图像。当背景图像为纯色时，终端可直接获取背景图像中任意像素的颜色值作为背景颜色值；当背景图像中像素的像素值多于一种时，终端可提取背景图像的背景颜色值范围。

S606，确定与背景颜色值存在颜色差异的前景颜色值。

具体地，前景颜色值与背景颜色值之间存在足够的颜色差异，使得前景颜色值和背景颜色值能够从视觉上区分。比如若背景图像是纯白色，则前景颜色值可采用与白色差异较大的黑色、红色或者绿色等任意颜色；若背景图像是纯黑色，则前景颜色值可采用与黑色差异较大的白色。

S608，将第一图像中可视区域的颜色值置为前景颜色值。

具体地，终端可遍历第一图像中的可视区域，将该可视区域中的每个像素值的颜色值置为前景颜色值。

本实施例中，由于动画帧具有透明区域，动画帧在展示时会在透明区域中呈现背景图像的颜色，将第一图像中可视区域的颜色值置为前景颜色值，使得动画在展示时可视区域的颜色能够与背景图像的颜色区分开，可根据背景图像的变化动态调整动画所呈现的颜色，使得终端可适用于各种背景图像，增加通用性。

在一个实施例中，S202、S204以及S206按照动画帧之间预设的时间间隔定时并依次执行，直至动画停止条件被满足。其中动画停止条件是指停止展示动画的触发条件，可以是计时达到预设展示时长，也可以是发生预设事件，比如发生关闭网页的事件。S202、S204以及S206按照动画帧之间预设的时间间隔定时并依次执行，是指每隔预设的时间间隔将S202、S204以及S206依次执行一遍。

如图7所示，在一个实施例中，一种动画展示方法，包括如下步骤：

S702，加载第一图像和第二图像，并初始化定时器。初始化定时器可将定时器清零，并设置定时器触发的时间间隔，比如20ms。终端可在加载第一图像后，将第一图像进行预处理，比如将第一图像中的像素的颜色值置为当前主题颜色值相关的颜色值。主题颜色值是指交互界面整体呈现的颜色，可以是交互界面中多数控件所采用的颜色，或者交互界面中占比最大的颜色值。

S704，等待定时器触发。具体地，终端在完成初始化后，等待定时器触发，然后逐帧绘制动画帧。

S706，定时器触发。

S708，生成当前动画帧并展示。具体地，在定时器触发时，需要计算出当前动画帧的相关参数，从而利用计算出的相关参数绘制当前动画帧。相关参数比如绘制区域的位置和尺寸等。

S710，判断是否满足动画停止条件。若不满足，则执行S704；若满足，则结束。具体地，终端每绘制出一个动画帧，会判断动画停止条件是否被满足，若满足，则结束动画展示；若不满足，则转向下一动画帧，并等待下一次定时器触发。动画结束后，可关闭定时器，并对占用的资源进行释放操作。

如图8所示，在一个实施例中，S708具体包括如下步骤：

S802，确定当前动画帧的绘制区域，并创建与该绘制区域的尺寸一致的缓存图片。

S804，根据变化的缩放方式中当前的缩放方式，将第一图像进行缩放后绘制到缓存图片；第一图像包括透明区域和可视区域。

S806，在缓存图片中的可视区域中形成第二图像中可视区域的形状，得到相应的当前动画帧。

S808，将当前动画帧绘制到确定的绘制区域。

本实施例中，通过定时器触发对动画帧进行逐帧绘制，完成动画展示，且在每次定时器触发时，经过少量计算便可以绘制当前动画帧，不仅可以减少对存储资源的消耗，还能高效地完成动画展示。

在一个实施例中，S204具体包括：在图像副本中的可视区域中，将与第二图像中的透明区域位置对应的区域置为透明区域，得到相应的动画帧；其中，第二图像包括可视区域。

具体地，第二图像的图像高度可以大于、等于或者小于图像副本的图像高度，第二图像的图像宽度可以大于、等于或者小于图像副本的图像宽度。图像副本和第二图像具有位置对应关系。当第二图像的图像高度大于或等于图像副本的图像高度，或者当第二图像的图像宽度大于或等于图像副本的图像宽度时，可将图像副本和第二图像中心对齐或者边缘对齐，从而确定位置对应关系。当第二图像的图像高度小于图像副本的图像高度，或者第二图像的图像宽度小于图像副本的图像宽度时，可将多个第二图像并排构成能够覆盖图像副本的组合图像，使得图像副本和该组合图像存在位置对应关系。

进一步地，终端可根据图像副本和第二图像之间的位置对应关系，在图像副本中的可视区域中，确定需要置为透明区域的区域，该区域与第二图像中的透明区域存在位置对应关系，将该区域置为透明区域，这样图像副本中的可视区域中会形成第二区域中可视区域的形状，且保留图像副本中可视区域原本的颜色值。

举例说明，参照图3中的第二图像320或者第二图像330，第二图像320和第二图像330的尺寸仅小于第一图像310。第二图像320包括可视区域322和324，还包括透明区域326。第二图像330包括可视区域332和透明区域334。再参照图9，假设图像副本为920，将图3中的第二图像320并排组成能够覆盖图像副本为920的组合图像940，图像副本920和组合图像940存在位置对应关系。在图像副本920中的可视区域中，将与组合图像940中的各个第二图像中的透明区域位置对应的区域置为透明区域，得到如图10所示的动画帧1010。动画1010中包括透明区域1011、1012和1013，还包括可视区域1014。

本实施例中，通过将图像副本中的可视区域中与第二图像中的透明区域位置对应的区域置为透明区域，便可以在图像副本的可视区域中形成第二图像的可视区域的形状，计算简单，提高了生成动画帧的效率。

如图11所示，在一个实施例中，在图像副本中的可视区域中，将与第二图像中的透明区域位置对应的区域置为透明区域，得到相应的动画帧的步骤，具体包括如下步骤：

S1102，遍历图像副本中的像素。

具体地，终端初始化图像副本的像素序号为i＝0，像素总数为N+1，即最大像素序号为N。终端可从i＝0起依次遍历图像副本中的像素，直至遍历完序号为N的像素。

S1104，获取图像副本中遍历的像素的透明度和位置信息。

其中，位置信息可以包括像素的横坐标和纵坐标。假设遍历的像素为P1，P1的透明度为a1，P1的横坐标为x1，P1的纵坐标为y1。

S1106，当图像副本中遍历的像素的透明度不等于表示透明的值时，根据遍历的像素的位置信息获得第二图像中相应位置的像素的位置信息。

具体地，当采用ARGB颜色模式时，表示透明的值为0，终端可判断a1＝0是否成立。若a1＝0成立，则判断是否已完成遍历，若是则结束，若否则将i自增1后继续遍历。终端可判断i<n是否成立来判断是否完成遍历，若不成立则完成遍历，若成立则未完成遍历。若a1＝0不成立，终端可根据遍历的像素P1的位置信息x1和y1，得到第二图像中相应位置的像素P2的位置信息，该P2的位置信息包括P2的横坐标x2和纵坐标y2。

在一个实施例中，第二图像的图像宽度小于图像副本的图像宽度；第二图像的图像高度小于图像副本的图像高度；位置信息包括相应像素的横坐标和纵坐标；S1106包括：将遍历的像素的横坐标按照第二图像的图像宽度取余，得到第二图像中相应位置的像素的横坐标；将遍历的像素的纵坐标按照第二图像的图像高度取余，得到第二图像中相应位置的像素的纵坐标。具体地，x2＝x1％w2，y2＝y1％h2。其中，％是取余符号，w2是第二图像的图像宽度，h2是第二图像的图像高度。按照第二图像的图像高度和图像宽度分别取余，相当于计算对应到组合图像中的第二图像中的像素的位置信息，可高效地确定位置信息，进一步提高生成动画帧的效率。

S1108，根据获得的位置信息获取第二图像中相应位置的像素的透明度。

具体地，在得到第二图像中的像素P2的位置信息x2和y2后，便可以定位到该像素P2，从而获取到该像素P2的透明度a2。

S1110，当第二图像中相应位置的像素的透明度等于表示透明的值时，将图像副本中遍历的像素的透明度置为表示透明的值，得到相应的动画帧。

具体地，终端可判断a2＝0是否成立。若a2＝0成立，则将a1置为0，进而判断是否已完成遍历，若是则结束，若否则将i自增1后继续遍历。若a2＝0不成立，则终端可判断是否已完成遍历，若是则结束，若否则将i自增1后继续遍历。

本实施例中，通过将图像副本中的可视区域中与第二图像中的透明区域位置对应的区域中的像素的透明度置为表示透明的值，便可以在图像副本的可视区域中形成第二图像的可视区域的形状，计算简单，进一步提高了生成动画帧的效率。

参照图12，在一个具体应用场景中，利用图3中的第一图像310，并分别采用第二图像320和330可实现不同效果的波纹动画，图12中以指定的控件为中心展示波纹动画，可引导用户关注该指定的控件。对于不同的控件，可以通过采用不同的第二图像而生成不同的波纹动画，便于区分不同的控件。对于相同的控件在不同时段或者针对不同事件，也可以采用不同的第二图像而生成不同的波纹动画，便于区分不同的时段或者不同的事件。

如图13所示，在一个实施例中，提供了一种动画展示装置1300，包括：图像副本生成模块1310、动画帧生成模块1320和动画帧展示模块1330。

图像副本生成模块1310，用于按照变化的缩放方式，生成相应缩放方式的第一图像对应的图像副本；第一图像包括透明区域和可视区域；

动画帧生成模块1320，用于在图像副本中的可视区域中形成第二图像中可视区域的形状，得到相应的动画帧；

动画帧展示模块1330，用于将动画帧按照相应图像副本的次序依次展示。

如图14所示，动画展示装置1300还包括绘制区域确定模块1340，用于按照变化的缩放方式，确定相应动画帧的绘制区域。动画帧展示模块1330还用于将动画帧按照相应图像副本的次序在相应的绘制区域中进行展示。

在一个实施例中，绘制区域确定模块1340还用于获取动画帧总数；确定第一个动画帧的第一绘制区域及最后一个动画帧的第二绘制区域；根据变化的缩放方式和动画帧总数，确定从第一绘制区域经过中间动画帧的绘制区域变化为第二绘制区域的变化步长；按照变化步长确定中间动画帧的绘制区域。

如图15所示，在一个实施例中，动画展示装置1300还包括：加载模块1350和颜色值重置模块1360。

加载模块1350，用于加载第一图像。

颜色值重置模块1360，用于获取用于展示动画的背景图像的背景颜色值；确定与背景颜色值存在颜色差异的前景颜色值；将第一图像中可视区域的颜色值置为前景颜色值。

在一个实施例中，图像副本生成模块1310、动画帧生成模块1320和动画帧展示模块1330用于按照动画帧之间预设的时间间隔定时并依次工作，直至动画停止条件被满足。

在一个实施例中，动画帧生成模块1320还用于在图像副本中的可视区域中，将与第二图像中的透明区域位置对应的区域置为透明区域，得到相应的动画帧；其中，第二图像包括可视区域。

如图16所示，在一个实施例中，动画帧生成模块1320包括：第一获取模块1321、第二获取模块1322和透明度重置模块1323。

第一获取模块1321，用于遍历图像副本中的像素；获取图像副本中遍历的像素的透明度和位置信息。

第二获取模块1322，用于当图像副本中遍历的像素的透明度不等于表示透明的值时，根据遍历的像素的位置信息获得第二图像中相应位置的像素的位置信息；根据获得的位置信息获取第二图像中相应位置的像素的透明度。

透明度重置模块1323，用于当第二图像中相应位置的像素的透明度等于表示透明的值时，将图像副本中遍历的像素的透明度置为表示透明的值，得到相应的动画帧。

在一个实施例中，第二图像的图像宽度小于图像副本的图像宽度；第二图像的图像高度小于图像副本的图像高度；位置信息包括相应像素的横坐标和纵坐标。第二获取模块1322还用于将遍历的像素的横坐标按照第二图像的图像宽度取余，得到第二图像中相应位置的像素的横坐标；将遍历的像素的纵坐标按照第二图像的图像高度取余，得到第二图像中相应位置的像素的纵坐标。

在一个实施例中，动画帧展示模块1330还用于将动画帧按照相应图像副本的次序依次展示在以指定的控件为中心的绘制区域中。

上述动画展示装置1300，第一图像包括透明区域和可视区域，按照变化的缩放方式，会得到对第一图像采用不同缩放方式的图像副本，按照图像副本的次序各图像副本中的可视区域的位置呈现出变化。第二图像包括可视区域，在图像副本中的可视区域中形成第二图像中可视区域的形状后，得到相应的动画帧。将动画帧按照相应图像副本的次序依次展示，将呈现出第二图像中可视区域的形状的位置随着时间变化的动画效果。由于仅需要采用第一图像和第二图像便可以实现动画，不需要事先准备好包括每一个动画帧的动画文件，减少了对存储资源的消耗。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该程序可存储于一非易失性计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，该存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (18)

1.一种动画展示方法，包括：

按照变化的缩放方式，生成相应缩放方式的第一图像对应的图像副本；所述第一图像包括透明区域和可视区域；

在所述图像副本中的可视区域中形成第二图像中可视区域的形状，得到相应的动画帧；

将所述动画帧按照相应图像副本的次序依次展示。

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

按照变化的缩放方式，确定相应动画帧的绘制区域；

所述将所述动画帧按照相应图像副本的次序依次展示包括：

将所述动画帧按照相应图像副本的次序在相应的绘制区域中进行展示。

3.根据权利要求2所述的方法，其特征在于，所述按照变化的缩放方式，确定相应动画帧的绘制区域包括：

获取动画帧总数；

确定第一个动画帧的第一绘制区域及最后一个动画帧的第二绘制区域；

根据变化的缩放方式和所述动画帧总数，确定从所述第一绘制区域经过中间动画帧的绘制区域变化为所述第二绘制区域的变化步长；

按照所述变化步长确定所述中间动画帧的绘制区域。

4.根据权利要求1所述的方法，其特征在于，所述按照变化的缩放方式，生成相应缩放方式的第一图像对应的图像副本之前，所述方法还包括：

加载第一图像；

获取用于展示动画的背景图像的背景颜色值；

确定与所述背景颜色值存在颜色差异的前景颜色值；

将所述第一图像中可视区域的颜色值置为所述前景颜色值。

5.根据权利要求1所述的方法，其特征在于，所述按照变化的缩放方式，生成相应缩放方式的第一图像对应的图像副本的步骤，所述在所述图像副本中的可视区域中形成第二图像中可视区域的形状，得到相应的动画帧的步骤，以及所述将所述动画帧按照相应图像副本的次序依次展示的步骤，按照动画帧之间预设的时间间隔定时并依次执行，直至动画停止条件被满足。

6.根据权利要求1所述的方法，其特征在于，所述在所述图像副本中的可视区域中形成第二图像中可视区域的形状，得到相应的动画帧包括：

在所述图像副本中的可视区域中，将与第二图像中的透明区域位置对应的区域置为透明区域，得到相应的动画帧；其中，所述第二图像包括可视区域。

7.根据权利要求6所述的方法，其特征在于，所述在所述图像副本中的可视区域中，将与第二图像中的透明区域位置对应的区域置为透明区域，得到相应的动画帧包括：

遍历所述图像副本中的像素；

获取所述图像副本中遍历的像素的透明度和位置信息；

当所述图像副本中遍历的像素的透明度不等于表示透明的值时，根据遍历的像素的位置信息获得第二图像中相应位置的像素的位置信息；

根据获得的位置信息获取所述第二图像中相应位置的像素的透明度；

当所述第二图像中相应位置的像素的透明度等于表示透明的值时，将所述图像副本中遍历的像素的透明度置为表示透明的值，得到相应的动画帧。

8.根据权利要求7所述的方法，其特征在于，所述第二图像的图像宽度小于所述图像副本的图像宽度；所述第二图像的图像高度小于所述图像副本的图像高度；所述位置信息包括相应像素的横坐标和纵坐标；

所述根据遍历的像素的位置信息获得第二图像中相应位置的像素的位置信息包括：

将遍历的像素的横坐标按照所述第二图像的图像宽度取余，得到所述第二图像中相应位置的像素的横坐标；

将遍历的像素的纵坐标按照所述第二图像的图像高度取余，得到所述第二图像中相应位置的像素的纵坐标。

9.根据权利要求1所述的方法，其特征在于，所述将所述动画帧按照相应图像副本的次序依次展示包括：

将所述动画帧按照相应图像副本的次序依次展示在以指定的控件为中心的绘制区域中。

10.一种动画展示装置，其特征在于，包括：

图像副本生成模块，用于按照变化的缩放方式，生成相应缩放方式的第一图像对应的图像副本；所述第一图像包括透明区域和可视区域；

动画帧生成模块，用于在所述图像副本中的可视区域中形成第二图像中可视区域的形状，得到相应的动画帧；

动画帧展示模块，用于将所述动画帧按照相应图像副本的次序依次展示。

11.根据权利要求10所述的装置，其特征在于，所述装置还包括：

绘制区域确定模块，用于按照变化的缩放方式，确定相应动画帧的绘制区域；

所述动画帧展示模块还用于将所述动画帧按照相应图像副本的次序在相应的绘制区域中进行展示。

12.根据权利要求11所述的装置，其特征在于，所述绘制区域确定模块还用于获取动画帧总数；确定第一个动画帧的第一绘制区域及最后一个动画帧的第二绘制区域；根据变化的缩放方式和所述动画帧总数，确定从所述第一绘制区域经过中间动画帧的绘制区域变化为所述第二绘制区域的变化步长；按照所述变化步长确定所述中间动画帧的绘制区域。

13.根据权利要求10所述的装置，其特征在于，所述装置还包括：

加载模块，用于加载第一图像；

颜色值重置模块，用于获取用于展示动画的背景图像的背景颜色值；确定与所述背景颜色值存在颜色差异的前景颜色值；将所述第一图像中可视区域的颜色值置为所述前景颜色值。

14.根据权利要求10所述的装置，其特征在于，所述图像副本生成模块、所述动画帧生成模块和所述动画帧展示模块用于按照动画帧之间预设的时间间隔定时并依次工作，直至动画停止条件被满足。

15.根据权利要求10所述的装置，其特征在于，所述动画帧生成模块还用于在所述图像副本中的可视区域中，将与第二图像中的透明区域位置对应的区域置为透明区域，得到相应的动画帧；其中，所述第二图像包括可视区域。

16.根据权利要求15所述的装置，其特征在于，所述动画帧生成模块包括：

第一获取模块，用于遍历所述图像副本中的像素；获取所述图像副本中遍历的像素的透明度和位置信息；

第二获取模块，用于当遍历的像素的透明度不等于表示透明的值时，根据遍历的像素的位置信息获得第二图像中相应位置的像素的位置信息；根据获得的位置信息获取所述图像副本中相应位置的像素的透明度；

透明度重置模块，用于当所述图像副本中相应位置的像素的透明度等于表示透明的值时，将所述图像副本中遍历的像素的透明度置为表示透明的值，得到相应的动画帧。

17.根据权利要求16所述的装置，其特征在于，所述第二图像的图像宽度小于所述图像副本的图像宽度；所述第二图像的图像高度小于所述图像副本的图像高度；所述位置信息包括相应像素的横坐标和纵坐标；

所述第二获取模块还用于将遍历的像素的横坐标按照所述第二图像的图像宽度取余，得到所述第二图像中相应位置的像素的横坐标；将遍历的像素的纵坐标按照所述第二图像的图像高度取余，得到所述第二图像中相应位置的像素的纵坐标。

18.根据权利要求10所述的装置，其特征在于，所述动画帧展示模块还用于将所述动画帧按照相应图像副本的次序依次展示在以指定的控件为中心的绘制区域中。