CN101901274B - 实现页面特效的方法及装置 - Google Patents

Abstract

本发明涉及网页处理技术领域，公开了一种实现页面特效的方法及装置。所述方法包括：通过JavaScript接口创建页面特效所需的页面对象；利用所述页面对象创建页面元素；绘制所述页面元素到图层，并记录所述页面元素的动画动作及相应参数；根据所述页面元素的动画动作及相应参数显示所述图层。利用本发明，无需在JavaScript中进行大量的运算，可以在嵌入式平台上达到快速流畅的动画效果。

Description

实现页面特效的方法及装置

技术领域

本发明涉及网页处理技术领域，更具体地说，涉及一种实现页面特效的方法及装置。

背景技术

网页特效就是网页的动态特殊效果，应用它可以使网页变得形式多样，提高用户体验和页面的视觉效果。目前，网页特效大都是通过动态图片来实现，比如弹出窗口、漂浮广告等。

随着人们对网页应用需求的提高，仅仅靠动态图片已远远不能满足这种应用需求。由于在网页中都是静态的标签和对象，于是很多就使用标准的JavaScript通过修改静态图片或其它对象的位置和尺寸来改变页面，实现2D特效。

JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言一起实现在一个Web页面中连接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序等。它是通过嵌入或调入到标准的HTML语言中实现的。

由于标准的JavaScript是通过改变页面中元素的位置、大小等属性信息来实现，比如先通过getElemntById()接口获取到元素的JavaScript对象obj，再通过obj.style.left＝x和obj.style.top＝y来改变位置，当x和y不断变化并且改变量比较小的时候就能达到滑动动画的效果。因此这种方法实现上比较复杂，在PC机上的效果还可以，但是，如果应用在嵌入式平台上，由于JavaScript会有大量的运算，并且需要不断的刷新并通过浏览器绘图，一个动画效果可能要画几十乃至几百次，在嵌入式平台上由于硬件性能低下，利用这种方法实现的页面特效往往效果不佳。

发明内容

本发明实施例提供一种实现页面特效的方法及装置，避免JavaScript中大量的运算，在嵌入式平台上达到快速流畅的动画效果。

为此，本发明实施例提供如下技术方案：

一种实现页面特效的方法，包括：

通过JavaScript接口创建页面特效所需的页面对象；

利用所述页面对象创建页面元素；

绘制所述页面元素到图层，并记录所述页面元素的动画动作及相应参数；

根据所述页面元素的动画动作及相应参数显示所述图层。

优选地，所述页面对象包括：页面元素对象、画布对象、特效对象、特效控制对象。

可选地，所述页面元素对象包括以下任意一种或多种：

用于加载图片的图片对象、用于显示字符串的文本对象、用于网页中的排版和页面元素控制的容器对象、用于滚动字符串和其显示风格设置的滚动对象。

优选地，所述利用页面对象创建页面元素包括：

利用所述画布对象生成画布；

将所需的页面元素对象添加到画布中；

利用所述特效对象设置所述页面元素对象的特效类型及参数；

利用所述特效控制对象控制所述特效对象的开始、并行执行和结束。

优选地，所述绘制所述页面元素到图层包括：

利用硬件绘制所述页面元素到图层。

一种实现页面特效的装置，包括：

对象创建单元，用于通过JavaScript接口创建页面特效所需的页面对象；

页面元素创建单元，用于利用所述页面对象创建页面元素；

绘制单元，用于绘制所述页面元素到图层，并记录所述页面元素的动画动作及相应参数；

显示单元，用于根据所述页面元素的动画动作及相应参数显示所述图层。

优选地，所述页面对象包括：页面元素对象、画布对象、特效对象、特效控制对象。

可选地，所述页面元素对象包括以下任意一种或多种：

用于加载图片的图片对象、用于显示字符串的文本对象、用于网页中的排版和页面元素控制的容器对象、用于滚动字符串和其显示风格设置的滚动对象。

优选地，所述页面元素创建单元包括：

画布生成子单元，用于利用所述画布对象生成画布；

标签添加子单元，用于将所需的页面元素对象添加到画布中；

设置子单元，用于利用所述特效对象设置所述页面元素对象的特效类型及参数；

控制子单元，用于利用所述特效控制对象控制所述特效对象的开始、并行执行和结束。

本发明实施例实现页面特效的方法及装置，通过JavaScript接口创建页面特效所需的页面对象，利用所述页面对象创建页面元素，从而简化了页面的逻辑，通过简单的接口即能实现页面动画效果，避免了JavaScript中大量的运算，从而可以应用于嵌入工平台上，达到较好的动画效果。进一步地，可以将页面绘制过程中不断的刷新利用硬件加速去完成，提高用户体验。

附图说明

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

图1是本发明实施例实现页面特效的方法的流程图；

图2是本发明实施例实现页面特效的装置的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明实施例中的技术方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员所获得的所有其他实施例，都应当属于本发明保护的范围。

如图1所示是本发明实施例实现页面特效的方法的流程图，包括以下步骤：

