CN105630787B - 基于动态可移植网络图形的动画实现方法及装置 - Google Patents

Abstract

本发明提供一种基于动态可移植网络图形的动画实现方法，包括：进入浏览器环境，在该浏览器环境下获取目标网页的资源数据，该目标网页的资源数据包括动画的数据；当该动画的数据为动态可移植网络图形格式的数据时，加载预设的解析引擎，通过该解析引擎为该动画从外部指定一个或多个交互事件及其对应的动作；根据该动画的数据，对该动画进行渲染；当检测到该交互事件被触发时，针对该动画执行对应的动作。本发明还提供一种基于动态可移植网络图形的动画实现装置，上述基于动态可移植网络图形的动画实现方法及装置可实现极具交互性地动态可移植网络图形动画播放，提高播放的灵活性及方便性，达到极佳可控的动画效果。

Description

基于动态可移植网络图形的动画实现方法及装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于动态可移植网络图形的动画实现方法及装置。

背景技术

传统地，在客户端主要的动画实现方式有以下几种：手机客户端动画、Flash动画、PNG(Portable Network Graphics，可移植网络图形)轮播以及CSS3(CascadingStyleSheet3，层叠样式表3)动画。然而，移动客户端动画成本高、开发周期长，且对客户端主干存在一定风险，不适合时效性动画运营。Flash动画在移动终端兼容性差，iOS(苹果操作系统)完全不兼容，Android(安卓)需要安装插件才能播放。PNG轮播由于动画资源体积较大，导致用户流量成本高，而且对移动终端的性能消耗大。CSS3动画虽然对于简单动画是极佳的实现方式，但对于复杂/较复杂的动画内容，会带来极大的实现工作量。APNG(AnimatedPortable Network Graphics，动态可移植网络图形)是基于PNG的位图动画格式，由于具有成本低、兼容性好且性能消耗低的优点，有望取代上述传统地动画实现方式在未来成为动画实现方式的主流。然而现有技术中，尚未有基于APNG的动画方案，APNG仅用于动态图片的呈现，而非用于动画，播放动态图片只能按照从头至尾连续播放的方式进行，缺乏灵活性及方便性，且缺乏交互事件的设计与实现，无法达到动画应用的要求。

发明内容

有鉴于此，本发明提供一种基于动态可移植网络图形的动画实现方法及装置，可实现极具交互性地动态可移植网络图形动画播放，提高播放的灵活性及方便性，达到极佳可控的动画效果。

本发明实施例提供的基于动态可移植网络图形的动画实现方法，包括：进入浏览器环境，在所述浏览器环境下获取目标网页的资源数据，所述目标网页的资源数据包括动画的数据；当所述动画的数据为动态可移植网络图形格式的数据时，加载预设的解析引擎，通过所述解析引擎为所述动画从外部指定一个或多个交互事件及其对应的动作；根据所述动画的数据，对所述动画进行渲染；当检测到所述交互事件被触发时，针对所述动画执行对应的动作。

本发明实施例提供的基于动态可移植网络图形的动画实现装置，包括：获取模块，用于进入浏览器环境，在所述浏览器环境下获取目标网页的资源数据，所述目标网页的资源数据包括动画的数据；判断模块，用于判断所述获取模块获取的所述动画的数据是否为动态可移植网络图形格式的数据；加载模块，用于当所述判断模块的判断结果为所述动画的数据为所述动态可移植网络图形格式的数据时，加载预设的解析引擎；指定模块，用于通过所述加载模块加载的所述解析引擎为所述动画从外部指定一个或多个交互事件及其对应的动作；渲染模块，用于根据所述获取模块获取的所述动画的数据，对所述动画进行渲染；检测模块，用于检测所述交互事件是否被触发；执行模块，用于当所述检测模块检测到所述交互事件被触发时，针对所述动画执行对应的动作。

本发明实施例提供的上述基于动态可移植网络图形的动画实现方法及装置，预设解析引擎，并通过该解析引擎从外部指定一个或多个交互事件及其对应的动作，其原理是为该解析引擎设置一个接口，从外部可便捷的通过该接口指定交互时间或其对应的动作，成为动画的一部分。并当指定的交互事件被触发时，执行对应的动作，从而实现了极具交互性地APNG动画播放，可提高播放的灵活性及方便性，达到极佳可控的动画效果。此外，通过解析引擎外部指定的方式还可以降低APNG动画制作的难度及成本，使得动画制作人员在制作动画时不必考虑控制动画如何播放的问题。

为让本发明的上述和其他目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附图式，作详细说明如下。

附图说明

图1为本发明实施例提供的基于动态可移植网络图形的动画实现方法及装置的应用环境图；

图2示出了一种用户终端的结构框图；

图3为本发明第一实施例提供的基于动态可移植网络图形的动画实现方法的流程图；

图4为本发明第二实施例提供的基于动态可移植网络图形的动画实现方法的流程图；

图5为本发明第三实施例提供的基于动态可移植网络图形的动画实现装置的结构示意图；

图6为本发明第四实施例提供的基于动态可移植网络图形的动画实现装置的结构示意图。

具体实施方式

为更进一步阐述本发明为实现预定发明目的所采取的技术手段及功效，以下结合附图及较佳实施例，对依据本发明的具体实施方式、结构、特征及其功效，详细说明如后。

