CN102902545B

CN102902545B - 为动画化分解标记语言元素

Info

Publication number: CN102902545B
Application number: CN201210377056.XA
Authority: CN
Inventors: A·曼达尔; A·吉特勒曼; L·鲁滨逊; J·塞思
Original assignee: Microsoft Technology Licensing LLC
Current assignee: Microsoft Technology Licensing LLC
Priority date: 2011-09-30
Filing date: 2012-09-28
Publication date: 2016-12-21
Anticipated expiration: 2032-09-28
Also published as: CN102902545A; US20130086463A1; US9171098B2

Abstract

本发明涉及为动画化分解标记语言元素。实施例准备标记语言（ML）元素以便进行动画化。截取或接收对至少一个ML元素执行至少一个动画化的请求。至少基于所请求的动画化以及ML元素的当前属性值，定义一个或多个动画准备属性值。更改ML元素以包括所定义的动画准备属性值，动画引擎执行更改后的ML元素的动画化。动画准备属性和值（例如，样式元素）在动画化之后可被复位、移除或以其它方式修改。在一些实施例中，应用编程接口（API）的库允许web浏览器请求传统超文本标记语言（HTML）元素的动画化，供动画引擎基于JAVASCRIPT或层叠样式表（CSS）消费。

Description

为动画化分解标记语言元素

技术领域

本发明涉及标记语言元素的动画化。

背景技术

文档中的动画增强了用户体验。例如，动画改进了网站的可用性和视觉外观。示例动画包括从网页删除表、将超文本标记语言（HTML）元素从一个位置移动到另一位置、或以其它方式在视觉上更改HTML元素。然而，与所建立的网站一起工作的开发者通常不得不动画化以传统代码编写的HTML元素，这些HTML元素不能使用现有的、基于JAVASCRIPT或层叠样式表（CSS）的动画逻辑来动画化。相反，使用某些现有系统，开发者为了在每一动画场景中的动画化必须手动重写每一HTML元素。这样的对要被动画化的每一传统HTML元素专用的自组织解决方案是耗时、昂贵且易于出错的。

发明内容

本发明的各实施例允许对传统标记语言（ML）元素的动画化。计算设备接收对至少一个ML元素执行至少一个动画化的请求。ML元素具有与之相关联的一个或多个当前属性值。计算设备至少基于所请求的动画化和当前属性值来定义一个或多个动画准备属性值。计算设备更改ML元素以包括所定义的动画准备属性值。动画引擎至少使用所定义的动画准备属性值来对更改后的ML元素动画化。

提供本发明内容以便以简化形式介绍将在以下具体实施方式中进一步描述的一些概念。本发明内容并非旨在标识所要求保护的主题的关键特征或必要特征，也不旨在用于帮助确定所要求保护的主题的范围。

附图简述

图1是示出调用代码（例如，应用程序）经由应用编程接口（API）与动画引擎通信的示例性框图。

图2是示出使用分解引擎、动画引擎和重新合成（re-composition）引擎的对动画化请求的处理的示例性框图。

图3是示出存储用于分解和重新合成标记语言（ML）元素以便由动画引擎动画化的计算机可执行组件的计算设备的示例性框图。

图4是示出对ML元素的准备以便由动画引擎动画化的示例性流程图。

图5是示出在ML元素中包括和移除动画准备属性的示例性流程图。

在全部附图中，相应的附图标记指示相应的部分。

详细描述

参考附图，本发明的各实施例允许对标记语言（ML）元素动画化。在一些实施例中，传统超文本标记语言（HTML）元素被分解供支持JAVASCRIPT脚本和/或层叠样式表（诸如CSS3）的动画引擎108消费。诸如浏览器的应用程序204调用一个或多个应用编程接口（API）104，这些API改变ML元素的属性和属性值（例如，添加、更改或移除元数据），使得内容看上去一样但是被准备好供动画引擎108动画化。本发明的一些方面还在动画化之后对ML元素复位（例如，回到原始或传统布局）。

本发明的各方面执行的示例性操作包括重新安置ML元素、创建ML元素的副本以便进行替换内容的动画化、对增长以完全包含ML元素（例如用于显示附加文本）的边界框动画化以及在表内操纵单元格（例如，移动、删除、插入等）。

