一种页面中动画的生成方法、装置及电子设备与流程

本说明书涉及浏览器技术领域，特别涉及一种页面中动画的生成方法、装置及电子设备。

背景技术：

随着信息技术的不断发展，信息内容的展示多种多样，通过图片、图表等方式进行展示更为形象、易读。在一个页面上如一个网页，其图表可能很多，无法在一个窗口中同时显示出来，可以通过拖动显示窗口的进度条，改变显示窗口的显示位置来显示页面中的其它图表。

页面中的图表在展现时通常采用动画的方式，为此在图表生成的时候会进行动画，即生成图表展示时的动画。一个具有多个图表的页面，所有的图表在创建时都进行动画，多个动画同时执行会导致页面的卡顿。亟需一种新的动画生成方法，来解决多个动画同时执行导致页面卡顿的技术问题。

技术实现要素：

本说明书实施例提供一种页面中动画的生成方法、装置及电子设备，用于解决现有技术中多个动画同时执行导致的页面卡顿的技术问题，提高页面展示的流畅性。

第一方面，本说明书实施例提供一种页面中动画的生成方法，所述方法包括：

在进行页面展示时，获得被展示页面中的目标内容，及所述目标内容与显示所述页面的当前显示窗口之间的距离，所述目标内容包括图片和/或图表；

根据所述距离，获得所述目标内容的生成频率，所述距离与所述生成频率负相关；

按照所述生成频率，生成所述目标内容对应的动画。

可选的，所述方法还包括：

在所述当前显示窗口的位置发生变化时，获得未完成动画并更新所述未完成动画对应的目标图片与所述当前显示窗口之间的距离；根据更新后的距离，更新所述未完成动画的生成频率。

可选的，根据所述距离，获得所述目标内容的生成频率，包括：

f＝λ/2^m

其中，f表示所述生成频率，λ表示预设频率，m表示所述距离，当所述目标内容在所述当前显示窗口中时m＝0。

可选的，所述方法还包括：

在所述当前显示窗口中展示所述目标内容时，展示所述目标内容对应的动画，所述动画的播放频率为λ。

可选的，在获得所述目标内容与显示所述页面的当前显示窗口之间的距离之前，所述方法还包括：

判断所述目标内容的数量是否大于设定阈值；

若是，执行获得所述目标内容与显示所述页面的当前显示窗口之间的距离的操作。

第二方面，本说明书实施例还提供一种页面中动画的生成方法，所述方法包括：

浏览器在进行网页展示时，获得被展示网页中的目标内容，所述目标内容包括图片和/或图表；

判断所述目标内容的数量是否大于设定阈值；

若是，获得所述目标内容与显示所述网页的当前显示窗口之间的距离；

根据所述距离，获得所述目标内容的生成频率，所述距离与所述生成频率负相关；

按照所述生成频率，生成所述目标内容对应的动画。

可选的，根据所述距离，获得所述目标内容的生成频率，包括：

f＝λ/2^m

其中，f表示所述生成频率，λ表示预设频率，m表示所述距离，当所述目标内容在所述当前显示窗口中时m＝0。

第三方面，本说明书实施例提供一种页面中动画的生成装置，所述装置包括：

获取单元，用于在进行页面展示时，获得被展示页面中的目标内容及所述目标内容与显示所述页面的当前显示窗口之间的距离，所述目标内容包括图片和/图表；

计算单元，用于根据所述距离，获得所述目标内容的生成频率，所述距离与所述生成频率负相关；

生成单元，用于按照所述生成频率，生成所述目标内容对应的动画。

可选的，所述装置还包括：

更新单元，用于在所述当前显示窗口的位置发生变化时，获得未完成动画并更新所述未完成动画对应的目标内容与所述当前显示窗口之间的距离；

所述生成单元还用于根据更新后的距离，更新所述目标图片和/或目标图表的生成频率。

