用于展示图像元素的方法和装置与流程

本发明实施例大体上涉及图像元素处理技术，具体涉及用于展示图像元素的方法、装置、计算设备和计算机可读介质。

背景技术：

随着客户端应用的发展，客户端内嵌的互动活动的数量越来越多，针对客户端内嵌的互动活动的要求也越来越高。现有的客户端内嵌的互动活动一般使用客户端技术、gif技术和flash技术来展示图像元素。使用现有方法展示的互动活动相对比较简单，并且开发和维护效率很低、成本极高，兼容性差，也无法承载较为复杂的场景。

因此，如何提供一种既能承载复杂的场景，又能够提高开发和维护效率，降低开发和维护成本，同时具备较强兼容性的展示图像元素的方法，成为本领域技术人员亟待解决的问题。

技术实现要素：

有鉴于此，本发明实施例提供了一种用于展示图像元素的方法、装置、计算设备和计算机可读介质，以在提高开发和维护效率、降低开发和维护成本的同时，实现对复杂场景的展示，并且具备很强的兼容性。

根据本发明实施例的第一方面，提供了一种用于展示图像元素的方法，所述方法包括：监听图像元素触发事件，所述图像元素触发事件用于触发第一图像元素的替换，其中所述第一图像元素基于所述第一图像元素的引用路径在页面中显示；当监听到所述图像元素触发事件时，用第二图像元素的引用路径替换所述第一图像元素的引用路径；以及基于所述第二图像元素的引用路径在所述页面中显示所述第二图像元素，其中所述第一图像元素和/或所述第二图像元素包括逐帧动画。

根据本发明实施例的第二方面，提供了一种用于展示图像元素的装置，所述装置包括：监听图像元素模块，用于监听图像元素触发事件，所述图像元素触发事件用于触发第一图像元素的替换，其中所述第一图像元素基于所述第一图像元素的引用路径在页面中显示；引用路径替换模块，用于当监听到所述图像元素触发事件时，用第二图像元素的引用路径替换所述第一图像元素的引用路径；以及显示模块，用于基于所述第二图像元素的引用路径在所述页面中显示所述第二图像元素，其中所述第一图像元素和/或所述第二图像元素包括逐帧动画。

在一些实施例中，基于前述方案，所述页面基于系统样式进行配置；以及所述逐帧动画基于所述逐帧动画的动画样式进行配置，其中，所述系统样式至少包括所述逐帧动画的动画样式，其中，所述逐帧动画的动画样式至少包括所述逐帧动画的帧数和控制信息。

在一些实施例中，基于前述方案，所述装置还包括：监听页面模块，用于监听所述页面的尺寸改变；以及调整模块，用于当监听到所述页面尺寸改变时，调整所述逐帧动画的动画形态，其中所述动画形态至少包括所述逐帧动画的帧的尺寸。

在一些实施例中，基于前述方案，所述调整模块包括：设置模块，用于设置所述页面的长宽比例；复制模块，用于复制所述逐帧动画的动画类；以及切换模块，用于切换到所复制的动画类，以触发所述逐帧动画的动画形态调整。

在一些实施例中，基于前述方案，所述装置还包括：调用模块，用于当监听到所述页面尺寸改变时，重新调用所述系统方案样式以计算系统像素；在计算所述系统像素之后，重新调用所述逐帧动画的动画样式；以及配置模块，用于基于重新调用的动画样式来重新配置所述逐帧动画。

在一些实施例中，基于前述方案，所述监听图像元素模块包括：定义模块，用于定义一个或多个监听器；以及绑定模块，用于使用逻辑以将所述一个或多个监听器绑定到一个或多个图像元素触发事件。

在一些实施例中，基于前述方案，当所述第一图像元素和所述第二图像元素都包括逐帧动画时，所述第一图像元素和所述第二图像元素属于相同的逐帧动画类型，所述第一图像元素和所述第二图像元素具有相同的帧数，并且所述第一图像元素和所述第二图像元素的帧具有相同的尺寸。

在一些实施例中，基于前述方案，当所述第一图像元素或所述第二图像元素中的一个包括逐帧动画时，所述第一图像元素或所述第二图像元素中的另一个包括静态图片。

在一些实施例中，基于前述方案，显示所述第一图像元素或所述第二图像元素的页面包括web页面。

在一些实施例中，基于前述方案，所述逐帧动画的引用路径包括动画图片的引用路径，其中所述动画图片包括所述逐帧动画的各个帧的组合。

在一些实施例中，基于前述方案，当所述逐帧动画是css3逐帧动画时，所述动画图片是雪碧图。

在一些实施例中，基于前述方案，至少所述系统样式、所述动画样式以及所述动画图片是预先加载的。

根据本发明实施例的第三方面，提供了一种计算设备，所述计算设备包括存储器和处理器，所述存储器中存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行如上述发明实施例中所述的用于展示图像元素的方法。

根据本发明实施例的第四方面，提供了一种计算机可读介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行如上述发明实施例中所述的用于展示图像元素的方法。

本发明实施例可以包括以下有益效果：

在本发明的一些实施例所提供的技术方案中，通过替换图像元素的引用路径即完成页面中图像元素的替换，而无需对图像元素进行大量重新配置和控制，有效地提高了开发和维护效率，降低了开发和维护成本。在页面中以高效的方式显示和替换图像元素提高兼容性，同时可以承载较为复杂的场景。例如，在游戏互动的应用场景中，存在大量的图像元素显示和替换问题。传统技术需要对大量元素进行配置和控制，因此开发和维护成本极大，显示效果也不理想，也无法实现跨平台显示。而本发明实施例提供的技术方案可以高效地显示和替换游戏互动应用中的图像元素，极大节约成本，提高图像显示的复杂性和显示效果，同时还可以实现跨平台显示。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将结合附图对示例性实施例进行描述。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，在附图中：

图1示出了逐帧动画中的各个帧的示意图；

图2示出了根据本发明实施例的示例性系统架构；

图3示出了根据本发明实施例的用于展示图像元素的方法的流程图；