请参阅图1，图1本发明实施例提供的基于动态可移植网络图形的动画实现方法及装置的应用环境图。如图1所示，服务器100和用户终端200位于无线或有线网络中，通过该无线或有线网络，服务器100与用户终端200进行数据交互。用户终端200进入浏览器环境，在该浏览器环境下从服务器100获取目标网页的资源数据，该目标网页的资源数据包括动画的数据；当该动画的数据为动态可移植网络图形格式(APNG)的数据时，加载预设的解析引擎，通过该解析引擎为该动画从外部指定一个或多个交互事件及其对应的动作；根据该动画的数据，对该动画进行渲染；当检测到该交互事件被触发时，针对该动画执行对应的动作，从而实现基于APNG的动画。

图2示出了一种用户终端的结构框图。如图2所示，用户终端200包括：存储器202、存储控制器204、一个或多个(图中仅示出一个)处理器206、外设接口208、射频模块210、音频模块212、显示模块214以及按键模块216。这些组件通过一条或多条通讯总线/信号线218相互通讯。

可以理解，图2所示的结构仅为示意，用户终端200还可包括比图2中所示更多或者更少的组件，或者具有与图2所示不同的配置。图2中所示的各组件可以采用硬件、软件或其组合实现。

存储器202可用于存储软件程序以及模块，如本发明实施例中的基于动态可移植网络图形的动画实现方法及装置对应的程序指令/模块，处理器206通过运行存储在存储器202内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的基于动态可移植网络图形的动画实现方法。

存储器202可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器202可进一步包括相对于处理器206远程设置的存储器，这些远程存储器可以通过网络连接至用户终端200。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。处理器206以及其他可能的组件对存储器202的访问可在存储控制器204的控制下进行。

处理器206运行存储器202内的各种软件、指令以执行用户终端200的各种功能以及进行数据处理。

外设接口208用于将各种外部设备耦合至CPU以及存储器202。

在一些实施例中，存储控制器204、处理器206以及外设接口208可以在单个芯片中实现。在其他一些实例中，他们可以分别由独立的芯片实现。

射频模块210用于接收以及发送电磁波，实现电磁波与电信号的相互转换，从而与通信网络或者其他设备进行通讯。射频模块210可包括各种现有的用于执行这些功能的电路元件，例如，天线、射频收发器、数字信号处理器、加密/解密芯片、用户身份模块(SIM)卡、存储器等等。射频模块210可与各种网络如互联网、企业内部网、无线网络进行通讯或者通过无线网络与其他设备进行通讯。上述的无线网络可包括蜂窝式电话网、无线局域网或者城域网。上述的无线网络可以使用各种通信标准、协议及技术，包括但并不限于全球移动通信系统(Global System for Mobile Communication，GSM)、增强型移动通信技术(Enhanced Data GSM Environment，EDGE)，宽带码分多址技术(wideband code divisionmultiple access，W-CDMA)，码分多址技术(Code division access，CDMA)、时分多址技术(time division multiple access，TDMA)，蓝牙，无线保真技术(Wireless，Fidelity，WiFi)(如美国电气和电子工程师协会标准IEEE802.11a，IEEE802.11b，IEEE802.11g和/或IEEE802.11n)、网络电话(Voice over internet protocol，VoIP)、全球微波互联接入(Worldwide Interoperability for Microwave Access，Wi-Max)、其他用于邮件、即时通信及短消息的协议，以及任何其他合适的通讯协议，甚至可包括那些当前仍未被开发出来的协议。

音频模块212向用户提供音频接口，其可包括一个或多个麦克风、一个或者多个扬声器以及音频电路。音频电路从外设接口208处接收声音数据，将声音数据转换为电信息，将电信息传输至扬声器。扬声器将电信息转换为人耳能听到的声波。音频电路还从麦克风处接收电信息，将电信号转换为声音数据，并将声音数据传输至外设接口208中以进行进一步的处理。音频数据可以从存储器202处或者通过射频模块210获取。此外，音频数据也可以存储至存储器202中或者通过射频模块210进行发送。在一些实例中，音频模块212还可包括一个耳机播孔，用于向耳机或者其他设备提供音频接口。

显示模块214在用户终端200与用户之间提供一个输出界面，向用户显示视频输出，这些视频输出的内容可包括文字、图形、视频、及其任意组合。一些输出结果是对应于一些用户界面对象。可以理解的，显示模块214还可以在用户终端200与用户之间同时提供一个输出及输入界面。具体地，除了向用户显示视频输出之外，显示模块214还接收用户的输入，例如用户的点击、滑动等手势操作，以便用户界面对象对这些用户的输入做出响应。检测用户输入的技术可以是基于电阻式、电容式或者其他任意可能的触控检测技术。显示模块214显示单元的具体实例包括但并不限于液晶显示器或发光聚合物显示器。

按键模块216同样提供用户向用户终端200进行输入的接口，用户可以通过按下不同的按键以使用户终端200执行不同的功能。

用户终端200可以包括：支持网络数据传输及具有浏览器环境的智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机、车载电脑、可穿戴设备、导航仪、一体机、台式计算机等等。

第一实施例

请参阅图3，图3为本发明第一实施例提供的基于动态可移植网络图形的动画实现方法的流程图。如图3所示，本实施例提供的基于动态可移植网络图形的动画实现方法包括：

步骤S101，进入浏览器环境，在该浏览器环境下获取目标网页的资源数据，该目标网页的资源数据包括动画的数据；