可选的，所述计算单元用于根据如下公式计算获得所述距离：

f＝λ/2^m

其中，f表示所述生成频率，λ表示预设频率，m表示所述距离，当所述目标内容在所述当前显示窗口中时m＝0。

可选的，所述装置还包括：

播放单元，用于在所述当前显示窗口中展示所述目标内容时，展示所述目标内容对应的动画，所述动画的播放频率为λ。

可选的，所述装置还包括：

判断单元，用于在获得所述目标内容与显示所述页面的当前显示窗口之间的距离之前，判断所述目标内容的数量是否大于设定阈值；

若是，执行获得所述目标内容与显示所述页面的当前显示窗口之间的距离的操作。

第四方面，本说明书实施例提供一种页面中动画的生成装置，所述装置包括：

获取模块，用于浏览器在进行网页展示时，获得被展示网页中的目标内容，所述目标内容包括图片和/或图表；

判断模块，用于判断所述目标内容的数量是否大于设定阈值；

所述获取模块还用于在所述判断结果为是的情况下，获得所述目标内容与显示所述网页的当前显示窗口之间的距离；

计算模块，用于根据所述距离，获得所述目标内容的生成频率，所述距离与所述生成频率负相关；

生成模块，用于按照所述生成频率，生成所述目标内容对应的动画。

可选的，所述计算单模块体用于根据如下公式计算获得所述距离：

f＝λ/2^m

其中，f表示所述生成频率，λ表示预设频率，m表示所述距离，当所述目标内容在所述当前显示窗口中时m＝0。

第五方面，本说明书实施例提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现以下步骤：

在进行页面展示时，获得被展示页面中的目标内容及所述目标内容与显示所述页面的当前显示窗口之间的距离，所述目标内容包括图片和/或图表；

根据所述距离，获得所述目标内容的生成频率，所述距离与所述生成频率负相关；

按照所述生成频率，生成所述目标内容对应的动画。

第六方面，本说明书实施例提供一种电子设备，包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行所述一个或者一个以上程序包含用于进行以下操作的指令：

在进行页面展示时，获得被展示页面中的目标内容及所述目标内容与显示所述页面的当前显示窗口之间的距离，所述目标内容包括图片和/或图表；

根据所述距离，获得所述目标内容的生成频率，所述距离与所述生成频率负相关；

按照所述生成频率，生成所述目标内容对应的动画。

本说明书实施例中的上述一个或多个技术方案，至少具有如下技术效果：

本说明书实施例提供一种页面中动画的生成方法，在进行页面展示时，获得被展示页面中的目标内容包括图片和/或图表，以及目标内容与显示页面的当前显示窗口之间的距离；根据该距离，获得目标内容的生成频率，距离与生成频率负相关；按照对应的生成频率，生成目标内容对应的动画，即动画的生成频率随着与显示窗口的距离的增加而逐步降低，从而降低同一时间生成动画的性能消耗，从而解决了现有技术中多个动画同时执行导致的页面卡顿的技术问题，提高了页面展示的流畅性。

附图说明

为了更清楚地说明本说明书实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本说明书的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本说明书实施例提供的一种页面中动画的生成方法的流程图；

图2为本说明书实施例提供的一种页面中动画的生成装置的示意图；

图3为本说明书实施例提供的另一种页面中动画的生成装置的示意图；

图4为本说明书实施例提供的一种电子设备的示意图。

具体实施方式

为使本说明书实施例的目的、技术方案和优点更加清楚，下面将结合本说明书实施例中的附图，对本说明书实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本说明书一部分实施例，而不是全部的实施例。基于本说明书中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本说明书保护的范围。

在本说明书实施例提供一种页面中动画的生成方法、装置及电子设备，用于解决现有技术中多个动画同时执行导致的页面卡顿的技术问题，提高页面展示的流畅性。

下面结合附图对本说明书实施例技术方案的主要实现原理、具体实施方式及其对应能够达到的有益效果进行详细的阐述。

