CN102799425A - 一种网页图形动画实现方法及装置 - Google Patents
一种网页图形动画实现方法及装置 Download PDFInfo
- Publication number
- CN102799425A CN102799425A CN201210202154XA CN201210202154A CN102799425A CN 102799425 A CN102799425 A CN 102799425A CN 201210202154X A CN201210202154X A CN 201210202154XA CN 201210202154 A CN201210202154 A CN 201210202154A CN 102799425 A CN102799425 A CN 102799425A
- Authority
- CN
- China
- Prior art keywords
- javascript
- interface
- drawing object
- webpage
- browser
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种网页图形动画实现方法,包括如下步骤:调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存;调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值;调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。本发明还提供了一种网页图形动画实现装置。本发明的目的在于提供一种网页图形动画实现方法及装置,可快速流畅的实现网页中图形的动态变化效果,满足各种不同用户的需求。
Description
技术领域
本发明涉及浏览器、图形图像处理领域,尤其涉及一种网页图形动画实现方法及装置。
背景技术
目前,基于嵌入式浏览器实现图形动画的技术,通常采用Flash的方式来实现制作flash图形动画,并通过adobe flash player播放,或者通过JavaScript代码调用浏览器内核不停的渲染实现。
但现有技术中采用Flash的方式来实现制作flash图形动画,有以下缺点:1、需要安装adobe flash player播放插件,增加项目预算成本;2、对处理器性能要求高,不适用于低端硬件平台。
现有技术中通过JavaScript代码调用浏览器内核不停的渲染实现,有以下缺点:1、网页调用浏览器内核渲染画面时,每次都需要生成render树,时间开销大;2、对处理器性能要求高。
发明内容
本发明所要解决的技术问题在于,提供一种网页图形动画实现方法及装置,可快速流畅的实现网页中图形的动态变化效果,满足各种不同用户的需求。
为了解决上述技术问题,本发明实施例提供了一种网页图形动画实现方法,包括:
调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存;
调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值;
调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
其中,所述调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存之前,包括:
在浏览器的JavaScript引擎中扩展一套图形动画的对象接口,以便实现图形动画。
其中,所述图形动画的对象接口包括所述扩展的JavaScript图形对象接口、所述扩展的JavaScript图形对象的属性编辑接口和所述扩展的JavaScript图形对象的方法调用接口。
其中,所述调用扩展的JavaScript图形对象的方法调用接口包括:
解析网页,以便浏览器的JavaScript引擎处理网页中的JavaScript代码;
利用浏览器的JavaScript引擎处理网页中的JavaScript代码,在网页中调用所述扩展的JavaScript图形对象的方法调用接口;
调用接口调用图形处理函数,实现图形数据的处理,以获取所述图形关联结构体各参数值;
根据所述图形关联结构体各参数值计算出图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
其中,还包括:
调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用主处理器进行软件的渲染绘图。
相应地,本发明实施例还提供了一种网页图形动画实现装置,包括:
第一调用模块,用于调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存;
第二调用模块,用于调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值;
第三调用模块,用于调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
其中,还包括:
扩展模块,用于在浏览器的JavaScript引擎中扩展一套图形动画的对象接口,以便实现图形动画。
其中,所述图形动画的对象接口包括所述扩展的JavaScript图形对象接口、所述扩展的JavaScript图形对象的属性编辑接口和所述扩展的JavaScript图形对象的方法调用接口。
其中,所述第三调用模块包括:
第一单元,用于解析网页,以便浏览器的JavaScript引擎处理网页中的JavaScript代码;
第二单元,用于根据所述第一单元中浏览器的JavaScript引擎处理网页中的JavaScript代码,在网页中调用扩展的JavaScript图形对象的方法调用接口;
第三单元,用于调用图形处理函数,以获取所述图形关联结构体各参数值,根据所述图形关联结构体各参数值计算出图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
其中,还包括:
第四调用模块,用于调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用主处理器进行软件的渲染绘图。
实施本发明,具有如下有益效果:
本发明实施例提供的网页图形动画实现方法及装置,能够快速流畅的实现网页中图形的动态变化效果,不必安装adobe flash player播放插件,而且不需要重复生成Render树,直接控制绘图接口进行绘图,缩短每次绘图的流程,没有中间时间的浪费,降低硬件资源需求,在低端的硬件平台也可以实现华丽的图形动画,满足各种不同用户的需求。
附图说明
图1为本发明的一种网页图形动画实现方法的第一实施例的流程图;
图2为本发明的一种网页图形动画实现方法的第二实施例的流程图;
图3为本发明的一种网页图形动画实现方法的第三实施例的流程图;
图4为本发明的一种网页图形动画实现方法的第四实施例的流程图;
图5为本发明的一种网页图形动画实现装置的第一实施例的结构示意图;
图6为本发明的一种网页图形动画实现装置的第二实施例的结构示意图;
图7为本发明的一种网页图形动画实现装置的第三实施例的结构示意图;
图8为本发明的一种网页图形动画实现装置的第四实施例的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
请参见图1,图1为本发明提供的一种网页图形动画实现方法的第一实施例的流程图。如图1所示,该方法可以包括以下步骤:
S101,调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存;
具体的,本发明实施例中的浏览器在很多嵌入式设备上都有使用,是人机交互界面的主要载体,在浏览器上实现图形动画,可以增强应用界面的吸引力,带来赏心悦目的效果,JavaScript引擎是一个专门处理JavaScript脚本的软件程序,一般会附带在网页浏览器之中,为了实现想要的图形动画,需要在网页中调用扩展的JavaScript接口对图形动画进行控制,这些控制代码经过浏览器的解析,通过浏览器内含的JavaScript引擎调用到JavaScript代码,在网页中调用扩展的JavaScript方法,通过给浏览器原本的JavaScript引擎扩展添加一套图形动画的对象接口,来实现图形动画。本发明实施例是通过给浏览器原本的JavaScript引擎扩展添加一套图形动画的对象接口,供网页开发人员在网页开发中使用,以便实现图形动画,其中,所述图形动画的对象接口包括扩展的JavaScript图形对象接口、扩展的JavaScript图形对象的属性编辑接口和扩展的JavaScript图形对象的方法调用接口,所述调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存。
需要说明的是,所述扩展的JavaScript对象可以是画布、元素(图像、文字等)和运动描述,画布的属性可以是位置、大小、颜色等,所述扩展的JavaScript对象的方法包括添加或删除画布上的元素等操作,元素的属性包括大小、位置、颜色、边框等,方法包括设置运动类型、执行运动动作等。运动描述的属性包括运动类型(移动、放大、透明变化等)、运动时间、运动次数、起止位置等。
S102,调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值;
具体的,本发明实施例的S101步骤中调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存,并进一步地调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值。
需要说明的是,本发明实施例中所述扩展的JavaScript的对象有自己的属性接口和方法接口,在上述扩展的JavaScript对象的属性接口和方法接口的具体实现函数在JavaScript引擎中注册之后,可以调用该具体实现函数。
S103,调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
具体的,本发明实施例中绘图接口是指系统(如windows,linux)提供的用以操作硬件实际绘出图形的绘图接口,根据S102步骤中调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值,调用系统(如windows,linux)提供的用以操作硬件实际绘出图形的绘图接口调用绘图设备绘制图形,也就是根据图形处理函数中对图形数据的处理,得到图形数据和图形关联结构体各参数值等属性,并根据所述得到图形数据和图形的属性,计算出图形的目标位置和大小以及运动时间之后,如果有专门的绘图设备,则调用绘图设备进行绘图,如果没有专门的绘图设备,则调用主处理器进行软件的渲染绘图。
S103步骤中调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图,包括:
解析网页,以便浏览器的JavaScript引擎处理网页中的JavaScript代码;
利用浏览器的JavaScript引擎处理网页中的JavaScript代码,在网页中调用扩展的JavaScript图形对象的方法调用接口;
调用接口调用图形处理函数,实现图形数据的处理,以获取所述图形关联结构体各参数值;
根据所述图形关联结构体各参数值计算出图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
需要说明的是,本发明实施例中根据所述图形处理函数中对图形数据的处理,如果有专门的绘图设备,可调用系统的绘图设备进行绘图,但如果没有专门的绘画设备时,调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用主处理器进行软件的渲染绘图。
需要说明的是,所述图形处理函数是指图形动画实现之前,图形位置、时间的计算函数,通过调用接口调用图形处理函数,实现图形数据的处理,以获取所述图形关联结构体各参数值,根据所述图形关联结构体各参数值计算出图形的目标位置和大小以及运动时间。
本发明实施例是通过给浏览器原本的JavaScript引擎扩展添加一套图形动画的对象接口,供网页开发人员在网页开发中使用,以便实现图形动画,其中,
所述图形动画的对象接口包括扩展的JavaScript图形对象接口、扩展的JavaScript图形对象的属性编辑接口和扩展的JavaScript图形对象的方法调用接口,网页开发人员在开发网页时,只需要调用所述图形动画的对象接口,并通过所述浏览器内含的JavaScript引擎调用所述图形动画的对象接口所对应的图形动画的具体实现,以实现网页中的图形动画的效果。
请参见图2,为本发明的一种网页的浏览方法的第二实施例的流程图。如图2所示,该方法可以包括以下步骤:
S201,在浏览器的JavaScript引擎中扩展一套图形动画的对象接口,以便实现图形动画。
具体的,本发明实施例中的为了在浏览器上实现图形动画,在浏览器的JavaScript引擎中扩展一套图形动画的对象接口,以便实现图形动画,所述 JavaScript引擎是一个专门处理JavaScript脚本的软件程序,一般会附带在网页浏览器之中,为了实现想要的图形动画,需要在网页中调用图形动画的对象接口对图形动画进行控制,这些控制代码经过浏览器的解析,并通过所述浏览器内含的JavaScript引擎调用所述图形动画的对象接口所对应的图形动画的具体实现,以实现网页中的图形动画的效果。
本发明实施例中所述图形动画的对象接口接口包括扩展的JavaScript图形对象接口、扩展的JavaScript图形对象的属性编辑接口、扩展的JavaScript图形对象的方法调用接口,其中,所述扩展的JavaScript图形对象接口用于调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存,所述扩展的JavaScript图形对象的属性编辑接口用于设置图形关联结构体各参数值,所述扩展的JavaScript图形对象的方法调用接口用于计算图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
S202,调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存;
S203,调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值;
S204,调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
本发明实施例是通过给浏览器原本的JavaScript引擎扩展添加一套图形动画对象接口,供网页开发人员在网页开发中使用,网页开发人员在开发网页时,只需要调用所述图形动画对象接口,并通过所述浏览器内含的JavaScript引擎调用所述图形动画的对象接口所对应的图形动画的具体实现以实现网页中的图形动画的效果,其中,,所述调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
请参见图3,为本发明的一种网页的浏览方法的第三实施例的流程图。如图3所示,该方法可以包括以下步骤:
S301,调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存;
S302,调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值;
S303,解析网页,以便浏览器的JavaScript引擎处理网页中的JavaScript代码;
具体的,本发明实施例中的浏览器在很多嵌入式设备上都有使用,是人机交互界面的主要载体,嵌入式浏览器作为网页浏览器,首先要完成网页的浏览功能,为了实现想要的图形动画,需要在网页中调用扩展的JavaScript接口对图形动画进行设置,而网页中的代码都要先经过浏览器的解析,这是浏览器的处理规范决定的,所述嵌入式浏览器要支持网页的HTTP或者WAP等传输协议、HTML、JavaScript或扩展XML、WML等脚本语言,所述嵌入式浏览器通过解析网页,使得用户可以在客户端看到通过所述浏览器解析的来自服务端的代码。
本发明实施例中JavaScript是一种脚本语言,由数行可执行计算机代码组成的,通常直接嵌入HTML页面中,用来向HTML页面添加交互行为,JavaScript是网络中最流行的脚本语言,可以在所有主要的浏览器中运行,JavaScript被广泛地应用于网页设计中,因为JavaScript脚本不仅可以减小网页的规模和提高网页浏览速度,而且可以丰富网页的表现,如动画、声音等。
本发明实施例中为了实现想要的图形动画,需要在网页中调用图形动画的对象接口对图形动画进行控制,这些控制代码经过浏览器的解析,并通过所述浏览器内含的JavaScript引擎调用所述图形动画的对象接口所对应的图形动画的具体实现,以实现网页中的图形动画的效果,在所述扩展的JavaScript对象的属性接口和方法接口的具体实现函数在JavaScript引擎中注册之后,网页中的图形动画接口代码经过JavaScript引擎解析后,通过浏览器内含的JavaScript引擎调用到JavaScript对象的属性接口和方法接口,只需要调用所述图形动画的对象接口,并通过所述浏览器内含的JavaScript引擎调用所述图形动画的对象接口所对应的图形动画的具体实现,以实现网页中的图形动画的效果。
S304,利用浏览器的JavaScript引擎处理网页中的JavaScript代码,在网页中调用扩展的JavaScript图形对象的方法调用接口;
具体的,本发明实施例在S303步骤中通过解析网页,以便浏览器的JavaScript引擎处理网页中的JavaScript代码,就是利用浏览器的JavaScript引擎处理网页中的JavaScript代码,并在网页中的图形动画接口代码经过JavaScript引擎解析后,通过浏览器内含的JavaScript引擎调用到JavaScript对象的属性接口和方法接口,此时,只需要调用所述图形动画的对象接口,并通过所述浏览器内含的JavaScript引擎调用所述图形动画的对象接口所对应的图形动画的具体实现,所述图形动画的对象接口包括扩展的JavaScript图形对象接口、扩展的JavaScript图形对象的属性编辑接口和扩展的JavaScript图形对象的方法调用接口,所述利用浏览器的JavaScript引擎处理网页中的JavaScript代码,在网页中调用扩展的JavaScript图形对象的方法调用接口,实现将图形数据写入浏览器内存,以实现网页中的图形动画的效果。
S305,调用接口调用图形处理函数,实现图形数据的处理,以获取所述图形关联结构体各参数值;
具体的,本发明实施例中S302步骤中调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值,也就是在网页中通过扩展的JavaScript方法调用图形处理函数,所述图形处理函数是指图形动画实现之前,图形位置、时间的计算函数,所述图形处理函数通过所述图形处理函数的接口调用图形对象数据,并获取图形的属性,并根据所述获取到的图形的属性,计算出图形的目标位置和大小以及运动时间,根据所述图形处理函数中对图形数据的处理,得到图形数据和图形关联结构体各参数值等属性,并根据所述得到图形数据和图形的属性,计算出图形的目标位置和大小以及运动时间。
S306,根据所述图形关联结构体各参数值计算出图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
具体的,本发明实施例中绘图接口是指系统(如windows,linux)提供的用以操作硬件实际绘出图形的绘图接口,根据S305步骤中调用接口调用图形处理函数,实现图形数据的处理,以获取所述图形关联结构体各参数值,并根据所述图形关联结构体各参数值计算出图形的目标位置和大小以及运动时间,并调用系统(如windows,linux)提供的用以操作硬件实际绘出图形的绘图接口调用绘图设备绘制图形,也就是根据所述图形处理函数中对图形数据的处理,得到图形数据和图形关联结构体各参数值等属性,并根据所述得到图形数据和图形的属性,计算出图形的目标位置和大小以及运动时间之后,如果有专门的绘图设备,调用系统(如windows,linux)提供的用以操作硬件实际绘出图形的绘图接口刷新网页,如果没有专门的绘图设备,则调用主处理器进行软件的渲染绘图。
请参见图4,为本发明的一种网页的浏览方法的第四实施例的流程图。如图4所示,该方法可以包括以下步骤:
S401,调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存;
S402,调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值;
S403,调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用主处理器进行软件的渲染绘图。
具体的,本发明实施例在调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,,根据S402步骤中调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值,以获取所述图形关联结构体各参数值,并根据所述图形关联结构体各参数值计算出图形的目标位置和大小以及运动时间,并调用系统(如windows,linux)提供的用以操作硬件实际绘出图形的绘图接口调用绘图设备绘制图形。
但是,当根据所述图形处理函数中对图形数据的处理,得到图形数据和图形关联结构体各参数值等属性,并根据所述得到图形数据和图形的属性,计算出图形的目标位置和大小以及运动时间之后,如果系统没有专门的绘图设备,就无法实现调用系统(如windows,linux)提供的用以操作硬件实际绘出图形的绘图接口刷新网页,此时,则调用主处理器进行软件的渲染绘图。
S404步骤调用主处理器进行软件的渲染绘图包括:
解析网页,以便浏览器的JavaScript引擎处理网页中的JavaScript代码;
根据所述解析单元中浏览器的JavaScript引擎处理网页中的JavaScript代码,在网页中调用扩展的JavaScript图形对象的方法调用接口;
调用图形处理函数,以获取所述图形关联结构体各参数值;
根据所述图形关联结构体各参数值计算出图形的目标位置和大小以及运动时间,并调用主处理器进行软件的渲染绘图。
请参见图5,为本发明的一种网页图形动画实现装置的第一实施例的结构示意图。如图5所示,所述网页浏览装置包括:
第一调用模块10,用于调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存;
具体的,本发明实施例中所述第一调用模块10用于调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存,所述浏览器在很多嵌入式设备上都有使用,是人机交互界面的主要载体,在所述浏览器上实现图形动画,可以增强应用界面的吸引力,带来赏心悦目的效果,JavaScript引擎是一个专门处理JavaScript脚本的软件程序,一般会附带在网页浏览器之中,为了实现想要的图形动画,需要在网页中调用扩展的JavaScript接口对图形动画进行控制,这些控制代码经过浏览器的解析,通过浏览器内含的JavaScript引擎调用到JavaScript代码,在网页中调用扩展的JavaScript方法,通过给浏览器原本的JavaScript引擎扩展添加一套图形动画的对象接口,来实现图形动画。
本发明实施例是通过给浏览器原本的JavaScript引擎扩展添加一套图形动画的对象接口,供网页开发人员在网页开发中使用,以便实现图形动画,其中,所述图形动画的对象接口包括扩展的JavaScript图形对象接口、扩展的JavaScript图形对象的属性编辑接口和扩展的JavaScript图形对象的方法调用接口,所述第一调用模块10用于调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存。
第二调用模块20,用于调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值;
具体的,本发明实施例中所述第二调用模块20用于调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值,本发明实施例的所述第一调用模块10调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存,并进一步地通过所述第二调用模块20调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值。
第三调用模块30,用于调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
具体的,本发明实施例中所述第三调用模块30用于调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,根据所述第二调用模块20调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值,通过所述调用模块30调用系统(如windows,linux)提供的用以操作硬件实际绘出图形的绘图接口调用绘图设备绘制图形,也就是根据所述图形处理函数中对图形数据的处理,得到图形数据和图形关联结构体各参数值等属性,并根据所述得到图形数据和图形的属性,计算出图形的目标位置和大小以及运动时间之后,如果有专门的绘图设备,通过所述第三调用模块30调用绘图设备进行绘图,如果没有专门的绘图设备,则调用主处理器进行软件的渲染绘图。
本发明实施例中所述第一调用模块10用于调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存,所述第二调用模块20用于调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值,所述第三调用模块30用于调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图,以便实现图形动画。
请参见图6,为本发明的一种网页图形动画实现装置的第二实施例的结构示意图。如图6所示,所述网页图形动画实现装置包括上述图5中的:第一调用模块10、第二调用模块20、第三调用模块30,本发明实施例中,所述网页图形动画实现装置进一步包括:
扩展模块00,用于在浏览器的JavaScript引擎中扩展一套图形动画的对象接口,以便实现图形动画。
具体地,本发明实施例中所述扩展模块00用于在浏览器的JavaScript引擎中扩展一套图形动画的对象接口,以便实现图形动画,。为了在浏览器上实现图形动画,本发明实施例在浏览器的JavaScript引擎中扩展一套图形动画的对象接口,以便实现图形动画,所述 JavaScript引擎是一个专门处理JavaScript脚本的软件程序,一般会附带在网页浏览器之中,为了实现想要的图形动画,需要在网页中调用图形动画的对象接口对图形动画进行控制,这些控制代码经过浏览器的解析,并通过所述浏览器内含的JavaScript引擎调用所述图形动画的对象接口所对应的图形动画的具体实现,以实现网页中的图形动画的效果。
本发明实施例中通过扩展模块00在浏览器的JavaScript引擎中扩展一套图形动画的对象接口,包括扩展的JavaScript图形对象接口、扩展的JavaScript图形对象的属性编辑接口、扩展的JavaScript图形对象的方法调用接口,其中,所述扩展的JavaScript图形对象接口用于调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存,所述扩展的JavaScript图形对象的属性编辑接口用于设置图形关联结构体各参数值,所述扩展的JavaScript图形对象的方法调用接口用于计算图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
请参见图7,为本发明的一种网页图形动画实现装置的第三实施例的结构示意图。如图7所示,所述网页图形动画实现装置包括上述图5中的:第一调用模块10、第二调用模块20,本发明实施例中,所述第三调用模块30包括:
第一单元301,用于解析网页,以便浏览器的JavaScript引擎处理网页中的JavaScript代码;
具体的,本发明所述例中所述第一单元301用于解析网页,以便浏览器的JavaScript引擎处理网页中的JavaScript代码,在所述扩展的JavaScript对象的属性接口和方法接口的具体实现函数在JavaScript引擎中注册之后,网页中的图形动画接口代码经过JavaScript引擎解析后,通过浏览器内含的JavaScript引擎调用到JavaScript对象的属性接口和方法接口,只需要调用所述图形动画的对象接口,并通过所述浏览器内含的JavaScript引擎调用所述图形动画的对象接口所对应的图形动画的具体实现,以实现网页中的图形动画的效果。
第二单元302,用于根据所述第一单元301中浏览器的JavaScript引擎处理网页中的JavaScript代码,在网页中调用扩展的JavaScript图形对象的方法调用接口;
具体的,本发明实施例在中所述第一单元301通过解析网页,以便浏览器的JavaScript引擎处理网页中的JavaScript代码,就是利用浏览器的JavaScript引擎处理网页中的JavaScript代码,并在网页中的图形动画接口代码经过JavaScript引擎解析后,通过浏览器内含的JavaScript引擎调用到JavaScript对象的属性接口和方法接口,此时,只需要调用所述图形动画的对象接口,并通过所述浏览器内含的JavaScript引擎调用所述图形动画的对象接口所对应的图形动画的具体实现,以实现网页中的图形动画的效果。
第三单元303,用于调用图形处理函数,以获取所述图形关联结构体各参数值,根据所述图形关联结构体各参数值计算出图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
具体的,本发明实施例中所述第三单元303用于调用图形处理函数,以获取所述图形关联结构体各参数值,根据所述图形关联结构体各参数值计算出图形的目标位置和大小以及运动时间,并调用系统(如windows,linux)提供的用以操作硬件实际绘出图形的绘图接口调用绘图设备绘制图形,也就是根据图形处理函数中对图形数据的处理,得到图形数据和图形关联结构体各参数值等属性,并根据所述得到图形数据和图形的属性,计算出图形的目标位置和大小以及运动时间之后,如果有专门的绘图设备,调用系统(如windows,linux)提供的用以操作硬件实际绘出图形的绘图接口刷新网页,如果没有专门的绘图设备,则调用主处理器进行软件的渲染绘图。
请参见图8,为本发明的一种网页图形动画实现装置的第四实施例的结构示意图。如图8所示,所述网页图形动画实现装置包括上述图5中的:调用第一调用模块10、第二调用模块20,第三调用模块30,本发明实施例中,所述网页动画实现装置还包括:
第四调用模块40,用于调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用主处理器进行软件的渲染绘图。
具体的,本发明实施例中所述第三调用模块30用于调用扩展的JavaScript图形对象的方法调用接口,并根据所述图形关联结构体各参数值以计算图形的目标位置和大小以及运动时间,并调用系统(如windows,linux)提供的用以操作硬件实际绘出图形的绘图接口调用绘图设备绘制图形,所述绘图接口是指系统(如windows,linux)提供的用以操作硬件实际绘出图形的绘图接口。
但是,当根据所述图形处理函数中对图形数据的处理,得到图形数据和图形关联结构体各参数值等属性,并根据所述得到图形数据和图形的属性,计算出图形的目标位置和大小以及运动时间之后,如果系统没有专门的绘图设备,就无法实现调用系统(如windows,linux)提供的用以操作硬件实际绘出图形的绘图接口刷新网页,此时,可通过所述第四调用模块40调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用主处理器进行软件的渲染绘图。
需要说明的是,所述第四调用模块40进一步包括:
第四单元401,用于解析网页,以便浏览器的JavaScript引擎处理网页中的JavaScript代码;
第五单元402,用于根据所述第四单元中浏览器的JavaScript引擎处理网页中的JavaScript代码,在网页中调用扩展的JavaScript图形对象的方法调用接口;
第六单元403,用于调用图形处理函数,以获取所述图形关联结构体各参数值,根据所述图形关联结构体各参数值计算出图形的目标位置和大小以及运动时间,并调用主处理器进行软件的渲染绘图。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,所述的程序可存储于一计算机可读写存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,所述的存储介质可为FLASH闪存、电可擦可编程只读存储器、磁碟、光盘、只读存储记忆体(Read-Only Memory,ROM)或随机存储记忆体(Random Access Memory,RAM)等。
以上所揭露的仅为本发明较佳实施例而已,当然不能以此来限定本发明之权利范围,本领域普通技术人员可以理解实现上述实施例的全部或部分流程,并依本发明权利要求所作的等同变化,仍属于发明所涵盖的范围。
Claims (10)
1.一种网页图形动画实现方法,其特征在于,包括:
调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存;
调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值;
调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
2.如权利要求1所述的方法,其特征在于,所述调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存之前,包括:
在浏览器的JavaScript引擎中扩展一套图形动画的对象接口,以便实现图形动画。
3.如权利要求2所述的方法,其特征在于,所述图形动画的对象接口包括所述扩展的JavaScript图形对象接口、所述扩展的JavaScript图形对象的属性编辑接口和所述扩展的JavaScript图形对象的方法调用接口。
4.如权利要求1所述的方法,其特征在于,所述调用扩展的JavaScript图形对象的方法调用接口包括:
解析网页,以便浏览器的JavaScript引擎处理网页中的JavaScript代码;
利用浏览器的JavaScript引擎处理网页中的JavaScript代码,在网页中调用所述扩展的JavaScript图形对象的方法调用接口;
调用接口调用图形处理函数,实现图形数据的处理,以获取所述图形关联结构体各参数值;
根据所述图形关联结构体各参数值计算出图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
5.如权利要求1所述的方法,其特征在于,还包括:
调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用主处理器进行软件的渲染绘图。
6.一种网页图形动画实现装置,其特征在于,包括:
第一调用模块,用于调用扩展的JavaScript图形对象接口,以将图形数据写入浏览器内存;
第二调用模块,用于调用扩展的JavaScript图形对象的属性编辑接口,以设置图形关联结构体各参数值;
第三调用模块,用于调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
7.如权利要求6所述的装置,其特征在于,还包括:
扩展模块,用于在浏览器的JavaScript引擎中扩展一套图形动画的对象接口,以便实现图形动画。
8.如权利要求6所述的装置,其特征在于,所述图形动画的对象接口包括所述扩展的JavaScript图形对象接口、所述扩展的JavaScript图形对象的属性编辑接口和所述扩展的JavaScript图形对象的方法调用接口。
9.如权利要求6所述的装置,其特征在于,所述第三调用模块包括:
第一单元,用于解析网页,以便浏览器的JavaScript引擎处理网页中的JavaScript代码;
第二单元,用于根据所述第一单元中浏览器的JavaScript引擎处理网页中的JavaScript代码,在网页中调用扩展的JavaScript图形对象的方法调用接口;
第三单元,用于调用图形处理函数,以获取所述图形关联结构体各参数值,根据所述图形关联结构体各参数值计算出图形的目标位置和大小以及运动时间,并调用绘图设备进行绘图。
10.如权利要求6所述的装置,其特征在于,还包括:
第四调用模块,用于调用扩展的JavaScript图形对象的方法调用接口,以计算图形的目标位置和大小以及运动时间,并调用主处理器进行软件的渲染绘图。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201210202154XA CN102799425A (zh) | 2012-06-19 | 2012-06-19 | 一种网页图形动画实现方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201210202154XA CN102799425A (zh) | 2012-06-19 | 2012-06-19 | 一种网页图形动画实现方法及装置 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN102799425A true CN102799425A (zh) | 2012-11-28 |
Family
ID=47198542
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201210202154XA Pending CN102799425A (zh) | 2012-06-19 | 2012-06-19 | 一种网页图形动画实现方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN102799425A (zh) |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103345389A (zh) * | 2013-06-06 | 2013-10-09 | 百度在线网络技术(北京)有限公司 | 一种应用于网页的矢量图形的操作方法和装置 |
CN104573110A (zh) * | 2015-02-02 | 2015-04-29 | 北京恒华伟业科技股份有限公司 | 一种浏览器中图形的动态展示方法及装置 |
CN106775862A (zh) * | 2016-12-08 | 2017-05-31 | 蓝信工场(北京)科技有限公司 | 应用加载方法及装置 |
CN107533466A (zh) * | 2015-04-14 | 2018-01-02 | 微软技术许可有限责任公司 | 独立表达式动画 |
CN107608993A (zh) * | 2016-07-12 | 2018-01-19 | 腾讯科技(深圳)有限公司 | 网页动画生成的方法和装置 |
CN107783986A (zh) * | 2016-08-25 | 2018-03-09 | 平安科技(深圳)有限公司 | 一种web图形编辑方法及终端 |
CN107967344A (zh) * | 2017-12-11 | 2018-04-27 | 上海携程商务有限公司 | 网页动画效果的实现方法、系统、设备及存储介质 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20080303828A1 (en) * | 2007-06-08 | 2008-12-11 | Apple Inc. | Web-based animation |
CN101419553A (zh) * | 2008-12-10 | 2009-04-29 | 青岛海信宽带多媒体技术股份有限公司 | 一种用户界面设计方法 |
CN101706782A (zh) * | 2009-11-16 | 2010-05-12 | 深圳市同洲电子股份有限公司 | 一种实现网页特效的方法及系统 |
CN101901274A (zh) * | 2010-08-11 | 2010-12-01 | 深圳市茁壮网络股份有限公司 | 实现页面特效的方法及装置 |
-
2012
- 2012-06-19 CN CN201210202154XA patent/CN102799425A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20080303828A1 (en) * | 2007-06-08 | 2008-12-11 | Apple Inc. | Web-based animation |
CN101419553A (zh) * | 2008-12-10 | 2009-04-29 | 青岛海信宽带多媒体技术股份有限公司 | 一种用户界面设计方法 |
CN101706782A (zh) * | 2009-11-16 | 2010-05-12 | 深圳市同洲电子股份有限公司 | 一种实现网页特效的方法及系统 |
CN101901274A (zh) * | 2010-08-11 | 2010-12-01 | 深圳市茁壮网络股份有限公司 | 实现页面特效的方法及装置 |
Cited By (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103345389A (zh) * | 2013-06-06 | 2013-10-09 | 百度在线网络技术(北京)有限公司 | 一种应用于网页的矢量图形的操作方法和装置 |
CN103345389B (zh) * | 2013-06-06 | 2016-12-28 | 百度在线网络技术(北京)有限公司 | 一种应用于网页的矢量图形的操作方法和装置 |
CN104573110A (zh) * | 2015-02-02 | 2015-04-29 | 北京恒华伟业科技股份有限公司 | 一种浏览器中图形的动态展示方法及装置 |
CN107533466A (zh) * | 2015-04-14 | 2018-01-02 | 微软技术许可有限责任公司 | 独立表达式动画 |
CN107533466B (zh) * | 2015-04-14 | 2021-05-14 | 微软技术许可有限责任公司 | 独立表达式动画 |
CN107608993A (zh) * | 2016-07-12 | 2018-01-19 | 腾讯科技(深圳)有限公司 | 网页动画生成的方法和装置 |
CN107608993B (zh) * | 2016-07-12 | 2024-05-28 | 腾讯科技(深圳)有限公司 | 网页动画生成的方法和装置 |
CN107783986A (zh) * | 2016-08-25 | 2018-03-09 | 平安科技(深圳)有限公司 | 一种web图形编辑方法及终端 |
CN106775862A (zh) * | 2016-12-08 | 2017-05-31 | 蓝信工场(北京)科技有限公司 | 应用加载方法及装置 |
CN107967344A (zh) * | 2017-12-11 | 2018-04-27 | 上海携程商务有限公司 | 网页动画效果的实现方法、系统、设备及存储介质 |
CN107967344B (zh) * | 2017-12-11 | 2020-07-14 | 上海携程商务有限公司 | 网页动画效果的实现方法、系统、设备及存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN102799425A (zh) | 一种网页图形动画实现方法及装置 | |
US20220365988A1 (en) | Systems and Methods for Hosted Applications | |
CN108010112B (zh) | 动画处理方法、装置及存储介质 | |
CN111026396B (zh) | 页面渲染方法、装置、电子设备及存储介质 | |
US11425220B2 (en) | Methods, systems, and computer program products for implementing cross-platform mixed-reality applications with a scripting framework | |
CN110297996B (zh) | 基于h5页面的动画显示方法、装置、设备及存储介质 | |
CN102323882B (zh) | 一种应用于Web3D的数据处理装置和方法 | |
CN102306174B (zh) | 一种基于网页元素与用户进行互动的方法与设备 | |
CN102937861B (zh) | 用于显示环境的共享边缘 | |
CN105096368B (zh) | 三维对象处理方法和相关装置 | |
US20140359430A1 (en) | Animation editing | |
US20170173467A1 (en) | Technologies for native game experience in web rendering engine | |
CN111459586B (zh) | 远程协助方法、装置、存储介质及终端 | |
CN105208442A (zh) | 一种视频播放应用程序的视频播放方法及装置 | |
US20140281897A1 (en) | Switching to and from native web applications | |
Hales | HTML5 and JavaScript Web Apps | |
CN113411664B (zh) | 基于子应用的视频处理方法、装置和计算机设备 | |
CN103544024A (zh) | 生成浏览器页面的方法、系统及终端设备 | |
US20230403437A1 (en) | Graphics engine and graphics processing method applicable to player | |
CN111078325B (zh) | 应用程序运行方法、装置、电子设备及存储介质 | |
CN102455914A (zh) | 一种基于浏览器扩展的跨平台gui快速原型开发方法 | |
CN107092514B (zh) | 一种页面内容展示方法及装置 | |
CN113688341B (zh) | 动态图片分解方法、装置、电子设备及可读存储介质 | |
CN110069725A (zh) | 可视化内嵌浏览器方法和装置 | |
US11507633B2 (en) | Card data display method and apparatus, and storage medium |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20121128 |
|
RJ01 | Rejection of invention patent application after publication |