用户终端200通过调用Webview控件进入浏览器环境，在该浏览器环境下，根据用户指定的网址，如：用户在当前浏览器的搜索栏或地址栏输入的网址，从服务器100获取对应的目标网页的资源数据，其中该目标网页的资源数据可以包括该目标网页中包含的动画的数据。Webview控件是一个浏览器控件，可用于浏览网页。

步骤S102，当该动画的数据为动态可移植网络图形格式的数据时，加载预设的解析引擎，通过该解析引擎为该动画从外部指定一个或多个交互事件及其对应的动作；

用户终端200判断获取的动画的数据是否为动态可移植网络图形(APNG)格式的数据，也即判断该动画是否为APNG动画，若是，则加载预设的解析引擎(APNG-Canvas)。APNG-Canvas优选地可为JavaScript文件。JavaScript是一种直译式脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。可以理解地，在Android系统中，可以java语言实现APNG-Canvas，在iOS系统中，以Objective-C或Swift语言实现APNG-Canvas，在Windows系统中，以C#.NET语言实现APNG-Canvas。需要注意的是，当用户终端200为移动终端时，在加载预设的APNG-Canvas前，还需加载JavaScript类库文件。

用户终端200根据预设的指定规则，通过APNG-Canvas从该APNG动画的外部为该APNG动画指定一个或多个交互事件及其对应的动作。其中该交互事件可以包括：动画播放事件、动画暂停事件、事件唤起事件以及动画跳跃事件。该动画播放事件对应的动作包括开始或继续播放该动画。该动画暂停事件对应的动作包括瞬时暂停该动画的播放。该事件唤起事件对应的动作包括唤起指定事件，如：调用指定外部设备或API(ApplicationProgramming Interface，应用程序编程接口)。该动画跳跃事件对应的动作包括将该动画由当前播放的帧跳转到指定的帧继续播放。

步骤S103，根据该动画的数据，对该动画进行渲染；

用户终端200根据获取的目标网页的资源数据，对该目标网页进行渲染，以便将该目标网页绘制(也即显示)在当前浏览器的窗口中，其中包括在该窗口中加载该APNG动画并进行渲染。

步骤S104，当检测到该交互事件被触发时，针对该动画执行对应的动作。

用户终端200实时检测是否有预先通过APNG-Canvas外部指定的交互事件被触发，并当检测到有该交互事件被触发时，针对该APNG动画，执行与该交互事件对应的动作。

具体地，当检测到动画播放事件被触发时，执行开始或继续播放APNG动画的动作。例如：当检测到APNG动画载入完毕后的等待时长超过预置时长时，确定动画播放事件被触发，执行自动启动该APNG动画进行播放的动作。

当检测到动画暂停事件被触发时，执行瞬时暂停APNG动画播放的动作。例如：在APNG动画播放过程中，当检测到确定动画暂停事件的帧的位置等于APNG动画的当前帧的位置时，或者用户触碰了屏幕中指定区域时，确定动画暂停事件被触发，执行瞬时动画暂停的动作。

当检测到事件唤起事件被触发时，执行唤起指定事件的动作，调用指定外部设备或API。例如：当检测到动画播放到第20帧时确定事件唤起事件被触发，执行调用手机震动API的动作，使得手机发出震动。

当检测到动画跳跃事件被触发时，执行将APNG动画由当前播放的帧跳转到指定的帧继续播放的动作。例如：在APNG动画播放过程中，当检测到用户在屏幕中点击一个抖动的气泡的操作时，确定动画跳跃事件被触发，执行将当前播放的APNG动画跳转至气泡破裂的动画部分继续播放的动作。

本发明实施例提供的基于动态可移植网络图形的动画实现方法，预设解析引擎，并通过该解析引擎从外部指定一个或多个交互事件及其对应的动作，其原理是为该解析引擎设置一个接口，从外部可便捷的通过该接口指定交互时间或其对应的动作，成为动画的一部分。并当指定的交互事件被触发时，执行对应的动作，从而实现了极具交互性地APNG动画播放，可提高播放的灵活性及方便性，达到极佳可控的动画效果。此外，通过解析引擎外部指定的方式还可以降低APNG动画制作的难度及成本，使得动画制作人员在制作动画时不必考虑控制动画如何播放的问题。

第二实施例

请参阅图4，图4为本发明第二实施例提供的基于动态可移植网络图形的动画实现方法的流程图。如图4所示，本实施例提供的基于动态可移植网络图形的动画实现方法包括：

步骤S201，进入浏览器环境；

用户终端200通过调用Webview控件进入浏览器环境。Webview控件是一个浏览器控件，可用于浏览网页。

步骤S202，判断当前浏览器的内核是否支持画布特性；

画布(Canvas)是一个HTML(HyperText Mark-up Language，超文本标记语言)的标签元素，可用于在网页上绘制图像，其本身没有行为，仅提供一块画布，但他把一个绘图API展现给客户端JavaScript，以使脚本能够把APNG动画绘制到这块画布上。

若不支持，则执行步骤S203：弹出提示窗口，以引导用户升级该当前浏览器或下载安装支持该画布特性的目标浏览器的安装文件，然后执行步骤S201；

若当前浏览器的内核不支持该画布特性，则用户终端200生成并弹出提示窗口，以引导用户根据该提示窗口中的下载链接，从对应的服务器，下载当前浏览器的升级文件，并运行该升级文件以升级当前浏览器，并在升级完成后启动升级后的浏览器，以再次进入浏览器环境。或者，从对应的服务器下载支持Canvas特性的目标浏览器的安装文件，运行该安装文件以安装该支持Canvas特性的目标浏览器，并在安装完成后启动该目标浏览器，以再次进入浏览器环境。