本申请实施例提供一种页面中动画的生成方法，可以应用于浏览器，也可以应用于一般app中的页面展示。请参考图1，该页面中动画的生成方法包括：

s110：在进行页面展示时，获得被展示页面中的目标内容，以及所述目标内容与显示所述页面的当前显示窗口之间的距离；

s120：根据所述距离，获得所述目标内容的生成频率，所述距离与所述生成频率负相关；

s130：按照所述生成频率，生成所述目标内容对应的动画。

通常情况下，为了提供页面的展示效果，一个页面中会包含一个或者多个目标内容需要进行动画，常见的，包括图片和/或图表需要进行动画，从而进行动画展示。下面以图片、图表为例对上述动画的生成方法进行说明。

在进行页面展示时，需要先根据页面数据生成相应的图片、图表，并对图片、图表进行动画。对图表进行动画时，执行s110获得被展示页面中的图片和/或图表，以及图片和/或图表各自与显示页面的当前显示窗口之间的距离m。可以根据页面中图片、图表的后缀名识别获得对应的图片、图表，以及根据图片、图表在页面中的坐标和当前显示串口的坐标获得距离m。

其中，获取距离m时可以通过如下任一方式获取。方式一、获得图片或者图表距离当前显示窗口的顶边的长度距离l作为距离m。方式二、将当前显示窗口的高度h作为距离单位，计算每个图片和/或每个图表距当前显示窗口的长度距离l与高度h之间的比值向下取整：m＝floor(l/h)，floor(x)为向下取整函数，例如：假设h＝5cm，l＝8cm，那么m＝floor(l/h)＝1。

在获得图片和/或图表各自与当前显示窗口之间的距离之后，继续执行s120根据获得的距离m获得对应图片和/或图表的生成频率，逐步减小距离当前显示窗口远的图片和/或图表的生成频率。距离当前显示窗口越远的图片和/或图表，在下一时刻被展示的可能性就越小，对其动画的生成频率的要求就越低，减小其动画的生成频率有利于降低当前时刻生成动画的性能消耗。

具体的，可以通过如下公式计算获得各个图片、图表的生成频率：

f＝λ/2^m

其中，f表示生成频率，λ表示预设频率，m表示图片或者图表与当前显示窗口的距离，当图片和/或图表在当前显示窗口中时m＝0。λ可以根据动画播放时的频率来进行设定，例如：流畅的动画需要保持60帧/秒，那么λ可以设置为60帧/秒。在当前显示窗口中展示图片和/或图表时，可以采用播放频率λ来展示各个图片和/或图表对应的动画，保证页面展示过程流畅。

当然，也可以通过公式f＝λ/(2*m)，或者，f＝f1+*λ/2^m(f1表示预设的最小生成频率，如1帧/秒)来计算获得生成频率，只要能够使距离当前显示窗口越远的图片、图表的动画生成频率越低即可，本申请实施例并不限制生成频率的具体计算方式。

在s120获取到各个图片和/或图表对应的生成频率之后，执行s130根据每个图片和/或图表的生成频率，对页面中的图片和/或图表进行动画。例如：假设页面中图表a距离当前显示窗口的距离为0，图表b距离当前显示窗口的距离为2，λ为60帧/秒，那么图表a、b的生成频率分别为60帧/秒、15帧/秒，那么在同一时刻页面生成动画的性能消耗则为75帧/秒，相对于同时按照同样的频率生成动画的性能消耗120帧/秒，其性能消耗大大降低。