尽管是参考ML元素是超文本标记语言（HTML）元素来描述本发明的各方面，本发明的实施例可用于要动画化的任何对象。此外，本发明的各方面不限于网页上的动画，而是构想了能够显示来自动画引擎108的输出的任何文档中的动画。

接下来参考图1，示例性框图示出了调用代码102经由API 104与动画引擎108通信。调用代码102可以是当被计算设备101执行时请求动画化的应用程序204或其部分。动画化可使用诸如API 104所提供的函数调用来请求。在一些实施例中，多个API 104可供用作库。API 104的库可由计算设备101在调用代码102的编译时或运行时期间加载。在其它实施例（未示出）中，API 104驻留在与计算设备101分开的设备上。

API 104包括分解传统HTML元素、对象或代码的函数。在其它实施例中，API 104分解用其它标记语言编写的元素、对象或代码。分解HTML元素包括准备HTML元素以便进行动画化。此处诸如参考图4和图5描述并说明分解的示例，且大体包括添加或更改HTML元素上的属性以使得HTML元素适于动画化。

在HTML元素被准备好进行动画化后，动画引擎108处理HTML元素（例如，消费分解后的HTML）。例如，动画引擎108由计算设备101执行以对HTML元素动画化并在与计算设备101相关联的显示器306上显示动画。在其中动画引擎108被除执行调用代码102或提供API 104的计算设备101以外的设备执行的实施例中，动画引擎108向计算设备101提供动画以便显示。例如，动画引擎108可由服务器或云服务112执行。

在动画化期间和/或之后，动画引擎108通过修改HTML元素的属性来更新HTML元素的状态。当动画化完成时，在对动画化的准备时作出的、对属性的添加或更改被复位，使得HTML元素反映传统布局。例如，API 104中的另一函数在动画化之后接收或截取HTML元素，并使具有修改后的属性的HTML元素遵守适于供调用代码102消费的格式。例如，使动画化之后的HTML元素内的样式遵守传统HTML。然后将遵守格式的HTML元素提供给调用代码102，或使其可供调用代码102访问。

本发明的各方面可用于按任何方式操作以对任何ML元素动画化的任何动画引擎108。尽管参考与以下参考图2所述的动画定义310去耦（decouple）的动画引擎108来描述，本发明的各方面不限于这样的实施例。

接下来参考图2，示例性框图示出使用分解引擎212、动画引擎108、重新合成引擎214的对动画化请求的处理的示例性框图。应用程序204由计算设备101执行或以其它方式与计算设备104关联。计算设备101可以是被编程来执行此处所述和说明的操作的任何设备（例如，见图3）。在一些实施例中，应用程序204是在计算设备101上执行的浏览器。本发明的各方面支持不同的浏览器能力。例如，基于浏览器类型，要被动画化的ML元素可用JAVASCRIPT脚本语言或层叠样式表（例如，CSS3）来编码。在这些示例的任一个中，本发明的各方面能够准备ML元素以便进行动画化。

在图2的示例中，应用程序204使用API 104中的至少一个将动画化请求发送给动画引擎108。例如，应用程序204可请求特定的ML元素向其当前位置的右侧移动50像素。尽管在图2中被示为在计算设备101外，API 104或其部分可被本地存储在计算设备101上并由计算设备101本地调用。分解引擎212或应用程序204与动画引擎108之间的其它层接收或截取来自应用程序204的动画化请求。例如，分解引擎212准备ML元素以便进行动画化，并将动画化请求以及准备好的ML元素发送给动画引擎108以便进行动画化。在一些实施例中，准备ML元素以便进行动画化包括添加、移除和/或以其它方式改变与ML元素相关联的元数据。

在按请求对ML元素动画化期间和/或之后（例如，动画正被计算设备101显示），动画引擎108修改ML元素的属性以反映动画化。使具有修改后的属性的ML元素可供重新合成引擎214使用。例如，提供具有修改后的属性的ML元素作为复位或清除动画的函数调用的一部分（例如，结束或完成函数）。重新合成引擎214、或动画引擎108和应用程序204之间的其它层例如通过将ML元素复位成其原始、传统布局来准备动画化之后的ML元素以便由应用程序204处理。在一些实施例中，重新合成引擎214通过添加、移除和/或以其它方式改变与ML元素相关联的元数据来准备ML元素。重新合成引擎214将准备好的ML元素提供给应用程序204。