若支持，则执行步骤S204：在该浏览器环境下获取目标网页的资源数据，该目标网页的资源数据包括动画的数据；

用户终端200根据用户在当前浏览器的搜索栏或地址栏输入的网址，从服务器100获取对应的目标网页的资源数据，其中该目标网页的资源数据可以包括该目标网页中的动画的数据。

步骤S205，当该动画的数据为动态可移植网络图形格式的数据时，加载预设的解析引擎，通过该解析引擎为该动画从外部指定一个或多个交互事件及其对应的动作；

用户终端200判断获取的动画的数据是否为APNG格式的数据，也即判断该动画是否为APNG动画，若是，则加载预设的解析引擎(APNG-Canvas)。APNG动画文件是通过将一组逐帧动画的PNG格式设计图打包后获得的动画文件。APNG-Canvas优选地可为JavaScript文件。JavaScript是一种直译式脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。可以理解地，在Android系统中，可以java语言实现APNG-Canvas，在iOS系统中，以Objective-C或Swift语言实现APNG-Canvas，在Windows系统中，以C#.NET语言实现APNG-Canvas。需要注意的是，当用户终端200为移动终端时，在加载预设的APNG-Canvas前，还需加载JavaScript类库文件。

用户终端200根据预设的指定规则，通过APNG-Canvas从该APNG动画的外部为该APNG动画指定一个或多个交互事件及其对应的动作。其中该交互事件可以包括：动画播放事件、动画暂停事件、事件唤起事件以及动画跳跃事件。动画播放事件可与开始或继续播放APNG动画的动作对应。动画暂停事件可与瞬时暂停APNG动画播放的动作对应。事件唤起事件可与唤起指定事件的动作对应，如：调用指定外部设备或API的动作。动画跳跃事件可与将APNG动画由当前播放的帧跳转到指定的帧继续播放的动作对应。

具体地，通过APNG-Canvas从该APNG动画的外部为该APNG动画指定当检测到该APNG动画载入完成后的等待时长大于或等于预置时长时，或检测到用户针对该APNG动画进行的第一预置操作时，确定动画播放事件被触发，执行开始或继续播放APNG动画的动作。例如，指定当检测到该APNG动画载入完毕后的等待时长大于或等于3秒钟时，确定该动画播放事件被触发，执行开始播放该APNG动画的动作；或指定该APNG动画载入完毕后，当检测到用户进行双击当前浏览器的窗口中的该APNG动画的显示区域的任意位置的操作时，确定该动画播放事件被触发，执行开始播放或继续播放该APNG动画的动作。

通过APNG-Canvas从该APNG动画的外部为该APNG动画指定当检测到该APNG动画进行到第一预置帧(第L帧)，或当检测到用户针对该APNG动画进行的第二预置操作时，确定动画暂停事件被触发，执行瞬时暂停该APNG动画播放的动作。例如，指定当检测到在该APNG动画播放过程中，用户触碰了屏幕上的指定区域或任意区域时，确定该动画暂停事件被触发，执行瞬时暂停该APNG动画播放的动作。

通过APNG-Canvas从该APNG动画的外部为该APNG动画指定当检测到该APNG动画在进行到第二预置帧(第N帧)时，确定事件唤起事件被触发，执行唤起指定事件的动作(如：调用指定外部设备或API的动作)。例如，指定当检测到该APNG动画播放到第20帧时，确定该事件唤起事件被触发，执行调用手机震动API，或调用摄像头、麦克风等外部设备的动作。事件唤起的外部调用代码可以但不限于包括：

需要说明的是，外部调用该extraEvent后，执行的内容可以自定义，不受以上示例限制。

通过APNG-Canvas从该APNG动画的外部为该APNG动画指定当检测到该APNG动画进行到第三预置帧(第M帧)，或者当检测到用户针对该APNG动画进行的第三预置操作时，确定动画跳跃事件被触发，执行将该APNG动画由当前播放的帧跳转到指定的帧继续播放的动作。例如，指定该APNG动画播放过程中，当检测到用户在屏幕中进行点击一个抖动的气泡的操作时，确定该动画跳跃事件被触发，执行在用户手指离开屏幕后，将该APNG动画跳转至气泡破裂的动画部分继续播放的动作。

进一步地，用户终端200还可在加载APNG-Canvas之后，生成并显示用于指定一个或多个交互事件及其对应的动作的操作界面，接收用户在该操作界面触发的指定指令，通过该解析引擎为该APNG动画从外部指定该指定指令指向的一个或多个交互事件及其对应的动作。该操作界面中包括可指定的备选交互事件及其对应的动作的相关信息，使得用户可通过该操作界面触发指定指令，以指令APNG-Canvas为该APNG动画从外部指定该用户选定的一个或多个交互事件及其对应的动作。例如，用户终端200通过该操作界面获取用户从多个备选交互事件及其对应的动作中选定的待指定的交互事件(假定为事件唤起事件)及其对应的动作的标识信息，根据该标识信息生成对应的外部调用代码，通过APNG-Canvas执行该外部调用代码从外部为该APNG动画指定该事件唤起事件及其对应的动作，以便在检测到该APNG动画进行到第二预置帧时，执行唤起指定事件的动作。上述备选交互事件及其对应的动作的相关信息可由用户终端200在获取该APNG动画的数据时从服务器100获取，或预置在APNG-Canvas中。