上述实施例提供的页面中动画的生成方法，对多图表的页面的动画性能消耗的降低效果十分突出，可以将该页面中动画的生成方法针对多图表页面进行应用。具体的，可以在s120之前，判断当前页面中的图片和/或图表的数量是否大于设定阈值；若是，执行s120获得各个图片和/或图表与当前显示窗口之间的距离，进而执行s130根据获得的距离生成各个图片和/或图表对应的动画；若否，则可以按照现有的动画生成方案进行。例如：以一个页面中有20个图表为例，每2个图表在一个显示窗口中计算，默认的情况下，绘制的频率是20*60＝1200帧/秒，使用了本实施例提供的方法后，绘制的频率是：2*60+2*30+2*15+2*8+2*4+2*2+8*1＝246帧/秒，其中最小绘制频率为1帧/秒，本实施例提供的动画生成方案与现有技术相比，其开销仅仅是现有技术的1/5。

在具体实施过程中，页面在进行展示时，用户往往会根据自己的需求不时的拖动当前显示窗口的进度条，来改变当前显示窗口的位置。在当前显示窗口的位置发生改变时，获得未完成动画，并更新未完成动画对应的目标内容与当前显示窗口之间的距离；根据更新后的距离，更新未完成动画的生成频率。例如：假设t1时刻，图片a距离当前显示窗口的距离为2，其动画的生成频率是15帧/秒，t2时刻用户改变当前显示窗口的位置，图片a与改变后的当前显示窗口的距离为0，那么更新图片a对应的动画生成频率为60帧/秒，以快速完成动画并进行展示。

下面以一个完整的实例对页面中动画的生成方法进行完整的说明：

假设在浏览器进行网页展示时，首先，获得被展示网页中的目标内容。接着，判断网页中目标内容的数量是否大于设定阈值，其中设定阈值可以为大于当前显示窗口中最多能够容纳的目标内容的量如＞3。进一步的，若判断结果为是，则获得网页中目标内容与显示网页的当前显示窗口之间的距离m；根据距离m，获得页面中各个目标内容的生成频率，使得距离m与生成频率负相关，如根据公式f＝λ/2^m计算获得生成频率，f表示生成频率，λ表示预设频率，当目标内容在当前显示窗口中时m＝0；进而按照获得的生成频率，生成各个目标内容对应的动画。

请参考图2，基于上述实施例提供的一种页面中动画的生成方法，本实施例还对应提供一种页面中动画的生成装置，该装置包括：

获取单元21，用于在进行页面展示时，获得被展示页面中的目标内容及所述目标内容与显示所述页面的当前显示窗口之间的距离，所述目标内容包括图片和/或图表；

计算单元22，用于根据所述距离，获得所述目标内容的生成频率，所述距离与所述生成频率负相关；

生成单元23，用于按照所述生成频率，生成所述目标内容对应的动画。

作为一种可选的实施方式，所述装置还包括：

更新单元24，用于在所述当前显示窗口的位置发生变化时，获得未完成动画并更新所述未完成动画对应的目标内容与所述当前显示窗口之间的距离；

所述生成单元23还用于根据更新后的距离，更新所述目标图片和/或目标图表的生成频率。

其中，计算单元22在计算图片和/或表格与当前显示窗口之间的距离时，可以根据如下公式进行：

f＝λ/2^m

其中，f表示所述生成频率，λ表示预设频率，m表示所述距离，当所述目标内容在所述当前显示窗口中时m＝0。

作为一种可选的实施方式，所述装置还可以包括：

播放单元25，用于在所述当前显示窗口中展示所述目标内容时，展示所述目标内容对应的动画，所述动画的播放频率为λ。

作为一种可选的实施方式，所述装置还可以包括：

判断单元26，用于在获得所述目标内容与显示所述页面的当前显示窗口之间的距离之前，判断所述目标内容的数量是否大于设定阈值；若是，执行获得所述目标内容与显示所述页面的当前显示窗口之间的距离的操作。

请参考图3，本说明书实施例还对应提供另一种页面中动画的生成装置，所述装置包括：

获取模块31，用于浏览器在进行网页展示时，获得被展示网页中的目标内容，所述目标内容包括图片和/或图表；

判断模块32，用于判断所述目标内容的数量是否大于设定阈值；