在一些实施例中，动画引擎108与描述所请求的动画化的动画定义310去耦。尽管本发明的各方面不限于这样的配置，但这些实施例构想了包括动画定义310的目录206，动画定义310可由动画引擎108例如经由API 104来访问。例如，动画化请求和对应于所请求的动画化的动画定义310被标识，并作为输入被提供给动画引擎108。例如，API 104可标识对应的动画定义310，或者动画引擎108本身可获取对应的动画定义310。动画引擎108基于动画化请求和动画定义310执行动画化，以便（例如，由应用程序204）显示在计算设备101上。

继续其中动画引擎108与动画定义310去耦的示例，一个或多个动画提供者210提供描述一个或多个动画化的动画代码（例如，动画可扩展标记语言代码）以便存储在目录206中。动画代码一般可被称为动画定义310，但在一些实施例中，来自动画提供者210的动画代码可被调整或更改以创建适于存储在目录206中的动画定义310。如图2中所示，目录206可以在计算设备101外部，或可与动画引擎108（未示出）一起存储在计算设备101上（例如，作为库）。动画引擎108可访问目录206来获取动画定义310（例如，使用动画化请求中所包括的动画标识符或其它指针或引用），或可经由另一组件或设备（例如，API 104）来从目录206接收动画定义310。

接下来参考图3，示例性框图示出存储用于分解和重新合成ML元素供动画引擎108动画化的计算机可执行组件的计算设备101。在此示例中，计算设备101与用户302相关联，并表示用于准备传统ML元素以便进行动画化的系统。计算设备101可以是执行实现与计算设备101相关联的操作和功能的指令（例如，作为应用程序、操作系统功能、或两者）的任何设备。计算设备101可包括移动计算设备或任何其它的便携式设备。在一些实施例中，移动计算设备包括移动电话、膝上型计算机、图形输入板、计算板、上网本、游戏设备和/或便携式媒体播放器。计算设备101还可包括较不便携的设备，诸如台式个人计算机、自助服务终端和桌面设备。另外，计算设备101可以表示一组处理单元或其他计算设备。

计算设备101具有至少一个处理器304、存储器区域308和至少一个显示器306。处理器304包括任意数量的处理单元，并被编程为执行用于实现本公开的各方面的计算机可执行指令。指令可由处理器304或由在计算设备101内执行的多个处理器执行，或者由计算设备101外部的处理器来执行。在一些实施例中，处理器304被编程为执行附图中（诸如图4和图5中）示出的指令中的一个或多个。

计算设备101还具有一个或多个计算机可读介质，诸如存储器区域308。存储器区域308包括与计算设备101相关联或可以由计算设备101访问的任意数量的介质。存储器区域308可以在计算设备101的内部（如图3所示）、在计算设备101的外部（未示出）、或两者（未示出）。

存储器区域308存储一个或多个应用等其它数据。应用在被处理器304执行时操作以执行计算设备101上的功能。示例性应用包括邮件应用程序、web浏览器、日历应用程序、地址簿应用程序、消息收发程序、媒体应用、基于位置的服务、搜索程序等。应用可与对应的应用或服务通信，诸如可经由网络访问的web服务。例如，应用可表示与在云中执行的服务器侧服务相对应的所下载的客户机侧应用。

存储器区域308还存储用于准备ML元素以便进行动画化的API 104中的一个或多个。例如，API 104可被存储为在运行时由浏览器加载的库。在其中计算设备101执行动画引擎108来对ML元素动画化的实施例中，存储器区域308可存储动画定义310。

存储器区域308还存储一个或多个计算机可执行组件。示例性组件包括接口组件312、分解组件314和重新合成组件316。这些组件的操作以下参考图4来描述。

计算设备101包括至少一个显示器306或用于向用户302显示动画的其它装置，以及用于操作显卡以启用显示器306的计算机可执行指令（例如驱动器）。

在一些实施例中，计算设备101还包括诸如网络接口卡和/或用于操作网络接口卡的计算机可执行指令（例如驱动器）的通信接口。