步骤101，通过JavaScript接口创建页面特效所需的页面对象。

所述页面对象包括：页面元素对象、画布对象、特效对象、特效控制对象。

其中，所述页面元素对象包括以下任意一种或多种：

(1)图片对象，类似于网页中的img标签，利用所述图片对象，可以加载一幅图片，设置图片的位置和大小等，当然，也可以针对单幅图片进行特效操作；

(2)文本对象，类似于网页中的文本标签，利用所述文本对象，可以显示字符串并对所述字符串进行显示风格设置，也可以添加相应的特效；

(3)容器对象，类似于网页中的Div标签，主要用于网页中的排版和页面元素的控制；

(4)滚动对象，类似于网页中的marquee标签，用于滚动字符串和对所述字符串显示风格进行设置。

当然，根据需要，还可以设置其他页面元素对象，对此本发明实施例并不做限定。

所述特效对象用于定义各页面元素对象在页面中的特效类型，比如移动特效、缩放特效、渐近渐隐特效、切入特效、切出特效、透明度特效、旋转特效、马赛克特效、变形特效等。

所述特效控制对象用于对所述特效对象进行管理和控制，控制特效的开始、结束，以及控制特效的并行执行等。

步骤102，利用所述页面对象创建页面元素，具体可以按以下步骤创建页面元素：

(1)利用所述画布对象生成画布；

(2)将所需的页面元素对象添加到画布中；利用所述特效对象设置所述页面元素对象的特效类型及参数；利用所述特效控制对象控制所述特效对象的开始、并行执行和结束。

需要说明的是，根据页面实际所需文字和/或图像数量的不同，上述步骤(2)可以重复多次。

当然，在具体应用时，可以有多种实现方式，比如可以先将所需的所有页面元素对象都依次添加到画布中，然后再依次对每个页面元素对象进行操作；也可以每次仅添加一个页面元素对象到画布中，对其操作完成后再添加下一个页面元素对象。

步骤103，绘制所述页面元素到图层，并记录所述页面元素的动画动作及相应参数。

在实际应用中，可以利用图层管理器管理所有页面对象，浏览器调用图层管理器提供的JavaScript接口，所需的页面元素绘制到相应的图层。比如，假设Surface是通过图层管理器创建的一种存储图像的介质(可以是内存或者图层)，图层管理器创建了Surface后，可以设置该Surface的层次级别，例如：有两个Surface：Surface1和Surface2，层次分别是1和2，每个层次上有移动的动画，浏览器通过相应的指令将动画效果和参数通知各图层管理器，图层管理器就会将这两个Surface显示到显示设备上并且不断地改变位置达到动画效果，并且如果Surface1和Surface2的位置重叠的时候，每次显示刷新的时候先显示Surface1，后显示Surface2，Surface2就会将Surface1盖住。

步骤104，根据所述页面元素的动画动作及相应参数显示所述图层。

本发明实施例实现页面特效的方法，通过JavaScript接口创建页面特效所需的页面对象，利用所述页面对象创建页面元素，从而简化了页面的逻辑，通过简单的接口即能实现页面动画效果，由于不需要在JavaScript中进行大量的运算，因此不仅可以应用在PC机上实现页面特效，而且可以应用于嵌入式系统中，达到较好的动画效果。而且，利用JavaScript接口，可以使动画指令的扩展非常方便，更好地满足不同层次的业务开发需要。

为了进一步提高显示效果，在具体应用时，可以针对嵌入式系统的特点，将页面绘制过程中不断的刷新利用硬件加速去完成，使动画显示更流畅、快速，更好地提高用户体验。

下面进一步通过对现有技术中实现页面特效及利用本发明实施例的方法实现页面特效进行比较，说明本发明实施例的方法所能达到的效果。

例如，实现将高宽均为100的图片从位置(0，0)移动到位置(200，400)，每次移动间隔时间是20ms，移动次数是50次。

标准的JavaScript实现上面特效所需代码如下：

      <img id＝”moveimg”src＝”1.gif”width＝”100”height＝”100”style＝”left:0；

  top:0”>

      <SCRIPT LANGUAGE＝″JavaScript″>

    <！--

    var obj＝getElementById(″moveimg″)；

    var count＝50；

    var dltx＝200/50；

    var dlty＝400/50；

    var timer；

    function move()

    {

      obj.style.left＝parseInt(obj.style.left)+dltx；

      obj.style.top＝parseInt(obj.style.top)+dlty；

      if(count＞0)

      {

          if(timer)

             ctearTimeout(timer)；

      setTimeout(″move()″，20)；

      count--；

  }

}

//-->

</SCRIPT>

从浏览器的角度来看，上面这种实现需要不断的执行move函数才能达到动画的效果，实现复杂，需要大量的计算和处理，对系统的计算性能和速度要求较高。

利用本发明实施例的方法，则只需设置以下JavaScript接口：

var Image＝new graphics.imageElement(0，0，100，100，”1.gif”)；

var move_effect＝new graphics.effect(″move″，0，0，200，400，20，50)；

image.execEffect(move_effect)；