所述获取模块31还用于在所述判断结果为是的情况下，获得所述目标内容与显示所述网页的当前显示窗口之间的距离；

计算模块33，用于根据所述距离，获得所述目标内容的生成频率，所述距离与所述生成频率负相关；

生成模块34，用于按照所述生成频率，生成所述目标内容对应的动画。

其中，所述计算模块33具体用于根据如下公式计算获得所述距离：

f＝λ/2^m

其中，f表示所述生成频率，λ表示预设频率，m表示所述距离，当所述目标内容在所述当前显示窗口中时m＝0。

关于上述实施例中的装置，其中各个单元执行操作的具体方式已经在有关方法的实施例中进行了详细描述，此处不再详细阐述。

本说明书实施例中的上述一个或多个技术方案，至少具有如下技术效果：

本说明书实施例在进行页面展示时，获得被展示页面中的目标内容以及目标内容与显示页面的当前显示窗口之间的距离；根据该距离，获得目标内容的生成频率，距离与生成频率负相关；按照对应的生成频率，生成目标内容对应的动画，即动画的生成频率随着与显示窗口的距离的增加而逐步降低，从而降低同一时间生成动画的性能消耗，从而解决了现有技术中多个动画同时执行导致的页面卡顿的技术问题，提高了页面展示的流畅性。

请参考图4，是根据一示例性实施例示出的一种用于实现数据查询方法的电子设备700的框图。例如，电子设备700可以是计算机，数据库控制台，平板设备，个人数字助理等。

参照图4，电子设备700可以包括以下一个或多个组件：处理组件702，存储器704，电源组件706，多媒体组件708，输入/输出(i/o)的接口710，以及通信组件712。

处理组件702通常控制电子设备700的整体操作，诸如与显示，数据通信，及记录操作相关联的操作。处理元件702可以包括一个或多个处理器720来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件702可以包括一个或多个模块，便于处理组件702和其他组件之间的交互。

存储器704被配置为存储各种类型的数据以支持在设备700的操作。这些数据的示例包括用于在电子设备700上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器704可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(sram)，电可擦除可编程只读存储器(eeprom)，可擦除可编程只读存储器(eprom)，可编程只读存储器(prom)，只读存储器(rom)，磁存储器，快闪存储器，磁盘或光盘。

电源组件706为电子设备700的各种组件提供电力。电源组件706可以包括电源管理系统，一个或多个电源，及其他与为电子设备700生成、管理和分配电力相关联的组件。

i/o接口710为处理组件702和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

通信组件712被配置为便于电子设备700和其他设备之间有线或无线方式的通信。电子设备700可以接入基于通信标准的无线网络，如wifi，2g或3g，或它们的组合。在一个示例性实施例中，通信部件712经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信部件712还包括近场通信(nfc)模块，以促进短程通信。例如，在nfc模块可基于射频识别(rfid)技术，红外数据协会(irda)技术，超宽带(uwb)技术，蓝牙(bt)技术和其他技术来实现。

在示例性实施例中，电子设备700可以被一个或多个应用专用集成电路(asic)、数字信号处理器(dsp)、数字信号处理设备(dspd)、可编程逻辑器件(pld)、现场可编程门阵列(fpga)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器704，上述指令可由电子设备700的处理器720执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是rom、随机存取存储器(ram)、cd-rom、磁带、软盘和光数据存储设备等。

一种非临时性计算机可读存储介质，当所述存储介质中的指令由移动终端的处理器执行时，使得电子设备能够执行一种页面中动画的生成方法，所述方法包括：

在进行页面展示时，获得被展示页面中的目标内容及所述目标内容与显示所述页面的当前显示窗口之间的距离，所述目标内容包括图片和/或图表；根据所述距离，获得所述目标内容的生成频率，所述距离与所述生成频率负相关；按照所述生成频率，生成所述目标内容对应的动画。

应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制

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