像这样通过生成并显示用于指定一个或多个交互事件及其对应的动作的操作界面，允许用户在备选交互事件及其对应的动作中自定义待指定的交互事件及其对应的动作，可进一步提高该APNG动画实现的灵活性。

步骤S206，根据该动画的数据，在该浏览器环境下渲染该动画；

用户终端200根据该目标网页的资源数据，在进入的浏览器环境下对该目标网页进行渲染，以将该目标网页绘制(也即显示)在当前浏览器的窗口中，其中包括在该窗口中加载该APNG动画，并通过APNG-Canvas按照Canvas定义的格式对该APNG动画进行渲染。

步骤S207，当检测到该交互事件被触发时，针对该动画执行对应的动作。

用户终端200实时检测该APNG动画的播放进度及用户针对该APNG动画进行的操作，以检测是否有预先通过APNG-Canvas外部指定的交互事件被触发，并当检测到有该交互事件被触发时，针对该APNG动画，执行与该交互事件对应的动作。

具体地，当检测到该APNG动画载入完成后的等待时长大于或等于预置时长时，或检测到用户针对该APNG动画进行的第一预置操作时，确定动画播放事件被触发，执行开始或继续播放APNG动画的动作。例如，当检测到该APNG动画载入完毕后的等待时长大于或等于3秒钟时，确定该动画播放事件被触发，执行开始播放该APNG动画的动作；或当检测到在动画载入完毕后，用户进行双击当前浏览器的窗口中的该APNG动画的显示区域的任意位置的操作时，确定该动画播放事件被触发，执行开始播放或继续播放该APNG动画的动作。

当检测到该APNG动画进行到第一预置帧(第L帧)，或当检测到用户针对该APNG动画进行的第二预置操作时，确定动画暂停事件被触发，执行瞬时暂停该APNG动画播放的动作。例如，当检测到该APNG动画播放过程中，用户触碰了屏幕上的指定区域或任意区域时，确定该动画暂停事件被触发，执行瞬时暂停该APNG动画播放的动作。

当检测到该APNG动画在进行到第二预置帧(第N帧)时，确定事件唤起事件被触发，执行唤起指定事件的动作(如：调用指定外部设备或API)。例如，当检测到该APNG动画播放到第20帧时，确定该事件唤起事件被触发，执行调用手机震动API，或调用摄像头、麦克风等外部设备的动作。

当检测到该APNG动画进行到第三预置帧(第M帧)，或者当检测到用户针对该APNG动画进行的第三预置操作时，确定动画跳跃事件被触发，执行将该APNG动画由当前播放的帧跳转到指定的帧继续播放的动作。例如，当检测到在该APNG动画播放过程中，用户在屏幕中进行点击一个抖动的气泡的操作时，确定该动画跳跃事件被触发，执行在用户手指离开屏幕后，将该APNG动画跳转至气泡破裂的动画部分继续播放的动作。

本发明实施例提供的基于动态可移植网络图形的动画实现方法，预设解析引擎，并通过该解析引擎从外部指定一个或多个交互事件及其对应的动作，其原理是为该解析引擎设置一个接口，从外部可便捷的通过该接口指定交互时间或其对应的动作，成为动画的一部分。并当指定的交互事件被触发时，执行对应的动作，从而实现了极具交互性地APNG动画播放，可提高播放的灵活性及方便性，达到极佳可控的动画效果。此外，通过解析引擎外部指定的方式还可以降低APNG动画制作的难度及成本，使得动画制作人员在制作动画时不必考虑控制动画如何播放的问题。

第三实施例

图5为本发明第三实施例提供的基于动态可移植网络图形的动画实现装置的结构示意图。本实施例提供的基于动态可移植网络图形的动画实现装置可运行于图1所示的用户终端200中，用于实现上述实施例中的基于动态可移植网络图形的动画实现方法。如图5所示，基于动态可移植网络图形的动画实现装置30包括：

获取模块31，用于进入浏览器环境，在该浏览器环境下获取目标网页的资源数据，该目标网页的资源数据包括动画的数据；

判断模块32，用于判断获取模块31获取的该动画的数据是否为动态可移植网络图形格式的数据；

加载模块33，用于当判断模块32的判断结果为该动画的数据为该动态可移植网络图形格式的数据时，加载预设的解析引擎；

指定模块34，用于通过加载模块33加载的该解析引擎为该动画从外部指定一个或多个交互事件及其对应的动作；

渲染模块35，用于根据获取模块31获取的该动画的数据，对该动画进行渲染；

检测模块36，用于检测该交互事件是否被触发；

执行模块37，用于当检测模块36检测到该交互事件被触发时，针对该动画执行对应的动作。

本实施例对基于动态可移植网络图形的动画实现装置30的各功能模块实现各自功能的具体过程，请参见上述图1至图4所示实施例中描述的具体内容，此处不再赘述。

本发明实施例提供的基于动态可移植网络图形的动画实现装置，预设解析引擎，并通过该解析引擎从外部指定一个或多个交互事件及其对应的动作，其原理是为该解析引擎设置一个接口，从外部可便捷的通过该接口指定交互时间或其对应的动作，成为动画的一部分。并当指定的交互事件被触发时，执行对应的动作，从而实现了极具交互性地APNG动画播放，可提高播放的灵活性及方便性，达到极佳可控的动画效果。此外，通过解析引擎外部指定的方式还可以降低APNG动画制作的难度及成本，使得动画制作人员在制作动画时不必考虑控制动画如何播放的问题。