由此可见，本发明实施例实现页面特效的方法几乎不需要计算，即可方便、高效地实现上面所述的特效。不仅使用方便，而且易扩展，可以较好地应用于嵌入式系统中。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，所述的程序可以存储于一计算机可读取存储介质中，所述的存储介质，如：ROM/RAM、磁碟、光盘等。

相应地，本发明实施例还提供了一种实现页面特效的装置，如图2所示，是该装置的一种结构示意图。

在该实施例中，所述装置包括：

对象创建单元201，用于通过JavaScript接口创建页面特效所需的页面对象。

优选地，所述页面对象包括：页面元素对象、画布对象、特效对象、特效控制对象。其中，所述页面元素对象包括以下任意一种或多种：

用于加载图片的图片对象、用于显示字符串的文本对象、用于网页中的排版和页面元素控制的容器对象、用于滚动字符串和其显示风格设置的滚动对象。当然，根据应用需要，还可以创建其他的页面元素对象。

页面元素创建单元202，用于利用所述页面对象创建页面元素。

绘制单元203，用于绘制所述页面元素到图层，并记录所述页面元素的动画动作及相应参数。

显示单元204，用于根据所述页面元素的动画动作及相应参数显示所述图层。

在实际应用中，所述页面元素创建单元可以有多种实现方式，比如，可以包括以下子单元：

画布生成子单元，用于利用所述画布对象生成画布；

标签添加子单元，用于将所需的页面元素对象添加到画布中；

设置子单元，用于利用所述特效对象设置所述页面元素对象的特效类型及参数；

控制子单元，用于利用所述特效控制对象控制所述特效对象的开始、并行执行和结束。

当然，所述页面元素创建单元还可以有其他实现方式，本发明实施例对此不做限定。

本发明实施例实现页面特效的装置，通过JavaScript接口创建页面特效所需的页面对象，利用所述页面对象创建页面元素，从而简化了页面的逻辑，通过简单的接口即能实现页面动画效果，由于不需要在JavaScript中进行大量的运算，因此不仅可以应用在PC机上实现页面特效，而且可以应用于嵌入式系统中，达到较好的动画效果。而且，利用JavaScript接口，可以使动画指令的扩展非常方便，更好地满足不同层次的业务开发需要。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。

本发明可用于众多通用或专用的计算系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

以上公开的仅为本发明的优选实施方式，但本发明并非局限于此，任何本领域的技术人员能思之的没有创造性的变化，以及在不脱离本发明原理前提下所作的若干改进和润饰，都应落在本发明的保护范围内。

Claims (5)

1.一种实现页面特效的方法，其特征在于，包括：

通过JavaScript接口创建页面特效所需的页面对象，所述页面对象包括：页面元素对象、画布对象、特效对象、特效控制对象；所述页面元素对象包括以下任意一种或多种：用于加载图片的图片对象、用于显示字符串的文本对象、用于网页中的排版和页面元素控制的容器对象、用于滚动字符串和其显示风格设置的滚动对象；所述特效对象用于定义所述页面元素对象在页面中的特效类型；所述特效控制对象用于对所述特效对象进行管理和控制；

利用所述页面对象创建页面元素；

绘制所述页面元素到图层，并记录所述页面元素的动画动作及相应参数；

根据所述页面元素的动画动作及相应参数显示所述图层。

2.如权利要求1所述的方法，其特征在于，所述利用页面对象创建页面元素包括：

利用所述画布对象生成画布；

将所需的页面元素对象添加到画布中；

利用所述特效对象设置所述页面元素对象的特效类型及参数；

利用所述特效控制对象控制所述特效对象的开始、并行执行和结束。

3.如权利要求1或2所述的方法，其特征在于，所述绘制所述页面元素到图层包括：

利用硬件绘制所述页面元素到图层。

4.一种实现页面特效的装置，其特征在于，包括：

对象创建单元，用于通过JavaScript接口创建页面特效所需的页面对象，所述页面对象包括：页面元素对象、画布对象、特效对象、特效控制对象；所述页面元素对象包括以下任意一种或多种：用于加载图片的图片对象、用于显示字符串的文本对象、用于网页中的排版和页面元素控制的容器对象、用于滚动字符串和其显示风格设置的滚动对象；所述特效对象用于定义所述页面元素对象在页面中的特效类型；所述特效控制对象用于对所述特效对象进行管理和控制；

页面元素创建单元，用于利用所述页面对象创建页面元素；

绘制单元，用于绘制所述页面元素到图层，并记录所述页面元素的动画动作及相应参数；

显示单元，用于根据所述页面元素的动画动作及相应参数显示所述图层。

5.如权利要求4所述的装置，其特征在于，所述页面元素创建单元包括：

画布生成子单元，用于利用所述画布对象生成画布；

标签添加子单元，用于将所需的页面元素对象添加到画布中；

设置子单元，用于利用所述特效对象设置所述页面元素对象的特效类型及参数；

控制子单元，用于利用所述特效控制对象控制所述特效对象的开始、并行执行和结束。

Images