图4示出了根据本发明实施例的雪碧图的集合；

图5示出了图3所示的用于展示图像元素的方法中的监听图像元素触发事件的步骤的示意性流程图；

图6示出了根据本发明实施例的逻辑监听的示意图；

图7a-图7d示出了根据本发明实施例的javascript逻辑控制的示例应用；

图8示出了根据本发明的另一个实施例的用于展示图像元素的方法的流程图；

图9示出了图8所示的用于展示图像元素的方法中的调整逐帧动画的动画形态的步骤的示意性流程图；

图10示出了根据本发明实施例基于对象树来预加载资源的示意图；

图11示出了根据本发明实施例的用于展示图像元素的装置的示例性结构框图；

图12示出了根据本发明另一实施例的用于展示图像元素的装置的示例性结构框图；

图13示出了根据本发明实施例的一种示例应用场景；

图14a-图14d示出了根据本发明实施例的从用户的角度的展示图像元素的用户界面；

图15示出根据本发明实施例的计算设备的示意性框图。

应当理解，对于本领域技术人员来说，还可以根据这些附图获得其他附图。

具体实施方式

以下结合说明书附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明，并且在不冲突的情况下，本发明中的实施例和实施例中的特征可以相互组合。

所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本发明的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本发明的技术方案而没有特定细节中的一个或更多，或者可以采用其他的方法、组件、装置、步骤等。在其他情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本发明的各方面。

附图中所示的框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行，除非明确说明。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。

在详细介绍本发明的实施例之前，首先对一些相关的概念进行解释：

逐帧动画：逐帧动画是一种常见的动画形式，其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3d效果等等。图1示出了逐帧动画的各个帧的示意图。如图1所示，示出的每个帧都是行走动作的关键分解动作，在连续播放这些帧的时候，会形成行走动作的动画。

超文本标记语言5（html5，也称为h5）：一种超文本标记语言，拥有包括语义特性、本地存储特性、设备兼容特性、连接特性、网页多媒体特性、三维、图形及特效特性和性能与集成特性等多重特性。h5中引入许多元素和属性，赋予网页更好的意义和结构，提供数据与应用接入的开放接口，使外部应用可以直接与浏览器内部的数据直接相连。