第四实施例

图6为本发明第四实施例提供的基于动态可移植网络图形的动画实现装置的结构示意图。本实施例提供的基于动态可移植网络图形的动画实现装置可运行于图1所示的用户终端200中，用于实现上述实施例中的基于动态可移植网络图形的动画实现方法。如图6所示，基于动态可移植网络图形的动画实现装置40包括：

获取模块31，用于进入浏览器环境，在该浏览器环境下获取目标网页的资源数据，该目标网页的资源数据包括动画的数据；

判断模块32，用于判断获取模块31获取的该动画的数据是否为动态可移植网络图形格式的数据；

加载模块33，用于当判断模块32的判断结果为该动画的数据为该动态可移植网络图形格式的数据时，加载预设的解析引擎；

指定模块34，用于通过加载模块33加载的该解析引擎为该动画从外部指定一个或多个交互事件及其对应的动作；

渲染模块35，用于根据获取模块31获取的该动画的数据，对该动画进行渲染；

检测模块36，用于检测该交互事件是否被触发；

执行模块37，用于当检测模块36检测到该交互事件被触发时，针对该动画执行对应的动作。

优选地，该交互事件包括：动画播放事件、动画暂停事件、事件唤起事件以及动画跳跃事件，该动画播放事件对应的动作包括开始或继续播放该动画，该动画暂停事件对应的动作包括瞬时暂停该动画的播放，该事件唤起事件对应的动作包括唤起指定事件，该动画跳跃事件对应的动作包括将该动画由当前播放的帧跳转到指定的帧继续播放。

优选地，指定模块34，还用于通过该解析引擎为该动画从外部指定当检测到该动画载入完成后的等待时长大于或等于预置时长时，或检测到用户针对该动画进行的第一预置操作时，确定该动画播放事件被触发，执行该开始或继续播放该动画的动作；

指定模块34，还用于通过该解析引擎为该动画从外部指定当检测到该动画进行到第一预置帧，或当检测到多数用户针对该动画进行的第二预置操作时，确定该动画暂停事件被触发，执行该瞬时暂停该动画播放的动作；

指定模块34，还用于通过该解析引擎为该动画从外部指定当检测到该动画在进行到第二预置帧时，确定该事件唤起事件被触发，执行该唤起指定事件的动作，该唤起指定事件包括调用指定外部设备或应用程序编程接口；

指定模块34，还用于通过该解析引擎为该动画从外部指定当检测到该动画进行到第三预置帧，或者当检测到该用户针对该动画进行的第三预置操作时，确定该动画跳跃事件被触发，执行该将该动画由当前播放的帧跳转到指定的帧继续播放的动作。

优选地，检测模块36，还用于检测该动画的播放进度及该用户针对该动画进行的操作；

执行模块37，还用于当检测到该动画载入完成后的等待时长大于或等于该预置时长时，或检测到该用户针对该动画进行的该第一预置操作时，确定该动画播放事件被触发，执行该开始或继续播放动画的动作；

执行模块37，还用于当检测到该动画进行到该第一预置帧，或当检测到该用户针对该动画进行的该第二预置操作时，确定该动画暂停事件被触发，执行该瞬时暂停该动画播放的动作；

执行模块37，还用于当检测到该动画在进行到该第二预置帧时，确定该事件唤起事件被触发，执行该唤起指定事件的动作；

执行模块37，还用于当检测到该动画进行到该第三预置帧，或者当检测到该用户针对该动画进行的该第三预置操作时，确定动画跳跃事件被触发，执行该将该动画由当前播放的帧跳转到指定的帧继续播放的动作。

优选地，基于动态可移植网络图形的动画实现装置40还包括：

显示模块41，用于生成并显示用于指定一个或多个交互事件及其对应的动作的操作界面；

接收模块42，用于接收用户在该操作界面触发的指定指令；

指定模块34，还用于通过该解析引擎为该动画从外部指定该指定指令指向的一个或多个交互事件及其对应的动作。

优选地，获取模块31包括：

调用单元311，用于通过调用Webview控件进入浏览器环境；

判断单元312，用于判断当前浏览器的内核是否支持画布特性；

提示单元313，用于若判断单元312的判断结果为不支持，则弹出提示窗口，以引导用户升级该当前浏览器或下载安装支持该画布特性的目标浏览器的安装文件，并在完成该升级或安装后执行该进入浏览器环境的步骤；

获取单元314，用于若判断单元312的判断结果为支持，则在该浏览器环境下获取该目标网页的资源数据。

优选地，该第一预置操作包括该动画载入完毕后该用户双击该当前浏览器的窗口中该动画的显示区域的任意位置的操作；

该第二预置操作包括该动画播放过程中，该用户触碰屏幕上的指定区域或任意区域的操作；

该第三预置操作包括该动画播放过程中，该用户在该屏幕中进行点击一个抖动的气泡的操作。

本实施例对基于动态可移植网络图形的动画实现装置40的各功能模块实现各自功能的具体过程，请参见上述图1至图4所示实施例中描述的具体内容，此处不再赘述。