接下来参考图4，示例性流程图示出准备ML元素中的至少一个供动画引擎108动画化。如果在402处计算设备101接收动画化至少一个ML元素的请求，则在404处计算设备101定义一个或多个动画准备属性值。请求可从应用程序204或其它调用代码102接收。ML元素（或动画化前的ML元素）具有与之相关联的一个或多个当前属性值。定义动画准备属性值包括从或者已经在动画化前的ML元素内或要被添加到动画化前的ML元素中选择至少一个属性。基于至少一个所请求的动画（例如，移动、淡入淡出等）来选择属性。示例性属性（例如，样式属性）包括位置、高度、宽度和不透明度，但也构想了其它属性。位置属性可以是诸如(x,y)的二维值以及诸如(x,y,z)的三维值或其它。在一些实施例中，位置、高度和宽度属性的测量单位被表示为像素。不透明度可被表示为百分比或用另一度量来表示。在本发明的范围内构想了其它属性。

动画定义310和/或动画准备属性值可至少基于动画化请求中包括的信息（例如，所请求的动画化和当前属性值）来为所选属性定义。例如，动画化请求可指示特定的ML元素应移动50像素。在此示例中，“移动”请求标识了要选择动画定义310中的哪个。

在406，更改ML元素以包括所定义的动画准备属性值。在一些实施例中，与ML元素相关联的元数据可被更改。例如，ML元素可被修改以包括所选属性和所定义的动画准备属性值。在408，将更改后的ML元素提供给动画引擎108或使其可供动画引擎108使用。在其中计算设备101执行动画引擎108的示例中，更改后的ML元素可经由指针或对存储器的其它引用来向动画引擎108标识。在其中动画引擎108被另一设备执行的示例中，计算设备101可在消息或其它通信中将更改后的ML元素发送给该设备。

动画引擎108使用至少所定义的动画准备属性值来对更改后的ML元素动画化。本发明的各方面可用于使ML元素动画化的任何动画引擎108。此外，在一些实施例中，计算设备101基于接收到的动画化请求更改多个ML元素并执行多个动画化。

接下来描述涉及定义动画准备属性值、更改ML元素和对更改后的ML元素动画化的示例场景。本领域的技术人员将理解，本发明不限于此处所述的示例，其它动画准备属性值和对ML元素作出的改变在本发明的范围内。此外，本发明各方面提供的API 104的示例在附录A中描述。

如果动画化请求针对在浏览器内重新安置ML元素，则从浏览器接收偏移量坐标。绝对坐标是基于偏移量坐标来定义的，且ML元素的属性中的一个或多个被改变以包括所定义的绝对坐标。在其中ML元素是HTML元素的示例中，本发明的各方面通过改变HTML元素的“上”和“左”属性的值来执行“移动”动画。计算设备101可通过从表示HTML元素的文档对象模型（DOM）的布局中提起（lift）字段、部分、属性、值或其它元素并将它们设为“相对”或“绝对”使得“上”和“左”属性值变为有效来操纵DOM。以此方式，HTML元素从其精确的初始位置开始移动而非在移动开始之前急动。

如果应用程序204请求用新内容替换显示器306的一个区域中的现有内容，则本发明的各方面在新内容被动画化进入显示器306的同时对现有内容淡出或移出进行动画化。在这样的示例中，计算设备101创建动画区域的副本，并同时执行两个动画化。

如果应用程序204请求内容被示出为与ML元素内联，则本发明的各方面在ML元素内动画化内联边界框以显示关于博客、讨论、订阅源等的内联评论或按需信息。例如，计算设备101可对内容布局以确定边界框的目标大小，然后将空白空间扩展为目标大小。

如果应用程序204请求动画在表上执行，则本发明的各方面插入、删除和/或移动数据的行和/或列。单元格、行和/或列被操纵为单独的ML元素。

在动画化完成时，ML元素的属性被更新以反映动画化的完成。在一些实施例中，动画化后的ML元素与动画化前的ML元素相同，但具有反映动画化后的属性和值的更新后状态。动画引擎108还可向计算设备101、应用程序204或其它调用代码102提供更改后的ML元素的动画化已经完成的指示。在诸如以下参考图5描述的实施例中，ML元素在动画化后被修改，以准备供进行请求的应用程序204消费。例如，所定义的动画准备属性值可在动画化期间和/或之后从ML元素中移除。