层叠样式表(cascadingstylesheets，缩写为css）：一种样式表语言，用来描述html或xml（包括如svg、mathml、xhtml之类的xml分支语言）文档的呈现。css描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

css3：css技术的升级版本，在页面制作时采用css技术，可以有效地对页面的布局、字体、颜色、背景和其它效果进行更加精确的控制。

文档对象模型（documentobjectmodel，简称dom）：一种处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(api),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,html和xml文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。dom是一种基于树的api文档。

cssom：一组允许javascript操作css的api。它非常类似于dom，但是用于css而不是html。它允许用户动态读取和修改css样式。

js(javascript)：一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型；js是广泛用于客户端的脚本语言，最早是在html网页上使用，用来给html网页增加动态功能，由于js是一种基于对象的脚本语言，能运用已经创建的对象，通过对象方法的调用结合脚本的相互作用可以实现许多功能。

图像元素：指各种图形和影像元素的总称，可以包括例如逐帧动画、静态图片。

图2示出了根据本发明实施例的示例性系统架构200，可以在该系统中实施本文描述的各种方法。如图2所示，系统架构200包括服务器210、网络240、一个或多个终端设备250。

服务器210存储和运行可以执行本文所描述的各种方法的指令，其可以是单个服务器或服务器集群。应理解，本文所提及的服务器典型地为具有大量存储器和处理器资源的服务器计算机，但是其他实施例也是可能的。

网络240的示例包括局域网（lan）、广域网（wan）、个域网（pan）、和/或诸如因特网之类的通信网络的组合。服务器210以及一个或多个终端设备250的每一个可以包括能够通过网络240进行通信的至少一个通信接口（未示出）。这样的通信接口可以是以下项中的一个或多个：任何类型的网络接口（例如，网络接口卡（nic））、有线或无线（诸如ieee802.11无线lan（wlan））无线接口、全球微波接入互操作（wi-max）接口、以太网接口、通用串行总线（usb）接口、蜂窝网络接口、bluetooth™接口、近场通信（nfc）接口等。通信接口的另外的示例在本文其他地方描述。

终端设备250可以是任何类型的移动计算设备，包括移动计算机或移动计算设备（例如，microsoft®surface®设备、个人数字助理（pda）、膝上型计算机、笔记本计算机、诸如appleipad™的平板计算机、上网本等）、移动电话（例如，蜂窝电话、诸如microsoftwindows®电话的智能手机、appleiphone、实现了google®android™操作系统的电话、palm®设备，blackberry®设备等）、可穿戴式计算设备（例如智能手表、头戴式设备，包括智能眼镜，如google®glass™，等）或其他类型的移动设备。在一些实施例中，终端设备250也可以是固定式计算设备。此外，在系统包括多个终端设备250的情况下，该多个终端设备250可以是相同或不同类型的计算设备。

终端设备250可以包括显示屏251以及可以经由显示屏251与终端用户交互的终端应用252。终端设备250可以例如经由网络240与服务器210进行交互，例如向其发送数据或从其接收数据。终端应用252可以为本地应用程序、网页（web）应用程序或者作为轻量化应用的小程序（liteapp）。在终端应用252为需要安装的本地应用程序的情况下，可以将终端应用252安装在终端设备250中。在终端应用252为web应用程序的情况下，可以通过浏览器访问终端应用252。在终端应用252为小程序的情况下，可以通过搜索终端应用252的相关信息（如终端应用252的名称等）、扫描终端应用252的图形码（如条形码、二维码等）等方式来在终端设备250上直接打开终端应用252，而无需安装终端应用252。

在本发明实施例的一个应用场景中，用户可以使用终端设备250通过网络240向服务器210发送请求，例如在游戏抽奖中，终端设备250可以向服务器发送抽奖请求。服务器210在接收到请求后，可以向终端设备250返回结果消息，例如返回抽奖结果。

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

图3是根据本发明实施例的用于展示图像元素的方法的流程图300。首先，在步骤310中，基于第一图像元素的引用路径在页面中显示第一图像元素。在步骤320中，监听图像元素触发事件，所述图像元素触发事件用于触发第一图像元素的替换。在步骤330中，当监听到所述图像元素触发事件时，用第二图像元素的引用路径替换所述第一图像元素的引用路径。具体而言，仅需要替换逐帧动画的引用路径即可完成逐帧动画的替换，而无需像常规方法那样在替换时需要针对逐帧动画的每一帧重写编写动画样式。同时，还可以通过更换引用路径来实现逐帧动画和静态图片的替换，而无需针对不同类型的图像元素编写大量的配置数据和控制数据。因此，有效地提高了开发和维护效率，降低了开发和维护成本。在步骤340中，基于所述第二图像元素的引用路径在所述页面中显示所述第二图像元素。

在一个实施例中，页面可以是内嵌在客户端的web页面，客户端可以是如图2所述终端设备250中的终端应用252，例如手游、端游、微信等。以web页面显示图像元素可以实现跨终端设备显示，而无需针对不同终端设备编写不同的显示方式，大大提高了兼容性，降低了开发成本。与此同时，以web页面显示图像元素更有利于维护，例如当需要对图像元素进行修改时，可以直接针对内嵌在客户端中的web页进行修改，而无需更新客户端应用。在另一个实施例中，页面也可以是浏览器中的web页面，例如web页面可以是终端设备的浏览器。在一个应用场景中，在用户分享在客户端内的页面中显示的活动时，其他用户可以在终端的浏览器中直接打开，而无需下载客户端，可以有效的提高沟通效率。在又一个实施例中，web页也可以与其它设备结合。在一个应用场景中，本发明实施例还可以用于与游戏引擎结合的web页。例如，游戏引擎可以很好的实现模拟日常生活、物理场景等复杂的场景。但是利用游戏引擎模拟复杂场景的成本非常高、也需要大量数据支持。而利用本发明实施例中的方法，将web和游戏引擎相结合，可以实现高效开发和维护，而用户体验效果与单独利用游戏引擎基本一致。

图像元素指各种图形和影像元素的总称。在本发明实施例中，第一图像元素和第二图像元素可以包括逐帧动画或静态图片。在本发明的一个实施例中，第一图像元素和第二图像元素可以均是逐帧动画。例如，在足球游戏中，当需要替换不同球员的动画时，可以直接替换逐帧动画的地址完成替换，而无需针对不同动画的每个帧重新计算像素、重新配置控制信息等。当第一图像元素和第二图像元素均是逐帧动画时，第一图像元素和第二图像元素属于相同的逐帧动画类型，例如两者都属于css3逐帧动画。并且，第一图像元素和第二图像元素具有相同的帧数，第一图像元素和第二图像元素的帧具有相同的尺寸。在本发明的另一个实施例中，第一图像元素或第二图像元素其中之一可以是逐帧动画，而第一图像元素或第二图像元素中的另一个可以是普通静态图片。例如，在上述足球游戏中，可能需要将示出转会费、金币、天赋等的静态图片替换成示出球员的逐帧动画。本发明实施例可以通过仅仅更换地址的方式直接将静态图片替换为逐帧动画（或反之），而无需针对不同类型的图像元素编写大量的配置数据和控制数据。如下面代码所示，在本发明实施例中，普通静态图片的数据源与逐帧动画的数据源以相同格式限定，其区别仅仅在于逐帧动画的数据类型被定义为“film”类型而普通静态图片的数据类型被定义为“pic”类型。因此，根据本发明实施例，可以实现仅替换逐帧动画的引用路径和普通静态图片的引用路径即可完成逐帧动画和普通静态图片的替换。

{

sid:"",

name:"转会费*8000万",

num:"8000万",

stype:"pic",

pic:"transferfee.png",

type:1,

color:"pruple",

},

{

sid:"",

name:"传世典藏球员",

num:"1",

stype:"film",

pic:"weiaila.png",

type:1,

color:"aurum",

}。

在本发明的一个实施例中，当图像元素是逐帧动画时，逐帧动画的引用路径可以是动画图片的引用路径，其中动画图片包括逐帧动画的各个帧的组合。动画图片的一个示例是雪碧图（英文：sprite）。在css技术中，雪碧图是一种css图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。在本发明实施例中，可以将逐帧动画中的各个帧和背景图像合并到一张图片上，然后利用css的背景定位将处于不同位置的不同帧按需要显示出来。图4示出了根据本发明实施例的9张雪碧图的集合。应当理解，示出的9张雪碧图仅仅是示例数量，可以使用更多或更少的雪碧图。如图4所示，每张雪碧图都存在背景图像（例如，黑色背景），而每个帧都排列在背景图像的不同位置，形成一张图片。因而可以通过调用雪碧图的地址来调用逐帧动画。以下示出了基于雪碧图地址调用逐帧动画的示例代码：

<emclass="purple"><spanclass="film"style="background-image:url("//game.gtimg.cn/images/ffm/act/a20200408lottery/reward/film/7101masailuo.png");animation-name:film;"></span></em>。

在一个实施例中，页面基于系统样式进行配置，其中，系统样式可以包括逐帧动画的动画样式、其他图形元素的样式以及页面中各个元素的位置。在一个实施例中，逐帧动画基于逐帧动画的动画样式进行配置，其中，逐帧动画的动画样式至少包括逐帧动画的帧数和控制信息。以下代码示出了根据本发明实施例的逐帧动画的通用样式，应用以下通用样式可以将逐帧动画的每个帧动画化，进而显示逐帧动画。在以下代码中，“keyframes”与“webkit-keyframes”代表的意义完全相同，有些低级浏览器可能不支持keyframes而能识别webkitkeyframes，因此上述两段代码是同一个功能语法的不同语法写法。在此，以“keyframes”为例来解释逐帧动画的动画样式。在该示例中，逐帧动画具有15个帧，分别处于背景图片的不同位置，帧的位置由“background-position”定义，其中rem是一种图像长度单位。因此，上述通用样式表示：在0%时，显示位置在background-position:00的帧；在7.1%时，显示位置在background-position:0-1rem的帧；以此类推。在按上述方案连续播放这些帧的时候，即可将帧动态化为动画形态，显示出逐帧动画。

@keyframesfilm{

0%{background-position:00;}

7.1%{background-position:0-1rem;}

14.2%{background-position:0-2rem;}

21.3%{background-position:0-3rem;}

28.4%{background-position:0-4rem;}

35.5%{background-position:0-5rem;}

42.6%{background-position:0-6rem;}

49.7%{background-position:0-7rem;}

56.8%{background-position:0-8rem;}

63.9%{background-position:0-9rem;}

71%{background-position:0-10rem;}

78.1%{background-position:0-11rem;}

85.2%{background-position:0-12rem;}

92.3%{background-position:0-13rem;}

100%{background-position:0-14rem;}

}

@-webkit-keyframesfilm{

0%{background-position:00;}

7.1%{background-position:0-1rem;}

14.2%{background-position:0-2rem;}

21.3%{background-position:0-3rem;}

28.4%{background-position:0-4rem;}

35.5%{background-position:0-5rem;}

42.6%{background-position:0-6rem;}

49.7%{background-position:0-7rem;}

56.8%{background-position:0-8rem;}

63.9%{background-position:0-9rem;}

71%{background-position:0-10rem;}

78.1%{background-position:0-11rem;}

85.2%{background-position:0-12rem;}

92.3%{background-position:0-13rem;}

100%{background-position:0-14rem;}

}。

图5示出了图3所示的用于展示图像元素的方法中的监听图像元素触发事件的步骤（即方法300中的步骤320）的示意性流程图。在步骤321中，定义一个或多个监听器。具体而言，一个或多个监听器可以保存在事件监听器注册表中。监听器可以监听点击屏幕两次、按压页面的特定区域等等任何适当的行为。在步骤322中，使用逻辑以将一个或多个监听器绑定到一个或多个图像元素触发事件。具体而言，可以使用js逻辑或其他适当的逻辑将事件监听器注册表中的一个或多个监听器绑定到一个或多个图像元素触发事件。例如可以将监听按压页面的特定区域的监听器绑定到图像元素触发事件，在绑定之后，通过逻辑绑定的监听器与触发事件相关联。此后，当监听器发现按压页面特定区域的行为，就会返回发生了图像元素触发事件的结果。

图6示出了根据本发明实施例的逻辑监听的示意图。如图6所述，可以在事件源中定义一个或多个事件。具体来说，事件可以包括手指按压屏幕、手指离开屏幕、旋转屏幕、拖动、也可以包括鼠标点击等。当事件源中的事件发生时，通过事件广播器广播该事件，在事件监听注册表中寻找与该事件对应的监听器，找到监听器之后返回结果。在一个应用场景中，事件可以是用户手指按压屏幕。当用户手指按压屏幕时，通过事件广播器广播该事件，并在事件监听注册表中寻找与该事件对应的监听器。例如定义监听器为监听手指按压特定区域，则在用户按压屏幕后，通过事件广播器广播该事件，并在事件监听注册表中寻找与该事件对应的监听器。如果用户按压了该特定区域，则可以找到对应的监听器。在找到对应的监听器后，返回结果，例如返回特定区域被按压。如果监听器被逻辑绑定到了某个事件，则可以返回对应事件被触发的结果。如果用户没有按压该特定区域，则将不会找到对应的监听器，因此不会返回结果或者返回没有对应监听器的结果，与监听器绑定的事件不会被触发。应当理解，事件源中的事件也可以是与定时器相关联的。例如，可以将监听器定义为某个计时器达到10s，那么当该计时器达到10s的事件发生时，可以找到该监听器并返回相关结果。在一个应用场景中，这可以用来计时以替换某些图像元素，例如，10s后替换逐帧动画。

现在结合图5和图6描述根据本发明实施例的一个应用场景，首先将监听器定义为监听按压显示“抽奖按钮”的特定区域。然后将该监听器绑定到抽奖触发事件。然后，当用户点击“抽奖”之后，事件源中的手指按压屏幕事件发生。通过事件广播器广播该事件，并在事件监听注册表中寻找与该事件对应的监听器。在找到该监听器后，因为该监听器已与抽奖触发事件绑定，所以返回抽奖触发事件发生。响应于抽奖事件发生，系统即可初始化奖池，然后根据服务器返回的数据判断用户中了金奖还是银奖。如果用户中了金奖，则将动画类转换成金奖池的动画类名，如果用户中了银奖，则将动画类转换成银奖池动画类名。在一个示例中，当用户抽到金奖时，初始化动画，调用资源和样式，显示金奖动画。在一个示例中，在动画完成后，可以将动画隐藏、归位，并且显示中奖提示。以下是实现上述应用场景的示例代码，其中“functioninitpoll()”用于初始化奖池，“if(skin=="gold")”用于判断用户是否中了金奖。如果中了金奖则执行if函数中的指令，其中“newmo.film(document.queryselector('#goldlotteryanimate')”用于初始化动画，调用资源和样式。在动画完成后，使用“anicomplete:function()”函数将动画隐藏、归位，并且显示中奖提示。

functioninitpoll(){//初始化奖池

pttsendclick('initpool','init','初始化奖池');

if(skin=="gold"){

varpolldata=rewardpoll.goldpool;

document.getelementbyid("superpollprevlist").classname="superpollprevlist1";

document.getelementbyid("normalpollprevlist").classname="normalpollprevlist1";

changebgfootball("gold");

if(!goldlotteryanimate){

varpath="//game.gtimg.cn/images/ffm/act/a20200408lottery/reward/animate/lottery_yellow/";

varresource=[];

for(vari=0;i<126;i++){

varname=(array(5).join(0)+i).slice(-5);

resource.push(path+'yellow_'+name+'.png');

};

goldlotteryanimate=newmo.film(document.queryselector('#goldlotteryanimate'),{

resource:resource,

totalframe:126,

//onplaying:function(index,i){

//console.log(index);

//},

anicomplete:function(){

document.getelementbyid("goldlotteryanimate").style.display="none";

document.getelementbyid('goldfootball').style.display="";

document.getelementbyid("overlay").style.display="none";

goldanimatebg.play(51,'backward')

lotterynotice();。

图7a-7d示出了根据本发明实施例的js逻辑控制的示例应用。如图所示，js逻辑可以用来控制元素的动效延时展示。如图7a所示，可以用中间有条状空隙的白底图片盖住图片。在图7b中，在每条空隙上建立一个白色的条状物透明按钮。可以将点击透明按钮定义为事件监听注册表中的监听器。然后在图7c中，将动画效果事件绑定到监听器。具体来说，在白色条状物下方设置动效，按照飞出（向下）-飞出（向上）的顺序依次设置，从第二个透明按钮开始设置延时。如图7d所示，当点击白色条状物的透明按钮时，事件源中的点击事件发生，通过事件广播器广播该事件，并在事件监听注册表中寻找监听器。找到监听器后返回绑定的动画效果事件，图像中的白色条状物按设置依次飞出，展示出被覆盖的图像元素。最后效果即为元素的动效延时展示。

图8示出了根据本发明的另一个实施例的用于展示图像元素的方法的流程图。在本发明实施例中，方法300还可以包括在步骤350中，监听页面的尺寸改变。因为在web页面体系下没有强制显示页面的大小，因此可以改变页面的尺寸。改变页面尺寸可以是简单的旋转屏幕（例如在手机端），也可以是托动页面修改尺寸（例如在计算机端），也可以是其他任何合适的方法。监听页面尺寸改变的方法与上文监听图像元素事件的方法相同，在此不再赘述。

在步骤360中，当监听到页面尺寸改变时，调整逐帧动画的动画形态。页面尺寸发生改变则需要调整逐帧动画的动画形态。在一个实施例中，逐帧动画的动画形态可以包括逐帧动画的帧的尺寸。在页面尺寸变化后，如果仍然按照原来的帧尺寸显示逐帧动画，可能会造成显示问题，例如原本应该播放1帧时，结果显示了1.5帧。因此，需要在页面尺寸变化后改变逐帧动画的动画形态，重新计算帧的尺寸。

在步骤370中，重新调用系统方案样式以计算系统像素。在页面尺寸发生变化后，页面中的各个元素的大小和相对位置都可能发生改变，因此需要重新调用系统方案样式以重新计算系统像素。

在步骤380中，在计算系统像素之后，重新调用逐帧动画的动画样式。在计算好系统像素之后，可以重新调用逐帧动画的动画样式，以根据新的系统样式重新设置动画样式。需要注意的是，调用动画样式需要在系统像素计算之后，以防止动画帧的像素点计算不正确。调用系统样式和动画样式的代码如下所示：

win.addeventlistener('domcontentloaded',function(){

setfont();

},false);

//win.addeventlistener('onorientationchange'inwindow'orientationchange':'resize',setfont,false);

})(window,document);

</script>

<linkrel="stylesheet"href="css/style.css">

</head>。

在步骤390中，基于重新调用的动画样式来重新配置逐帧动画。

需要注意的是，虽然监听页面的尺寸改变的方法步骤被标记为350，但这并不意味着监听页面的尺寸改变的方法步骤在显示第二图像元素之后进行。实际上，监听页面尺寸改变的步骤可以在任何适当的时间进行，例如可以在系统载入后即进行监听。监听到页面尺寸改变后的步骤也可以在任何适当时间进行，例如，在一个实施例中，可以在显示第一图像元素之前就发现页面尺寸改变。此时可以调整逐帧动画的动画形态、重新调用系统方案样式以计算系统像素、重新调用逐帧动画的动画样式，然后以新的动画样式和尺寸显示出第一图像元素。在另一个实施例中，可以在显示第一图像元素之后、在监听到图像元素触发事件之前。此时可以调整逐帧动画的动画形态、重新调用系统方案样式以计算系统像素、重新调用逐帧动画的动画样式，然后以新的动画样式和尺寸重新显示出第一图像元素。在又一个实施例中，可以在监听到图像元素触发事件之后、在显示第二图像元素之前发现屏幕尺寸改变。此时可以调整逐帧动画的动画形态、重新调用系统方案样式以计算系统像素、重新调用逐帧动画的动画样式，在更换第二图像元素的引用路径后，以新的动画样式和尺寸显示出第二图像元素。在再一个实施例中，可以在显示第二图像元素之后发现屏幕尺寸改变。此时可以调整逐帧动画的动画形态、重新调用系统方案样式以计算系统像素、重新调用逐帧动画的动画样式，然后以新的动画样式和尺寸重新显示出第一图像元素。

图9示出了图8所示的用于展示图像元素的方法中的调整逐帧动画的动画形态的步骤（即方法300中的步骤360）的示意性流程图。在步骤361中，设置页面的长宽比例。具体来说，因为无论页面尺寸如何改变，都是页面长宽比的改变。因此根据当前页面的长宽比例来设置页面的长宽比例这一参数。

在步骤362中，复制逐帧动画的动画类（英文：class）。具体来说，在监听到页面尺寸改变时，针对当前的动画类复制出另一个动画类。因为是复制出的动画类，所以两个动画类都同属同一种动画类型，例如可以都属于css3逐帧动画。在一个实施例中，复制出的动画类可以仅仅是动画类名称的改变。例如下列代码是复制出的动画类的动画样式。可以发现，与之前定义的动画样式相比，两者的区别仅仅在于名称不同，即原始动画类的名称为“film”而复制出的动画类名称为“film2”。

@keyframesfilm2{

0%{background-position:00;}

7.1%{background-position:0-1rem;}

14.2%{background-position:0-2rem;}

21.3%{background-position:0-3rem;}

28.4%{background-position:0-4rem;}

35.5%{background-position:0-5rem;}

42.6%{background-position:0-6rem;}

49.7%{background-position:0-7rem;}

56.8%{background-position:0-8rem;}

63.9%{background-position:0-9rem;}

71%{background-position:0-10rem;}

78.1%{background-position:0-11rem;}

85.2%{background-position:0-12rem;}

92.3%{background-position:0-13rem;}

100%{background-position:0-14rem;}

}。

在步骤363中，切换到所复制的动画类，以触发逐帧动画的动画形态调整。在一个实施例中，在css3逐帧动画中，切换到所复制的动画类可以是仅仅修改动画类的名称。在css3逐帧动画技术下，当动画类的名称被修改时，即可以触发css3逐帧动画重置逐帧动画的计算方式，以完成逐帧动画的动画形态调整。传统的通过每次js动态激活和插入以及控制逐帧动画的方式极为难以维护，采用css3逐帧动画来实现，维护和更新效率更高、更加节省成本。

以下代码示出了在监听到页面尺寸改变后，调整逐帧动画的动画形态的示例代码：

win.addeventlistener('resize',function(){

setfont();

varfilms=document.queryselectorall('.film');

for(vari=0;i<films.length;i++){

if(film=="film"){

films[i].style.animationname="film2";

film="film2";

}else{

films[i].style.animationname="film";

film="film";

}

//

}

},false);。

应当理解，为了提高显示效率，可以在执行方法300之前对样式、图片等资源进行预先加载。预加载可以有效防止当逐帧动画按计划显示某个帧时发现该帧尚未加载完成，因此可以有效避免逐帧动画出现卡顿的情况，有效地提高了显示效率。在一个实施例中，可以通过文档对象模型预先加载样式、逐帧动画的动画图片等资源。基于对象树对页面中的图像元素进行创建和维护有很高的效率，可以很大地节约成本。在一个实施例中，同样类型的逐帧动画的帧尺寸固定，以方便后续调用。

图10示出了根据本发明实施例基于对象树来预加载资源的示意图。如图10所示，首先要构建文档对象模型（英文缩写：dom）树与css对象模型（英文缩写：cssom）树。构建dom树的步骤包括：转换，根据文档的指定编码将字节转换成字符；令牌化，根据已有标准将字符串转换成令牌；词法分析，将令牌转换成定义其属性和规则的节点；构建dom树，将创建的节点链接在一个树状数据结构内。构建cssom树的常见步骤与构建dom树类似，包括转换、令牌化、词法分析、构建cssom树等步骤。应当理解，也可以使用其它方法步骤构建dom树和cssom树。在构建完dom树和cssom树之后，通过将dom树和cssom树的节点连接在一起，使其同时具有dom树和cssom树中定义的属性和规则，从而构建渲染树（英文：rendertree）。渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。为了形成渲染树，大致需要进行下列步骤：从dom树根节点开始，遍历每一个可见的节点。一些节点是完全不可见的（比如meta标签等），这些节点会被忽略，因为他们不会影响渲染的输出。一些节点是通过css样式隐藏了，这些节点同样被忽略——例如图10中的span节点在渲染树中被忽略，因为span样式是display:none。对每一个可见的节点，找到合适的匹配的cssom规则，并且应用样式显示可见节点。

可以认识到，本发明实施例通过在客户端使用内嵌web形态网页利用多种h5动画互动技术实现图像元素展示，以提升客户端开发效率和效果。具体而言，本发明实施例通过css3逐帧动画、js逐帧动画、视频动画三者互动结合，形成客户端动画库，结合客户端中的人物及道具，生成动态动画以达到图像元素展示的目的。本发明实施例兼容性强，提高了开发和维护效率，降低了开发和维护成本，同时可以显示复杂的场景。应当理解，虽然本发明实施例采用了css3逐帧动画作为示例，但是也可以使用其他类似的逐帧动画来实现本发明实施例。

图11示出了根据本发明实施例的用于展示图像元素的装置的示例性结构框图。如图11所示，装置1100包括监听图像元素模块1110、引用路径替换模块1120和显示模块1130。

监听图像元素模块1110用于监听图像元素触发事件，图像元素触发事件用于触发第一图像元素的替换，其中第一图像元素基于第一图像元素的引用路径在页面中显示。引用路径替换模块1120用于当监听到图像元素触发事件时，用第二图像元素的引用路径替换第一图像元素的引用路径。显示模块1130用于基于第二图像元素的引用路径在页面中显示第二图像元素。

在一个实施例中，页面可以是内嵌在客户端的web页面。在另一个实施例中，web页面也可以不内嵌在客户端中，例如web页面可以是终端设备的浏览器或者web可以与其他设备结合。图像元素指各种图形和影像元素的总称。在本发明实施例中，第一图像元素和第二图像元素可以包括逐帧动画或静态图片。在本发明的一个实施例中，第一图像元素和第二图像元素可以均是逐帧动画。此时，第一图像元素和第二图像元素属于相同的逐帧动画类型，例如两者都属于css3逐帧动画。并且，第一图像元素和第二图像元素具有相同的帧数，第一图像元素和第二图像元素的帧具有相同的尺寸。在本发明的另一个实施例中，第一图像元素或第二图像元素其中之一可以是逐帧动画，而第一图像元素或第二图像元素中的另一个可以是普通静态图片。

在本发明的一个实施例中，当图像元素是逐帧动画时，逐帧动画的引用路径可以是动画图片的引用路径，其中动画图片包括逐帧动画的各个帧的组合。在本发明的一个实施例中，当逐帧动画是css3逐帧动画时，动画图片可以是雪碧图。在一个实施例中，可以通过文档对象模型预先加载样式、逐帧动画的动画图片等资源。

在本发明的一个实施例中，监听图像元素模块1110还包括定义模块1111，其用于定义一个或多个监听器。监听图像元素模块1110还包括绑定模块1112，其用于使用逻辑以将一个或多个监听器绑定到一个或多个图像元素触发事件。

图12示出了根据本发明另一实施例的用于展示图像元素的装置的示例性结构框图。如图12所示，装置1200除了监听图像元素模块1210、引用路径替换模块1220和显示模块1230之外，还可以包括监听页面模块1240、调整模块1250、调用模块1260以及配置模块1270。对于图像元素模块1210、引用路径替换模块1220和显示模块1230，它们与图11中示出的监听图像元素模块1110、引用路径替换模块1120和显示模块1130相同，在这里不再赘述。

监听页面模块1240用于监听页面的尺寸改变。调整模块1250用于当监听到页面尺寸改变时，调整逐帧动画的动画形态，其中动画形态至少包括逐帧动画的帧的尺寸。调用模块1260用于当监听到页面尺寸改变时，重新调用系统方案样式以计算系统像素；在计算系统像素之后，重新调用逐帧动画的动画样式。配置模块1270用于基于重新调用的动画样式来重新配置逐帧动画。

在一个实施例中，调整模块1250还包括设置模块1251，其用于设置页面的长宽比例。调整模块1250还包括复制模块1252，其用于复制逐帧动画的动画类。调整模块1250还包括切换模块1253，其用于切换到所复制的动画类，以触发逐帧动画的动画形态调整。

上面关于图11和图12描述的各个模块可以在硬件中或在结合软件和/或固件的硬件中实现。例如，这些模块可以被实现为计算机程序代码/指令，该计算机程序代码/指令被配置为在一个或多个处理器中执行并存储在计算机可读存储介质中。可替换地，这些模块可以被实现为硬件逻辑/电路。例如，在实施例中，监听图像元素模块1110、引用路径替换模块1120和显示模块1130中的一个或多个可以一起在片上系统（soc）中实现。soc可以包括集成电路芯片（其包括处理器（例如，中央处理单元（cpu）、微控制器、微处理器、数字信号处理器（dsp）等）、存储器、一个或多个通信接口、和/或其他电路中的一个或多个部件），并且可以可选地执行所接收的程序代码和/或包括嵌入式固件以执行功能。本文描述的技术的特征是与载体无关的，意味着这些技术可以在具有各种处理器的各种计算平台上实现。

虽然上面参考特定模块讨论了特定功能，但是应当注意，本文讨论的各个模块的功能可以分为多个模块，和/或多个模块的至少一些功能可以组合成单个模块。另外，本文讨论的特定模块执行动作包括该特定模块本身执行动作，或者替换地该特定模块调用或以其他方式访问执行该动作的另一个组件或模块（或结合该特定模块一起执行动作）。因此，执行动作的特定模块可以包括执行动作的特定模块本身和/或执行动作的该特定模块调用或以其他方式访问的另一模块。

图13示出了根据本发明实施例的一种示例应用场景。应当理解，如图13所示的应用场景仅仅是示例性的，而不是限制性的。打开移动终端中的客户端，例如打开手机中的手机游戏。在步骤1301中，在打开客户端后，预加载样式、帧、图片等资源。例如，在手机游戏页面中需要显示的各种逐帧动画的样式、雪碧图等。在步骤1302中，在加载完成后，可以对页面、帧数据等进行初始化。在步骤1303中，监听屏幕是否旋转。如果屏幕发生旋转，则在步骤1304中，调整逐帧动画的动画形态，调整逐帧动画的帧尺寸。然后在步骤1305中，调用新的系统样式和动画样式以配置页面和逐帧动画。如果屏幕没有发生旋转，则跳过步骤1304和1305，直接跳到步骤1306。在步骤1306中，进行数据传递。用户点击页面中的抽奖按钮，手机将抽奖请求发送到服务器，然后服务器根据计算结果将抽奖结果返回到用户的手机中。在步骤1307中，进行数据互通。用户的手机接收到抽奖结果，并将抽奖结果反馈给客户端中的相应的模块。客户端中的相应模块依据抽奖结果，选择动画效果。例如，如果用户中了金奖，则显示金色动画，如果用户中了银奖则显示银色动画或不显示动画。在步骤1308中，将帧动态化为动画形态。例如，当用户中了金奖时，调用金奖的动画图片，基于先前配置好的动画形态和动画样式将逐帧动画的各个帧动画化。在步骤1309中，进行互动展示。

图14a-图14d是根据本发明实施例的从用户的角度的展示图像元素的用户界面。

在图14a中，示出了客户端中内嵌的web页面14100以及导航栏14101。通过导航栏14101可以实现对web页面的控制，例如前进、后退、刷新、转发、退出等等。图14a中的web页面14100包括背景图片14103、活动方案14105a-14105c。在一个实施例中，web页面1400还可包含用于切换活动方案14105a-14105c的按钮14107，以及用于选择活动方案14105a-14105c的按钮14109。在选择活动方案14105a、14105b或14105c之后，进入所选择的活动方案。

当选择活动方案时，客户端预加载该活动方案对应的系统样式及动画样式，并根据预加载的系统样式及动画样式初始化图像元素并展示。在一个实施例中，图14b中的活动方案14200是抽奖活动示例。在一个实施例中，活动方案14200包括背景图片14201、视频动画14203、图像元素14205a-14205f。在一个实施例中，活动方案14200还可以包括抽奖按钮、奖池选择按钮（例如，黄金奖池、白银奖池）。在一个实施例中，活动方案也可以包括其它元素，例如文字、按钮、链接等等。应当理解，虽然在图14b中示出了一个视频动画以及六个图像元素，但本发明实施例也可以包括多个视频动画或不包括视频动画，并且也可以包括一个或多个图像元素。

图14c是图14b中的图像元素14205a-14205f的一个示例。在一个实施例中，图像元素14205a-14205f中的一个或多个可以是逐帧动画，而其余图像元素可以是静态图片。

图14d示出了图14b中的活动方案14200的抽奖动态效果。在图14d中，活动方案14200包括背景图片14201、视频动画14203、图像元素14305a-14305f。在活动方案14200中，每完成一次抽奖，便播放一次视频动画14203（在该示例中为球沿箭头方向飞出），并通过用图像元素14305a-14305f替换图14b中的图像元素14205a-14205f的方式展示本次抽奖结果。

图15示出根据本发明实施例的计算设备1500的示意性框图。计算设备1500是用于执行根据本发明实施例的用于展示图像元素的方法的设备。

计算设备1500可以是各种不同类型的设备，例如服务器计算机、与客户端（例如，客户端设备）相关联的设备、片上系统、和/或任何其他合适的计算设备或计算系统。

计算设备1500可以包括能够诸如通过系统总线1514或其他适当的方式连接彼此通信的至少一个处理器1502、存储器1504、（一个或多个）通信接口1506、显示设备1508、其他输入/输出（i/o）设备1510以及一个或多个大容量存储装置1512。

处理器1502可以是单个处理单元或多个处理单元，所有处理单元可以包括单个或多个计算单元或者多个核心。处理器1502可以被实施成一个或多个微处理器、微型计算机、微控制器、数字信号处理器、中央处理单元、状态机、逻辑电路和/或基于操作指令来操纵信号的任何设备。除了其他能力之外，处理器1502可以被配置成获取并且执行存储在存储器1504、大容量存储装置1512或者其他计算机可读介质中的计算机可读指令，诸如操作系统1516的程序代码、应用程序1518的程序代码、其他程序1520的程序代码等，以实现本发明实施例提供的用于展示图像元素的方法。

存储器1504和大容量存储设备1512是用于存储指令的计算机存储介质的示例，所述指令由处理器1502执行来实施前面所描述的各种功能。举例来说，存储器1504一般可以包括易失性存储器和非易失性存储器二者（例如ram、rom等等）。此外，大容量存储设备1512一般可以包括硬盘驱动器、固态驱动器、可移除介质、包括外部和可移除驱动器、存储器卡、闪存、软盘、光盘（例如cd、dvd）、存储阵列、网络附属存储、存储区域网等等。存储器1504和大容量存储设备1512在本文中都可以被统称为存储器或计算机存储介质，并且可以是能够把计算机可读、处理器可执行程序指令存储为计算机程序代码的非瞬时性介质，所述计算机程序代码可以由处理器1502作为被配置成实施在本文的示例中所描述的操作和功能的特定机器来执行。

多个程序模块可以存储在大容量存储设备1512上。这些程序包括操作系统1516、一个或多个应用程序1518、其他程序1520和程序数据1522，并且它们可以被加载到存储器1504以供执行。这样的应用程序或程序模块的示例可以包括例如用于实现以下部件/功能的计算机程序逻辑（例如，计算机程序代码或指令）：监听图像元素模块1110、引用路径替换模块1120、显示模块1130和/或本文描述的另外的实施例。在一些实施例中，这些程序模块可以分布在不同的物理位置。

虽然在图15中被图示成存储在计算设备1500的存储器1504中，但是模块1516、1518、1520和1522或者其部分可以使用可由计算设备1500访问的任何形式的计算机可读介质来实施。如本文所使用的，“计算机可读介质”至少包括两种类型的计算机可读介质，也就是计算机存储介质和通信介质。

计算机存储介质包括通过用于存储信息的任何方法或技术实施的易失性和非易失性、可移除和不可移除介质，所述信息诸如是计算机可读指令、数据结构、程序模块或者其他数据。计算机存储介质包括而不限于ram、rom、eeprom、闪存或其他存储器技术，cd-rom、数字通用盘（dvd）、或其他光学存储装置，磁盒、磁带、磁盘存储装置或其他磁性存储设备，或者可以被用来存储信息以供计算设备访问的任何其他非传送介质。

与此相对，通信介质可以在诸如载波或其他传送机制之类的已调数据信号中具体实现计算机可读指令、数据结构、程序模块或其他数据。本文所定义的计算机存储介质不包括通信介质。

计算设备1500还可以包括一个或更多通信接口1506，以用于诸如通过网络、直接连接等等与其他设备交换数据。通信接口1506可以促进在多种网络和协议类型内的通信，其中包括有线网络（例如lan、电缆等等）和无线网络（例如wlan、蜂窝、卫星等等）、因特网等等。通信接口1506还可以提供与诸如存储阵列、网络附属存储、存储区域网等等中的外部存储装置（未示出）的通信。

在一些示例中，可以包括诸如监视器之类的显示设备1508，以用于显示信息和图像。其他i/o设备1510可以是接收来自用户的各种输入并且向用户提供各种输出的设备，并且可以包括触摸输入设备、手势输入设备、摄影机、键盘、遥控器、鼠标、打印机、音频输入/输出设备等等。

将理解的是，尽管第一、第二、第三等术语在本文中可以用来描述各种设备、元件、或部件，但是这些设备、元件、或部件不应当由这些术语限制。这些术语仅用来将一个设备、元件、或部件与另一个设备、元件、或部件相区分。

应理解，说明书通篇中提到的“一个实施例”意味着与实施例有关的特定特征、结构或特性包括在本发明的至少一个实施例中。因此，在整个说明书各处出现的“在一个实施例中”未必一定指相同的实施例。此外，这些特定的特征、结构或特性可以任意适合的方式结合在一个或多个实施例中。

在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法或者装置所固有的要素。

尽管已经结合一些实施例描述了本发明实施例，但是其不旨在被限于在本文中所阐述的特定形式。相反，本发明实施例的范围仅由所附权利要求来限制。附加地，尽管单独的特征可以被包括在不同的权利要求中，但是这些可以可能地被有利地组合，并且包括在不同权利要求中不暗示特征的组合不是可行的和/或有利的。特征在权利要求中的次序不暗示特征必须以其工作的任何特定次序。此外，在权利要求中，词“包括”不排除其他元件，并且不定冠词“一”或“一个”不排除多个。权利要求中的附图标记仅作为明确的示例被提供，不应该被解释为以任何方式限制权利要求的范围。