本发明实施例提供的基于动态可移植网络图形的动画实现装置，预设解析引擎，并通过该解析引擎从外部指定一个或多个交互事件及其对应的动作，其原理是为该解析引擎设置一个接口，从外部可便捷的通过该接口指定交互时间或其对应的动作，成为动画的一部分。并当指定的交互事件被触发时，执行对应的动作，从而实现了极具交互性地APNG动画播放，可提高播放的灵活性及方便性，达到极佳可控的动画效果。此外，通过解析引擎外部指定的方式还可以降低APNG动画制作的难度及成本，使得动画制作人员在制作动画时不必考虑控制动画如何播放的问题。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、物品或者装置中还存在另外的相同要素。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，虽然本发明已以较佳实施例揭露如上，然而并非用以限定本发明，任何熟悉本专业的技术人员，在不脱离本发明技术方案范围内，当可利用上述揭示的技术内容做出些许更动或修饰为等同变化的等效实施例，但凡是未脱离本发明技术方案内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与修饰，均仍属于本发明技术方案的范围内。

Claims (14)

1.一种基于动态可移植网络图形的动画实现方法，其特征在于，包括：

进入浏览器环境，在所述浏览器环境下获取目标网页的资源数据，所述目标网页的资源数据包括动画的数据；所述浏览器环境对应的浏览器的内核支持展示动态可移植网络图形格式的动画；

当所述动画的数据为动态可移植网络图形格式的数据时，加载预设的解析引擎，生成并显示用于指定一个或多个交互事件及其对应的动作的操作界面；

接收用户在所述操作界面触发的指定指令；

通过所述解析引擎为所述动画从外部指定所述指定指令指向的一个或多个交互事件及其对应的动作；

根据所述动画的数据，对所述动画进行渲染；

当检测到所述交互事件被触发时，针对所述动画执行对应的动作。

2.根据权利要求1所述的方法，其特征在于，所述交互事件包括：动画播放事件、动画暂停事件、事件唤起事件以及动画跳跃事件，所述动画播放事件对应的动作包括开始或继续播放所述动画，所述动画暂停事件对应的动作包括瞬时暂停所述动画的播放，所述事件唤起事件对应的动作包括唤起指定事件，所述动画跳跃事件对应的动作包括将所述动画由当前播放的帧跳转到指定的帧继续播放。

3.根据权利要求2所述的方法，其特征在于，所述通过所述解析引擎为所述动画从外部指定一个或多个交互事件及其对应的动作包括：

通过所述解析引擎为所述动画从外部指定当检测到所述动画载入完成后的等待时长大于或等于预置时长时，或检测到用户针对所述动画进行的第一预置操作时，确定所述动画播放事件被触发，执行所述开始或继续播放所述动画的动作；

通过所述解析引擎为所述动画从外部指定当检测到所述动画进行到第一预置帧，或当检测到多数用户针对所述动画进行的第二预置操作时，确定所述动画暂停事件被触发，执行所述瞬时暂停所述动画播放的动作；

通过所述解析引擎为所述动画从外部指定当检测到所述动画在进行到第二预置帧时，确定所述事件唤起事件被触发，执行所述唤起指定事件的动作，所述唤起指定事件包括调用指定外部设备或应用程序编程接口；

通过所述解析引擎为所述动画从外部指定当检测到所述动画进行到第三预置帧，或者当检测到所述用户针对所述动画进行的第三预置操作时，确定所述动画跳跃事件被触发，执行所述将所述动画由当前播放的帧跳转到指定的帧继续播放的动作。

4.根据权利要求3所述的方法，其特征在于，所述当检测到所述交互事件被触发时，针对所述动画执行对应的动作包括：

检测所述动画的播放进度及所述用户针对所述动画进行的操作；

当检测到所述动画载入完成后的等待时长大于或等于所述预置时长时，或检测到所述用户针对所述动画进行的所述第一预置操作时，确定所述动画播放事件被触发，执行所述开始或继续播放动画的动作；

当检测到所述动画进行到所述第一预置帧，或当检测到所述用户针对所述动画进行的所述第二预置操作时，确定所述动画暂停事件被触发，执行所述瞬时暂停所述动画播放的动作；

当检测到所述动画在进行到所述第二预置帧时，确定所述事件唤起事件被触发，执行所述唤起指定事件的动作；

当检测到所述动画进行到所述第三预置帧，或者当检测到所述用户针对所述动画进行的所述第三预置操作时，确定动画跳跃事件被触发，执行所述将所述动画由当前播放的帧跳转到指定的帧继续播放的动作。

5.根据权利要求1所述的方法，其特征在于，所述进入浏览器环境，在所述浏览器环境下获取目标网页的资源数据包括：

通过调用Webview控件进入浏览器环境；

判断当前浏览器的内核是否支持画布特性；

若不支持，则弹出提示窗口，以引导用户升级所述当前浏览器或下载安装支持所述画布特性的目标浏览器的安装文件，并在完成所述升级或安装后执行所述进入浏览器环境的步骤；

若支持，则在所述浏览器环境下获取所述目标网页的资源数据。

6.根据权利要求3至4的任一项所述的方法，其特征在于，

所述第一预置操作包括所述动画载入完毕后所述用户双击所述当前浏览器的窗口中所述动画的显示区域的任意位置的操作；

所述第二预置操作包括所述动画播放过程中，所述用户触碰屏幕上的指定区域或任意区域的操作；

所述第三预置操作包括所述动画播放过程中，所述用户在所述屏幕中进行点击一个抖动的气泡的操作。