在一些实施例中，图3中所示的计算机可执行组件执行来实现图4中所示的操作中的一个或多个。例如，接口组件312当被处理器304执行时，使处理器304从应用程序204接收对至少一个ML元素执行多个动画化的一个或多个请求。在一些实施例中，接口组件312对于对相同ML元素操作的所接收到的请求中的每一个递增参考计数。示例性请求包括以下的一个或多个：移动表中的至少一个单元格、将至少一行插入表中、从表中移除至少一行、在表中对单元格重新排序、使表中的至少一个单元格淡入以及使表中的至少一个单元格淡出。

分解组件314当被处理器304执行时，使得处理器304更改ML元素以包括至少基于接口组件312所接收的请求中的动画化和当前属性值的一个或多个动画准备属性值。动画引擎108至少使用所定义的动画准备属性值来对更改后的ML元素执行多个动画化以更新ML元素的属性。在此示例中，动画化中的至少两个在不同的时间完成。

重新合成组件316在被处理器304执行时，使处理器304在最后一个动画化完成时从ML元素移除动画准备属性值。例如，重新合成组件316在每一所请求的动画化完成时递减参考计数。在此示例中，重新合成组件316仅在最后结束的动画化的完成时（例如，当参考计数具有零值）才移除动画准备属性值。

接口组件312还向应用程序204提供动画准备属性被重新合成组件316移除的ML元素。

接下来参考图5，示例性流程图示出在ML元素中包括和移除动画准备属性。如果在502从应用程序204或其它调用代码102接收动画请求，则在504，ML元素被更改以包括一个或多个动画准备属性。至少基于所请求的动画化，动画准备属性和相应的动画准备属性值被选中和/或定义。在506，计算设备101或执行动画引擎108的其它设备使用更改后的ML元素中包括的至少动画准备属性来对ML元素动画化。

如果在508，ML元素的动画化完成，则ML元素的属性被更新以反映动画化的完成。ML元素然后被更改以便可由进行请求的应用程序204识别。例如，在504添加的动画准备属性和相应的值在510从ML元素中移除。例如，可由进行请求的应用程序204识别的不同标签可被定义成表示ML元素动画化后的状态。在512，将更改后的ML元素提供给进行请求的应用程序204。

附加场景示例

本发明支持准备ML元素以便进行动画化的大量场景。以下支持各场景的实现和/或结构仅是示例性的，而绝非限制性的。

用于重新安置ML元素的示例性实现包括向ML元素添加动画准备属性“位置”和值“绝对”。在此示例中，绝对位置不依赖于父元素，且被多个浏览器支持。“上”属性值被计算为ML元素所有offsetParents的offsetTop属性值的和。“左”属性值被计算为ML元素所有offsetParents的offsetLeft属性值的和。对RightToLeft（从右向左）呈现，代替左偏移量而使用右偏移量。右偏移量可被计算为(document.body.offsetWidth-element.offsetWidth-SPAnimationUtility.BasicAnimator.GetLeftOffset(element))。高度和宽度属性值可分别设为offsetHeight和offsetWidth，至少因为高度和宽度在绝对安置从DOM布局移除元素时被复位。上和左属性值用水平和垂直滚动偏移来调整，以考虑当浏览器窗口被滚动时屏幕上的元素的滚动位置。

用于克隆ML元素的示例性实现包括将原始内容克隆到正好置于原始内容上的副本中。克隆可通过创建具有与原始元素相同的innerHTML标签的新元素来完成。新元素被追加成原始元素的兄弟。然后使原始元素不可见（例如，调整可见度或不透明度）。通过例如使用此处所述的安置API来将原始元素的内容替换为相同位置处的新内容。动画引擎108运行两个同时的动画化以对原始内容出去和新内容进来进行动画化。在动画化完成时，被克隆的元素从DOM中移除。

用于对边界框动画化的示例性实现包括在视口外布置内容元素以确定内容元素的高度和宽度。动画引擎108运行动画化以使边界框增长为所确定的高度和宽度。内容元素被重新安置并淡入。

用于对表动画化的示例性实现包括，通过将每一表单元格设为绝对（例如，每个单元格被对待为单独的ML元素，使得每一单元格可被自由移动）来准备表以便进行动画化。在一些实施例中，在安置期间，考虑单元格周围的页边距、填充和边框。此外，本发明的各方面支持每行不同数量的单元格。表元素上的总高度和宽度被设为使表周围的页面布局保持不被单元格的绝对安置干扰。