7.一种基于动态可移植网络图形的动画实现装置，其特征在于，包括：

获取模块，用于进入浏览器环境，在所述浏览器环境下获取目标网页的资源数据，所述目标网页的资源数据包括动画的数据；所述浏览器环境对应的浏览器的内核支持展示动态可移植网络图形格式的动画；

判断模块，用于判断所述获取模块获取的所述动画的数据是否为动态可移植网络图形格式的数据；

加载模块，用于当所述判断模块的判断结果为所述动画的数据为所述动态可移植网络图形格式的数据时，加载预设的解析引擎；

显示模块，用于生成并显示用于指定一个或多个交互事件及其对应的动作的操作界面；

接收模块，用于接收用户在所述操作界面触发的指定指令；

指定模块，用于通过所述加载模块加载的所述解析引擎为所述动画从外部指定所述指定指令指向的一个或多个交互事件及其对应的动作；

渲染模块，用于根据所述获取模块获取的所述动画的数据，对所述动画进行渲染；

检测模块，用于检测所述交互事件是否被触发；

执行模块，用于当所述检测模块检测到所述交互事件被触发时，针对所述动画执行对应的动作。

8.根据权利要求7所述的装置，其特征在于，所述交互事件包括：动画播放事件、动画暂停事件、事件唤起事件以及动画跳跃事件，所述动画播放事件对应的动作包括开始或继续播放所述动画，所述动画暂停事件对应的动作包括瞬时暂停所述动画的播放，所述事件唤起事件对应的动作包括唤起指定事件，所述动画跳跃事件对应的动作包括将所述动画由当前播放的帧跳转到指定的帧继续播放。

9.根据权利要求8所述的装置，其特征在于，

所述指定模块，还用于通过所述解析引擎为所述动画从外部指定当检测到所述动画载入完成后的等待时长大于或等于预置时长时，或检测到用户针对所述动画进行的第一预置操作时，确定所述动画播放事件被触发，执行所述开始或继续播放所述动画的动作；

所述指定模块，还用于通过所述解析引擎为所述动画从外部指定当检测到所述动画进行到第一预置帧，或当检测到多数用户针对所述动画进行的第二预置操作时，确定所述动画暂停事件被触发，执行所述瞬时暂停所述动画播放的动作；

所述指定模块，还用于通过所述解析引擎为所述动画从外部指定当检测到所述动画在进行到第二预置帧时，确定所述事件唤起事件被触发，执行所述唤起指定事件的动作，所述唤起指定事件包括调用指定外部设备或应用程序编程接口；

所述指定模块，还用于通过所述解析引擎为所述动画从外部指定当检测到所述动画进行到第三预置帧，或者当检测到所述用户针对所述动画进行的第三预置操作时，确定所述动画跳跃事件被触发，执行所述将所述动画由当前播放的帧跳转到指定的帧继续播放的动作。

10.根据权利要求9所述的装置，其特征在于，

所述检测模块，还用于检测所述动画的播放进度及所述用户针对所述动画进行的操作；

所述执行模块，还用于当检测到所述动画载入完成后的等待时长大于或等于所述预置时长时，或检测到所述用户针对所述动画进行的所述第一预置操作时，确定所述动画播放事件被触发，执行所述开始或继续播放动画的动作；

所述执行模块，还用于当检测到所述动画进行到所述第一预置帧，或当检测到所述用户针对所述动画进行的所述第二预置操作时，确定所述动画暂停事件被触发，执行所述瞬时暂停所述动画播放的动作；

所述执行模块，还用于当检测到所述动画在进行到所述第二预置帧时，确定所述事件唤起事件被触发，执行所述唤起指定事件的动作；

所述执行模块，还用于当检测到所述动画进行到所述第三预置帧，或者当检测到所述用户针对所述动画进行的所述第三预置操作时，确定动画跳跃事件被触发，执行所述将所述动画由当前播放的帧跳转到指定的帧继续播放的动作。

11.根据权利要求7所述的装置，其特征在于，所述获取模块包括：

调用单元，用于通过调用Webview控件进入浏览器环境；

判断单元，用于判断当前浏览器的内核是否支持画布特性；

提示单元，用于若所述判断单元的判断结果为不支持，则弹出提示窗口，以引导用户升级所述当前浏览器或下载安装支持所述画布特性的目标浏览器的安装文件，并在完成所述升级或安装后执行所述进入浏览器环境的步骤；

获取单元，用于若所述判断单元的判断结果为支持，则在所述浏览器环境下获取所述目标网页的资源数据。

12.根据权利要求9至10的任一项所述的装置，其特征在于，

所述第一预置操作包括所述动画载入完毕后所述用户双击所述当前浏览器的窗口中所述动画的显示区域的任意位置的操作；

所述第二预置操作包括所述动画播放过程中，所述用户触碰屏幕上的指定区域或任意区域的操作；

所述第三预置操作包括所述动画播放过程中，所述用户在所述屏幕中进行点击一个抖动的气泡的操作。

13.一种电子设备，其特征在于，所述电子设备包括：

存储器，用于存储可执行指令；

处理器，用于执行所述存储器中存储的可执行指令时，实现如权利要求1至6任一项所述的基于动态可移植网络图形的动画实现方法。

14.一种计算机可读存储介质，其特征在于，存储有可执行指令，所述可执行指令被执行时，用于实现如权利要求1至6任一项所述的基于动态可移植网络图形的动画实现方法。

Images