使用包装API来管理行插入、删除和移动。例如，包装API的输入自变量标识要在表中插入、删除和/或移动的行或列。包装API同时运行这些操作以管理动画化。包装API还可在动画化完成时复位动画准备样式。为了在表中插入行，行中的表单元格用不透明度值零来标记，被置于表内，并淡入。为了从表中删除行，行中的单元格对于行中的ML元素中的每一个淡出。为了在表中移动行，行进的距离例如被计算为要移动的行的数量与行的高度的乘积。表示行中的单元格的ML元素按此距离移动。

当表的总高度在表动画化操作之后改变时，表的页脚相应调整。例如，表元素上高度的改变被动画化以得到平滑效果。

图1、图2、图3中的各元件的功能中的至少一部分可以由图1、图2或图3中的其它元件或图1、图2或图3中未示出的实体（例如，处理器、web服务、服务器、应用程序、计算设备等）执行。

在一些实施例中，图4和图5所示的操作可以以在计算机可读介质上编码的软件指令、以被编程或设计为执行这些操作的硬件或这两者来实现。例如，本发明的各方面可被实现为片上系统。

虽然本公开的各方面没有跟踪个人可标识的信息，但参考了从用户302监视和/或收集的数据来描述各实施例。在这样的实施例中，向用户302提供收集数据的通知（例如，经由对话框或偏好设置）并且给予用户302对监视和/或收集给出同意或拒绝的机会。该同意可以采用选择加入同意或选择退出同意的形式。

示例性操作环境

示例性计算机可读介质包括闪存驱动器、数字多功能盘（DVD）、紧致盘（CD）、软盘以及磁带盒。作为示例而非限制，计算机可读介质可包括计算机存储介质和通信介质。计算机存储介质包括以用于存储诸如计算机可读指令、数据结构、程序模块或其它数据的信息的任何方法或技术实现的易失性与非易失性、可移动与不可移动介质。计算机存储介质将传播的数据信号排除在外。在一些实施例中，计算机存储介质用硬件实现。通信介质通常体现诸如载波或其他传输机制等已调制数据信号中的计算机可读指令、数据结构、程序模块或其他数据，并包括任何信息传递介质。

虽然是结合示例性计算系统环境来描述的，但是，本发明的各实施例对于很多其他通用或专用计算机系统环境或配置也很适用。适用于本发明的各方面的公知的计算系统、环境和/或配置的示例包括，但不仅限于：移动计算设备、个人计算机、服务器计算机、手持式或膝上型设备、多处理器系统、游戏控制台、基于微处理器的系统、机顶盒、可编程消费电子产品、移动电话、网络PC、小型计算机、大型计算机、包括上面的系统或设备中的任何一种的分布式计算环境等等。

可以在由一台或多台计算机或其他设备执行的诸如程序模块之类的计算机可执行的指令的一般上下文中来描述本发明的各实施例。计算机可执行指令可以被组织成一个或多个计算机可执行的组件或模块。一般而言，程序模块包括但不限于，执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件，以及数据结构。可以利用任何数量的这样的组件或模块和组织，来实现本发明的各方面。例如，本发明的各方面不仅限于附图中所示出并且在此处所描述的特定计算机可执行的指令或特定组件或模块。本发明的其他实施例可以包括具有比此处所示出和描述的功能多一些或少一些功能的不同的计算机可执行指令或组件。

本发明的各方面在通用计算机被配置成执行此处所描述的指令时将通用计算机变换为专用计算设备。

此处所示和描述的各实施例以及此处未特别描述但在本发明的各方面的范围内的实施例构成了用于准备ML元素以便进行动画化的示例性手段以及传统HTML元素的跨浏览器动画化的示例性手段。

此处所示出和描述的本发明的各实施例中的操作的执行的顺序不是必需的，除非另作说明。即，除非另作说明，操作可以以任何顺序执行，本发明的各实施例可以包括比此处所公开的操作多一些或少一些操作。例如，在一个操作之前，同时，或之后执行另一个操作也在本发明的各方面范围之内。

当介绍本发明的各方面的元件或其实施例时，“一”、“一个”、“所述”旨在表示有元件中的一个或多个。术语“包括”、“包含”、以及“具有”是包含性的，并表示除所列出的元件以外，还可以有额外的元件。

已经详细地描述了本发明的各方面，显然，在不偏离所附权利要求书所定义的本发明的各方面的范围的情况下，可以进行各种修改。在不偏离本发明的各方面的范围的情况下，可以对上面的结构、产品，以及方法作出各种更改，上面的描述中所包含的和各个附图中所示出的所有主题应该解释为说明性的，而不是限制性的。

附录A

接下来描述诸如用于实现本发明的各方面的API 104的示例性API。在一些实施例中，用于重新安置ML元素的API包括以下：

public static void PositionAbsolute(DOMElement element)

以上示例性API从DOM布局中提起ML元素以准备“移动”动画化，将位置属性设为“绝对”，并调整左和上属性值以匹配精确的初始位置。

public static void PositionRelative(DOMElement element)

以上示例性API从DOM布局中提起ML元素以准备“移动”动画化，将位置属性设为“相对”，并调整左和上属性以匹配精确的初始位置。

public static void PositionAbsoluteExact(DOMElement element,int topValue,int leftValue,int heightValue,int widthValue)

以上示例性API从DOM布局中提起ML元素以准备“移动”动画化，将位置属性设为“绝对”，并启用对ML元素的预期位置的粒度控制。

public static void PositionRelativeExact(DOMElement element,int topValue,int leftValue,int heightValue,int widthValue)

以上示例性API从DOM布局中提起ML元素以准备“移动”动画化，将位置属性设为“相对”，并启用对ML元素的预期位置的粒度控制。

public static void ResetPosition(DOMElement element)

以上示例性API诸如在动画化的完成时复位位置样式。

以下示出用于创建ML元素的克隆以便对ML元素进行同时动画化的API。

public static DOMElement CloneElement(DOMElement element,boolfMakeTransparent,bool fInsertBefore)

以上示例性API对原始元素制造副本并将其刚好放在原始元素之上。如果为真，则fMakeTransparent自变量将原始元素的不透明度设为零。如果为真，则fInsertBefore自变量插入克隆元素作为DOM中原始元素的前一个兄弟。如果为假，则克隆元素被插入作为下一个兄弟。

以下示出用于对边界框动画化的API。

public static void ResizeContainerAndFillContent(DOMElement newElement,DOMElement parentNode,Callback finishFunc,bool fAddToEnd)

以上示例性API添加内容元素（例如newElement）作为parentNode自变量的孩子，动画首先生长出newElement内容元素将前往的某些空白空间，然后使newElement内容元素淡入到空白空间中。newElement自变量标识要淡入的元素，parentNode自变量标识将成为newElement内容元素的父亲的元素，而finishFunc自变量标识在动画化完成时要运行的回调函数。如果addToEnd自变量被设为真，则newElement内容元素是父元素的最后一个孩子。如果addToEnd自变量被设为假，则newElement内容元素是第一个孩子。

以下示出的用于操纵表的示例性API可被归组到诸如公共类TableAnimator的类中。

public TableAnimator(DOMElement table)

以上示例性API创建并初始化TableAnimator对象。

public void AnimateRows(RowMoveInfo[]toMove,int[]toDelete,RowAddInfo[]toAdd,DOMElement footer,Callback finishFunc)

以上示例性API通过插入、删除或移动在表中重新安排行。toMove自变量标识要移动的行的阵列（例如[currentRowIndex,newRowIndex]）。toDelete自变量标识要删除的行索引的阵列（例如[deleteRowIndex]）。行在指定索引中淡出，但是行不从表中移除。toAdd自变量标识要淡入的行索引的阵列（例如[row,newRowIndex]）。页脚自变量标识在表中行的数量改变的情况下需要动画化的表下方的页脚元素。finishFunc自变量标识当动画完成时要运行的回调函数。

public void DeleteRows(int[]to Delete,Callback finishFunc)

以上示例性API在表中执行行删除动画化。toDelete自变量标识要删除的行索引的阵列（例如[deleteRowIndex]）。行淡出。finishFunc自变量标识当动画完成时要运行的回调函数。

public void InsertRows(RowAddInfo[]toAdd,Callback finishFunc)

以上示例性API在表中执行行插入动画化。toAdd自变量标识要淡入的行索引的阵列（例如[row,newRowIndex]）。finishFunc自变量标识当动画完成时要运行的回调函数。

public void MoveRows(RowMoveInfo[]to Move,Callback finishFunc)

以上示例性API在表中执行行移动动画化。toMove自变量标识要移动的行的阵列（例如[currentRowIndex,newRowIndex]）。finishFunc自变量标识当动画完成时要运行的回调函数。

Claims

1.一种用于对传统标记语言元素动画化的系统，所述系统包括：

与计算设备相关联的存储器区域，所述存储器区域存储用于对标记语言元素动画化的多个应用编程接口(API)；以及

处理器，被配置为：

经由所述存储器区域中存储的多个应用编程接口中的至少一个，从应用程序接收对至少一个标记语言元素执行至少一个动画化的请求，所述标记语言元素具有与之相关联的一个或多个样式属性；

更改所述标记语言元素以包括至少基于所请求的动画化定义的一个或多个动画准备属性；

至少使用更改后的标记语言元素中所包括的所定义的动画准备属性来对所述更改后的标记语言元素执行所请求的动画化；

在动画化之后从所述标记语言元素移除所述动画准备属性；以及

向所述应用程序提供移除了所述动画准备属性的标记语言元素。

2.如权利要求1所述的系统，其特征在于，所述请求是对于表移动单元格，其中所述处理器还被配置来将所述单元格中的每一个表示为单独的标记语言元素并基于从所述应用程序接收到的偏移量坐标来定义绝对坐标，且其中所述处理器通过改变样式属性中的至少一个以包括所定义的绝对坐标来更改所述标记语言元素。

3.如权利要求1所述的系统，其特征在于，所述请求是替换所述标记语言元素，其中所述处理器还被配置来创建所述标记语言元素的副本以便对所述标记语言元素进行同时动画化。

4.如权利要求1所述的系统，其特征在于所述请求是显示内联内容，且其中所述处理器还被配置来在所述标记语言元素内对内联边界框动画化。

5.如权利要求1所述的系统，其特征在于，所述应用程序是浏览器而所述标记语言元素是超文本标记语言(HTML)元素，且其中所述存储器区域还存储动画准备属性的库。

6.如权利要求1所述的系统，其特征在于，还包括：

用于准备所述标记语言元素以便进行动画化的装置；以及

用于对传统超文本标记语言(HTML)元素进行跨浏览器动画化的装置。

7.一种对标记语言元素动画化的方法，包括：

由计算设备接收对至少一个标记语言元素执行至少一个动画化的请求，所述标记语言元素具有与之相关联的一个或多个当前属性值；

由所述计算设备至少基于所请求的动画化和所述当前属性值来定义一个或多个动画准备属性值；以及

由所述计算设备更改所述标记语言元素以包括所定义的动画准备属性值，其中动画引擎使用至少所定义的动画准备属性值来对更改后的标记语言元素动画化。

8.如权利要求7所述的方法，还包括将更改后的标记语言元素提供给所述动画引擎以便进行动画化，并随后从所述动画引擎接收对所述更改后的标记语言元素的动画化已经完成的指示，其中对所述更改后的标记语言元素的动画化产生修改后的标记语言元素，所述方法还包括：

从所述修改后的标记语言元素移除所述动画准备属性值；以及

向提供所述请求的应用程序提供移除了所述动画准备属性值的修改后的标记语言元素。

9.如权利要求7所述的方法，其特征在于，接收执行至少一个动画化的请求包括经由应用编程接口从应用程序接收函数调用，其中更改所述标记语言元素包括以下中的一个或多个：改变所述当前属性值中的至少一个，和基于所定义的动画准备属性值添加至少一个动画准备属性。

10.如权利要求7所述的方法，其特征在于，一种或多种计算机存储介质体现计算机可执行组件，所述组件包括：

接口组件，当被执行时使至少一个处理器从应用程序接收对标记语言元素执行多个动画化的一个或多个请求，所述标记语言元素具有与之相关联的一个或多个当前属性值；

分解组件，当被执行时，使至少一个处理器更改所述标记语言元素以包括基于所述动画化和在所述接口组件接收的请求中的当前属性值的一个或多个动画准备属性值，其中所述动画引擎至少使用所定义的动画准备属性值来对更改后的标记语言元素执行多个动画化，其中所述动画化中的至少两个在不同时间完成；以及

重新合成组件，当被执行时使至少一个处理器在最后一个动画化完成时从所述标记语言元素移除所述动画准备属性值，

其中所述接口组件还向所述应用程序提供动画准备属性被重新合成组件移除的标记语言元素。