CN105556569A

CN105556569A - 动画编辑

Info

Publication number: CN105556569A
Application number: CN201480044061.6A
Authority: CN
Inventors: K·B·雅各布; T·A·巴罕姆; A·谢尔; R·J·萨尔瓦; M·I·罗森沙尔
Original assignee: Microsoft Technology Licensing LLC
Current assignee: Microsoft Technology Licensing LLC
Priority date: 2013-06-03
Filing date: 2014-05-30
Publication date: 2016-05-04
Anticipated expiration: 2034-05-30
Also published as: US9619913B2; WO2014197280A1; EP3005301B1; US20140359430A1; EP3005301A1; CN105556569B

Abstract

可选择动画。与所选择的动画有关的文档部分可从该动画在其中出现的网页的文档闭包中提取。根据该文档部分可创建合成数据结构。被样式规则(虚拟胜出的规则)的这组animation-name(动画名称)属性所参考的这组胜出的keyframes规则可被计算并表示在该数据结构中。胜出的动画属性可建立定时属性以在用户界面中预览和编辑动画而无需运行整个应用。在可视预览中渲染的数据结构可通过将用户手势应用于在预览用户界面(UI)中显示的动画来编辑。用户改变可被映射成对于数据结构中的属性值以及底层文档的改变。

Description

动画编辑

背景

层叠样式表(CSS)指的是由W3C(万维网联盟)所开发的用于网页内容的格式化规则。CSS还指的是能够被用来定义以结构化文档(标记)语音编写的文档的外观和格式化的样式表语言。CSS的最常见应用是以HTML(超文本标记语言)和XHTML(扩展超文本标记语言)来编写的样式网页。CSS可运行在任何XML型文档上，XML型文档包括但不限于HTML、XHTML、SVG(可伸缩矢量图形)以及XUL(XML用户界面语言)文档。使用结构化文档的一项方便的特征是内容可在各种上下文中重复使用并且可通过提供将不同的渲染规范与结构化文档一起提供给CSS语言逻辑来以各种方式渲染。渲染规范可由样式表提供，样式表是描述颜色、字体以及布局的样式规则的集合。

词“层叠”指的是CSS确定特定元素最终如何显示在网页中的方式。用以显示元素的样式受网页作者所创建的样式表的影响、受用户定制的样式选择(如果有的话)的影响、受显示该页面的浏览器的默认样式的影响、受CSS特异性(将不同权重赋予特定种类的CSS规则的方法)的影响、以及受CSS规则的顺序的影响，这产生了潜在冲突规则的复制的“层叠”，其中具有较高优先级的判断覆盖或“胜过”那些具有较低优先级的判断。

CSS将内容(例如，HTML代码)与定义该内容看上去是什么样(指的是内容的“渲染”)的CSS规则分开。HTML代码驻于HTML文件中，而定义内容看上去是什么样的CSS规则驻于具有.css后缀的外部样式表文件中。有时，定义内容看上去是什么样的CSS规则驻于HTML文档的特定部分内。除了控制网站上的文本的外观，CSS还可被用于控制块级元素的格式和定位。块级元素通过使用诸如h1、p和div标签之类的标签来产生，以划定被视作单个元素的内容块。

CSS格式化规则由选择符和声明或者声明框组成。选择符可以是诸如h1、p之类的标签、类名称或标识被格式化的元素的标识符。声明框定义要被应用于所指示的内容的样式属性。例如，在以下规则中：

p{

font-size:12pt；

font-family:Arial；

font-weight:bold；

}

选择符p指示段落的内容将以12号加粗的Arial字体显示。font-size(字体大小)、font-family(字体族)以及font-weight(字体粗细)标签标记段落内容的属性，而12号、Arial以及bold(加粗)是相应属性的值。由于一个规则可应用于许多标签(例如，在以上的示例规则中，该规则可应用于许多不同段落的内容)，因此使用同一规则来改变所有块元素的外观可通过改变单个规则来实现。

概述

在定义动画元素或一组动画元素的一个或多个文档中的一组属性和关键帧可被收集并组合成表示完整的运行时CSS动画的单个内部数据结构。可为该数据结构计算一组胜出的动画属性。被样式规则(虚拟胜出的规则)的这组animation-name(动画名称)属性所参考的这组胜出的keyframes规则可被计算并表示在该数据结构中。该数据结构可被更新以包括对胜出的属性的指示。动画元素或一组动画元素的这组胜出的动画属性可被用于根据该数据结构构建该动画元素或一组动画元素的用户界面(UI)表示。该表示可被用于在设计期间预览该动画元素或该组动画元素而无需运行其中嵌入了该动画元素或该组动画元素的应用。动画元素或一组动画元素可被选择以供预览和/或修改。可通过经由用户界面(UI)接收能够改变影响该动画元素或该组动画元素的属性的指令来更新表示该动画的数据结构。指令可以是用户手势的形式。操纵该动画元素或该组动画元素的用户手势可被转换或映射成对于内部数据结构以及对于该动画元素或该组动画元素被发现位于的网页的文档闭包中的底层文档的改变。

对影响该动画的文档所作出的改变可被检测并应用于该数据结构。对与该动画相关联的文档所作出的改变的效果可通过针对优先序应用标准CSS逻辑来计算。

提供本概述以便以简化形式介绍将在以下详细描述中进一步描述的一些概念。本概述并不旨在标识所要求保护主题的关键特征或必要特征，也不旨在用于限制所要求保护主题的范围。

附图简述

在附图中：

图1a解说了web应用的示例；

图1b是图1a的一部分的更详细的视图；

图1c解说了根据此处公开的主题的各方面的用于编辑动画的系统100的示例；

图2解说了根据此处公开的主题的各方面的用于编辑动画的方法200的示例；

图3是根据此处所公开主题的各方面的计算环境的示例的框图；以及

图4是根据此处所公开主题的各方面的集成开发环境的示例的框图。

详细描述

概览

总得来说，词语“动画”指的是快速地显示眼睛解读为移动的一系列图像。一个常见的动画类型是运动图片。传统电影用相机和投影仪来创建动画。另一个常见的动画类型是视频。视频使用在显示设备上快速显示一系列图像的软件。CSS动画是一种使用脚本来定义的动画。脚本使用用CSS来规定的规则和计算来定义动画元素。脚本描述动画属性如何随时间变化，而不是描述每一帧动画中的图像。动画通过随时间将一组CSS样式篡改为另一组CSS样式来创建。定义了持续时间，该持续时间允许系统将在关键帧子规则中规定的百分比映射到实际时间。

在CSS中，keyframes(关键帧)规则可被用于创建CSS动画。keyframes规则可包括多个被称为关键帧的子规则。发生在动画运行时的图像的位置和外观的改变通过在关键帧子规则中规定总动画运行时间的百分比来指定，在该百分比处应用特定CSS样式规则。0％指的是播放动画的开始，而100％是动画播放完成的时刻。关键字“from”和“to”也可被使用。“from”和0％一样，而“to”和100％一样。keyframes规则的语法是：

keyframesanimationname{keyframes-selector{css-styles；}}

其中“animationname”(动画名称)规定动画的标识符，而“keyframes-selector”(关键帧-选择符)的值规定受影响的动画持续时长的百分比。css-styles(CSS样式)规定一个或多个合法CSS属性/值声明。“keyframes-selector”的合法值是在0％和100％之间的任意值。可对动画规定任意数目个“keyframes-selector”。可对特定keyframes-selector规定任意数目个css-styles。动画或动画的一部分可由属性“animationname”来标识。被标识的动画或被标识的动画的一部分可包括一个动画元素或者可包括一组动画元素。

CSS动画通常由一组标准CSS属性来定义，这组标准CSS属性一起工作来确定动画将如何播放。定义动画的CSS属性受标准CSS规则的监管来确定属性优先序。根据经标准化的规则为动画计算每个单独的属性的最终值。占先的规则被称为“胜出”规则。

如此处所描述的动画开发工具选择要编辑的动画规则，从动画出现在其中的网页的文档闭包中提取与以该规则规定的动画有关的文档片段，并且根据该文档片段创建合成数据。数据结构包括构成该动画的一组keyframes规则的名称以及控制该动画的定时属性(例如，延迟、持续时长、重复、填充行为等)。动画的胜出keyframes规则以及该胜出在keyframes规则规则内的定义该keyframes规则内的每个动画属性在给定时间的值的胜出的关键帧子规则可被计算。数据结构可被修改以包括胜出的属性，并因此能够为动画渲染该胜出的值的完整渲染。

数据结构能够被用于在用户界面中预览动画而无需运行整个应用。在可视预览中渲染的数据结构可通过将用户手势应用于在预览用户界面(UI)中显示的动画来编辑。用户改变可被映射到对于数据结构中的属性值的改变，并且可从属性值的改变映射到文档闭包中的文档的改变。数据结构还可响应于在文档闭包中的文档中检测到的改变来修改。观测器可监视发生在文档闭包中的文档中的改变并且可相应地更新合成数据结构。

在文档闭包中的文档中作出的、应用于数据结构的改变可包括对于定义动画CSS属性的样式规则的改变和/或对定义动画的特定部分的关键帧值的CSSkeyframes规则的改变。应用于数据结构的改变可触发对胜出值的重新计算。也就是说，被包括在动画中的一个或多个keyframes规则、在动画的特定关键帧处的特定属性的关键帧值、以及影响这些关键帧的表现的动画属性可被重新计算。虽然动画样式规则或元素被激活以供编辑，但是数据结构包括表示动画效果的所有数据，就像其在运行时播放一样。

动画元素或一组动画元素可通过选择CSS样式规则、通过选择特定CSSkeyframes规则或者通过选择动画的胜出虚拟规则来选择。对于使用样式规则来选择的动画元素或一组动画元素，可从样式规则中读出动画属性值。对于“胜出”的虚拟规则，值可根据应用于特定动画元素或特定的一组动画元素的所有样式来计算。计算出的动画值可被用于确定每个关键帧子规则的实时值。

可生成一组CSS规则以使得动画能够在运行时中以其能够被播放、暂停以及“刮擦”的方式来出现。“刮擦”是起源自卷盘到卷盘播放器时期的术语，那时摇动一个卷盘将给人在磁头上刮擦带子的印象。在音频使用中，刮擦指的是将光标在波形上拖动以试听音频文件的不同部分，而延伸到动画邻域，刮擦指的是对动画内的不同部分进行采样。由于动画预览生成要应用于动画的一组内部的CSS规则，因此设计工具可显示由于CSS优先序规则而一般不会被播放的动画。

在预览UI中对动画作出的编辑可被映射到对数据结构的一个或多个改变。对数据结构作出的改变可导致对包括正被编辑的值的文档闭包中的各个文档作出相应改变。例如，如果影响当前所选择的动画的keyframes规则被从文档闭包中的CSS文件中的一个中删除，则该闭包中具有相同名称的另一keyframes规则可被搜索。如果找到一个，则被找到的keyframes规则可被用来表示那部分动画。预览用户界面中动画的预览可用新的关键帧值来更新。动画的UI表示可被更新使得在预览UI中作出的编辑可指向与该动画相关联的文档中的新的keyframes子规则。

动画编辑

图1a解说了web应用的示例149。Web应用可通过提供应用的内容的一个或多个内容文件(例如，HTML文件)以及定义该内容如何显示的一个或多个渲染文件(例如，CSS文件)来定义。例如，web应用(诸如web应用150)可通过一个或多个内容文件(例如，HTML文件)来定义，诸如内容文件1164、内容文件2165、内容文件3166、……、内容文件n168。Web应用150可通过一个或多个渲染文件(例如，CSS文件)来定义，诸如渲染文件1170、渲染文件2171、渲染文件3172、……、渲染文件n174。

web应用(诸如web应用150)可包括一个或多个网页，诸如网页1152(例如，网站主页)、网页2153(例如，网站联系方式页面)、网页3154(例如，订单页面)，一直到网页n156。网页中的一个或多个可包括一个或多个动画。由于动画可完全以CSS来定义，因此动画可由渲染文件中的一个或多个来定义。例如，在图1b中，网页1152包括动画1178、动画2180以及动画3182。

假设网页1152由内容文件1164、内容文件2165、内容文件3166以及渲染文件1170、渲染文件2171以及渲染文件3172定义。假设内容文件1164是网页1152的主HTML文件。内容文件2165和内容文件3166可因为依存性被包括在定义网页1152的文件中，该依存性由例如将内容文件2165和内容文件3166加载到网页1152中的JavaScript代码所引起。内容文件2165和内容文件3166中只有一部分可能与网页1152有关。渲染文件1170、渲染文件2171以及渲染文件3172中只有一部分可能与网页1152的渲染方面有关。渲染特定网页的HTML和CSS文件的集合包括文档闭包。因此，例如，网页1152的文档闭包包括内容文件1164、内容文件2165、内容文件3166、渲染文件1170、渲染文件2171以及渲染文件3172。相同的文档被包括在多个网页的文档避免中。例如，虽然内容文件2165被包括在网页1152的文档闭包中，但是内容文件2165也可被包括在网页2153的文档闭包中。类似地，虽然渲染文件1170被包括在网页1152的文档闭包中，但是渲染文件1170也可被包括在网页2153的文档闭包中。

CSS的规则确定特定元素最终如何显示在网页中。用以显示元素的样式受网页作者所创建的样式表的影响、受用户定制的样式选择(如果有的话)的影响、受显示该页面的浏览器的默认样式的影响、受CSS特异性(将不同权重赋予特定种类的CSS规则的方法)的影响、以及受CSS规则的顺序的影响，使得“胜出”的属性值从影响该元素的潜在地冲突规则中推导出。

类似地，CSS的属性优先序规则确定特定动画元素或特定的一组动画元素最终如何在网页中播放。CSS从影响该动画元素或该组动画元素的潜在地冲突规则中计算“胜出”的属性值。根据此处所描述的主题的各个方面，可为特定动画元素或特定的一组动画元素计算每个单独属性的覆盖值以确定元素或一组动画元素的整体动画。

图1c示出根据在此描述的主题的各方面的动画开发系统100示例。系统100的全部或部分可包括诸如以下参考图3所描述的计算机之类的一个或多个计算机。系统100可包括诸如参考图4所描述的软件开发计算机之类的软件开发计算机。系统100或其部分可在诸如IDE104之类的集成开发环境(IDE)内执行或者可在IDE之外执行。IDE可以是诸如参考图4所描述的IDE之类的IDE，或者可以是任何其它IDE。系统的一部分可以是诸如微软的用于Visual的AdobeEdgeTools和/或TumultHype之类的开发环境的一部分。系统100的全部或部分可被实现为插件或附件。系统100的全部或部分可在浏览器内执行或与浏览器相关联，浏览器诸如例如，MicrosoftInternetMozilla’sFirefox或任何现在已知或将来开发的浏览器。

系统100可包括诸如计算设备102之类的一个或多个计算机或计算设备。计算设备102可以是任何类型的固定或移动计算设备，包括桌面计算机(例如，个人计算机等)、移动计算机或计算设备(例如，设备、RIM设备、个人数字助理(PDA)、膝上型计算机、笔记本计算机、平板计算机(例如，Apple(苹果)iPad^TM)、上网本等等)、移动电话(例如，蜂窝电话、智能电话，诸如AppleiPhone、Google(谷歌)Android(安卓)^TM手机、Microsoft(微软)手机等)或其它类型的移动设备。系统100或其部分可包括从某一服务(如云中)获得的信息或可在云计算环境中操作。云计算环境可以是其中计算服务不被拥有但被按需提供的环境。例如，信息可驻留在联网云中的多个设备上，和/或数据可被存储在云内的多个设备上。

计算设备102可包括：诸如处理器142等之类的一个或多个处理器、诸如存储器144之类的存储器、诸如动画开发工具106之类的CSS动画开发工具的全部或部分。CSS动画开发工具106可以是诸如CSS开发环境105之类的CSS开发环境的一部分。CSS动画开发工具106可包括一个或多个模块，这些模块在被加载到存储器中时致使至少一个处理器执行归属于该一个或多个模块的任务。CSS动画开发工具106可包括以下中的一个或多个：诸如动画选择器114之类的动画选择器、诸如数据结构生成器116之类的数据结构生成器、诸如预览生成器/编辑器122之类的预览生成器/编辑器、诸如计算模块120之类的计算模块和/或诸如表示生成器123之类的表示生成器。动画开发工具106可在诸如显示器125之类的显示器上的诸如预览UI124之类的预览UI中显示动画。动画开发工具106可在诸如显示器125之类的显示器上的诸如文件编辑器127之类的文档编辑器中显示文档。将会理解，诸如(作为示例而非限制)包括此处所描述的CSS动画开发工具106的程序模块(例如，动画选择器模块、数据结构生成器模块等)之类的一个或多个程序模块可被加载到存储器144中以使得诸如处理器142等之类的一个或多个处理器执行归属于CSS动画开发工具106的一个或多个模块的动作。

应用可被加载到诸如CSS开发环境105之类的开发环境中。诸如HTML文件之类的表示网页的内容的文件可被选择并可由动画开发工具106接收。例如，假设图1a中描述的web应用150被加载到CSS开发环境105中，并且网页1152被选择供编辑。网页1可由诸如动画选择器114之类的动画选择器接收。被用于渲染所选择的网页的所有HTML和CSS文件可被确定。渲染所选择的网页的HTML和CSS文件的集合包括该网页的文档闭包。因此，例如，网页1152的文档闭包可包括内容文件1164、内容文件2165、内容文件3166、渲染文件1170、渲染文件2171以及渲染文件3172。所选择的网页的文档闭包(例如，网页1152的文档闭包107)可由动画开发工具106接收。

可从所选择的网页中选择要编辑的动画元素或一组动画元素。例如，在图1b中，诸如用户输入111之类的用户输入可被提供给诸如动画选择器114之类的动画选择器以选择要编辑的动画元素或一组动画元素，诸如动画112。可通过选择CSS样式规则从该网页中选择动画元素或一组动画元素。用于选择动画元素或一组动画元素的样式规则可以是：标准CSS样式规则、元素的内嵌样式规则、或表示动画元素的所有胜出样式属性的虚拟胜出样式规则。为了从网页中选择动画元素或一组动画元素，可通过使用动画元素或一组动画元素CSS属性来选择引用至少一个keyframes规则的CSS样式规则。例如：

p{

animation-name:foo

}

可引用keyframes规则:

keyframesfoo{

}

替代地，可提供动画元素或一组动画元素的HTML代码中内嵌列出的样式规则，如下：

<divstyle＝”animation-name:a1,a2；animation-duration:1s,2s；”></div>.

替代地，可提供表示元素的胜出样式属性值的虚拟(计算出的)样式规则。可提供计算特定动画元素的胜出规则值的选项。如果不止一个动画名称被定义在CSS样式规则中，可创建并显示动画名称(标识符)的列表供选择。

所选择的动画元素或一组动画元素(例如，动画112)可被提供给诸如数据结构生成器116之类的数据结构生成器，该数据结构生成器接收所选择的动画112以及该网页的文档闭包(例如，网页1152的文档闭包107)并从中生成诸如数据结构118之类的数据结构。数据结构生成器116可遍历文档闭包中影响所选择的网页的渲染的文件并且可提取文档闭包中的文档的与所选择的动画元素或一组动画元素有关的部分。例如，数据结构生成器116可从网页1152的文档闭包107中选择文档闭包107中的文档的与所选择的动画112有关的部分。任何被选择的属性和规则可来自于文档闭包中的任意文档。数据结构生成器116可搜索影响所选择的动画的属性和keyframe子规则。从网页文档闭包中提取的属性和keyframe子规则的集合可被组合成诸如数据结构118之类的单个合成数据结构。

数据结构118可在文档闭包中的文档被编辑时被更新。对文档闭包中的文档的改变可致使数据机构被更新。被包括在数据结构中的一个或多个keyframes规则、在数据结构的特定关键帧处的特定属性的关键帧值、以及影响这些关键帧的表现的动画属性可由计算模块重新计算。反映在数据结构中的胜出的属性可如以下所述地更新。

计算可由诸如计算模块120之类的计算模块在数据结构118上运行以确定胜出的CSS属性和胜出的CSSkeyframes规则(例如，胜出规则119)。当所涉及的文档被编辑时，计算模块120可在数据结构中更新属性状态。计算模块120可计算特定动画元素的胜出的keyframes规则。计算模块120可确定该胜出的keyframes规则内的定义该胜出的keyframes规则内的每个动画属性在给定时间的值的关键帧子规则。计算模块120可确定建立动画的定时属性(延迟、持续时长、重复、填充表现等)的动画属性。如果动画是通过规定样式规则而被选择的，则可从样式规则中读出属性值。如果动画是通过规定“胜出”的虚拟规则来选择的，则值可根据应用于特定动画元素或特定的一组动画元素的所有样式来计算。动画值可被用于确定每个关键帧的实时值。

计算可在数据结构上运行以产生动画的完整表示。可产生完整表示，诸如动画112的表示121。可创建动画的表示。数据结构118和/或表示121可由诸如预览生成器/编辑器122之类的预览生成器使用以在不运行应用的情况下创建所选择动画的预览。表示121可被发生给可被用来渲染预览UI124的web浏览器的实例。可开发模拟动画在应用的执行期间的运行的一组动态样式规则。

动画的预览可使用负延迟以及暂停的播放状态来模拟在特定时刻暂停动画从而允许动画被刮擦。负延迟指的是将动画的动画延迟值设置成负数。这样做同时将播放状态设置为“暂停”致使动画被设置针对特定时间的值，这通过将该时间点移至总动画的时间0来实现。例如，假设动画是3秒长，并具有0秒的延迟。假设用户想要看1.5秒处动画看起来是什么样。通过将动画延迟设置为-1.5秒(此时动画开始暂停状态(维持在时间0))，可看到如果该动画正常播放到1.5秒将会应用的值。

由于动画预览生成要应用于动画的新的CSS规则，并且不使用文档闭包文档中的现有CSS规则，由于CSS优先序规则，可播放正常将不播放的动画。

预览可被显示在诸如预览UI124之类的预览用户界面中。预览生成器/编辑器122可在开发期间提供动画的可视化。预览UI中提供的可视预览可使得在动画开发工具中编辑动画的效果能够被观察到。预览生成器/编辑器122可使得用户能够改变预览UI124中可见的当前时间。动画可经由用户输入(用户输入111)来编辑。用户输入可包括用户手势，用户手势被转换成改变动画元素或一组动画元素的属性值。用户手势可被映射到数据结构中的改变。数据结构中的改变可被传播到该效果所影响的HTML和CSS文件。

动画还可通过改变文档闭包中的文档中的一个来编辑。对文档闭包中的文档的改变可被应用于数据机构。对数据结构的改变可改变预览中的动画。改变文档可意味着胜出的值不得不被重新计算。诸如观测器126之类的观测器可监视文档闭包中的文档，并且响应于检测到CSS文档中的至少一个已改变，胜出的值可被重新计算。表示121可被更新。数据结构可被更新，以更新预览UI124中出现的内容。

一旦数据结构118被更新以对应于文档闭包中的所有文档中的改变，则完全渲染当前正被编辑的动画。合成数据结构可被用于生成表示正被编辑的动画的用户界面。由于数据结构合并了关于来自多个文档的动画的所有信息，构建这一界面是简单的。使用用户界面作出的编辑可被映射到对数据结构的一个或多个改变。该改变可被映射到包括正被编辑的值的各个文档中的对应改变。例如，如果包括在当前所选择的动画中的keyframes规则被从文档闭包中的CSS文件中的一个中删除，则该闭包中具有相同名称的另一keyframes规则(如果存在的话)可替代被删除的规则。预览UI中动画的预览可用新的关键帧值来更新。动画的数据结构可用新的关键帧值来更新。在预览UI中对动画作出的编辑可以标记形式指向新的keyframes规则。

图2解说了根据此处公开的主题的各方面的用于能够编辑动画的方法200。图2中所述的方法可由诸如但不限于参考图1b中所述的系统来实践。尽管方法200描述了顺序执行的一系列操作，但要理解，方法200不受该顺序的次序的限制。例如，一些操作可以与所描述的不同的次序发生。另外，一个操作可以与另一操作并发发生。在一些实例中，不是所有的所描述操作都被执行。

在操作中，诸如图1b中描述的系统之类的系统可如下操作。应用可被加载到诸如CSS开发环境之类的开发环境中。应用可包括构成该应用的多个CSS和HTML文件。应用可以是web应用并且可包括多个网页。在操作202，诸如HTML文件之类的表示网页的内容的文件可被选择以供编辑并可由动画开发工具来提供。所选择的网页可由动画开发工具接收。被用于渲染所选择的网页的所有HTML和CSS文件(文档闭包)可被确定。所选择的网页的文档闭包可在操作204由动画开发工具接收。

在操作206，可从所选择的网页中选择要编辑的动画。可通过选择CSS样式规则来从网页中选择动画。用于选择动画的样式规则可以是：标准CSS样式规则、元素的内嵌样式规则、或表示动画元素的所有胜出样式属性的虚拟胜出样式规则。为了从网页中选择动画，可选择CSS样式规则。所选择的CSS样式规则可被检查以找出对于规定动画名称或标识符的一个或多个keyframes规则的引用。经标识的动画可包括动画元素或一组动画元素。

在操作208，可通过走查文档闭包中影响所选择的网页的渲染的文件来从文档闭包的文档中生成数据结构。文档闭包中的文档的与所选择的动画有关的部分可被选择。任何被选择的属性和规则可来自于文档闭包中的任意文档。影响所选择的动画的属性和keyframes规则可被选择并且可被组合成单个数据结构。在操作210，计算可在数据上指向以确定胜出的CSS属性和胜出的CSSkeyframes子规则。

在操作212，数据结构可用计算结果来更新以创建动画的完整表示。表示可被用于创建所选择的动画的预览而无需运行应用。在操作214，可播放预览，从而在开发期间提供动画的可视化。可见的当前时间可被改变。可开发模拟动画在应用的执行期间的运行的一组动态样式规则。由于生成了要应用于动画的新的CSS，因此由于CSS优先序规则，可播放正常将不播放的动画。

在操作216，动画可通过用户输入来编辑。用户输入可包括用户手势，用户手势被转换成对动画元素或一组动画元素的属性值的改变。在218，用户手势可被映射到数据结构中的改变。数据结构中的改变可被传播到该效果所影响的HTML和CSS文件。元素还可通过改变文档闭包中的文档中的一个来编辑。对文档闭包中的文档的改变可被应用于数据机构。对数据结构的改变可改变动画元素的预览中的动画。改变文档触发对于胜出的值的重新计算。文档闭包中的文档可被监视。响应于检测到文档闭包中的至少一个文档已改变，胜出的值可被重新计算。表示可被更新。数据结果可被更新。预览可被更新。

合适的计算环境的示例

为了提供有关本文所公开主题的各方面的上下文，图3以及以下讨论旨在提供其中可以实现本文所公开主题的各实施例的合适计算环境510的简要概括描述。尽管本文所公开的主题是在诸如程序模块等由一个或多个计算机或其他计算设备执行的计算机可执行指令的通用上下文中描述的，但本领域技术人员将认识到，本文所公开的主题的各部分还能够结合其他程序模块和/或硬件和软件的组合来实现。通常，程序模块包括执行特定任务或实现特定数据类型的例程、程序、对象、物理人为产物、数据结构等。通常，程序模块的功能可在各个实施例中按需进行组合或分布。计算环境510只是合适的操作环境的一个示例，并且不旨在对此处所公开的主题的使用范围或功能提出任何限制。

参考图3，描述了计算机512形式的计算设备。计算机512可包括至少一个处理单元514、系统存储器516和系统总线518。至少一个处理单元514可执行被存储在诸如但不限于系统存储器516之类的存储器中的指令。处理单元514可以是各种可用处理器中的任何一种。例如，处理单元514可以是图形处理单元(GPU)。这些指令可以是用于实现被描述为由上述一个或多个组件或模块所执行的功能的指令或用于实现上述方法中的一个或多个的指令。也可以使用双微处理器及其他多处理器体系结构作为处理单元514。计算机512可被用于支持在显示屏上渲染图形的系统中。在另一示例中，计算设备的至少一部分可以用在包括图形处理单元的系统中。系统存储器516可包括易失性存储器520和非易失性存储器522。非易失性存储器522可以包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)或者闪存。易失性存储器520可包括可充当外高速缓冲存储器的随机存取存储器(RAM)。系统总线518将包括系统存储器516的系统物理人为产物耦合到处理单元514。系统总线518可以是几种类型的总线结构中的任何一种，包括存储器总线、存储控制器、外围总线、外总线或局部总线，并且可以使用各种可用总线体系结构中的任一种。计算机512可包括处理单元514可通过系统总线518访问的数据存储。数据存储可包括用于图形渲染的可执行指令、3D模型、素材、材质等。

计算机512通常包括各种计算机可读介质，诸如易失性和非易失性介质、可移动和不可移动介质。计算机可读介质可以通过用于存储诸如计算机可读指令、数据结构、程序模块或其它数据等信息的任何方法或技术来实现。计算机可读介质包括计算机可读存储介质(也称为计算机存储介质)以及通信介质。计算机存储介质包括物理(有形)介质，诸如但不限于可存储所希望的数据以及可由计算机512访问的RAM、ROM、EEPROM、闪存或其他存储器技术、CDROM、数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储设备。通信介质包括诸如但不限于通信信号、调制载波或可被用于传递所希望的信息以及可由计算机512访问的任何其他无形介质之类的介质。

将理解，图3描述了可充当用户与计算机资源之间的媒介的软件。该软件可以包括可存储在盘存储524上的操作系统528，该操作系统可分配计算机512的资源。盘存储524可以是通过诸如接口526等不可移动存储器接口连接到系统总线518的硬盘驱动器。系统应用程序程序530利用由操作系统528通过存储在系统存储器516或者存储在磁盘存储532上的程序模块534和程序数据934对资源的管理。可以理解，计算机可用各种操作系统或操作系统的组合来实现。

用户可通过输入设备536向计算机512输入命令或信息。输入设备536包括但不限于定点设备，诸如鼠标、跟踪球、指示笔、触摸垫、键盘、话筒、语音识别和姿势识别系统等。这些及其他输入设备通过系统总线518经由接口端口538连接到处理单元514。接口端口538可表示串行端口、并行端口、通用串行总线(USB)等。输出设备540可与输入设备使用相同类型的端口。提供输出适配器542以举例说明存在像监视器、扬声器、以及打印机的需要特定适配器的一些输出设备540。输出适配器542包括但不限于在输出设备540和系统总线518之间提供连接的视频和音频卡。其他设备和/或系统和/或设备，诸如远程计算机544，可提供输入和输出两种能力。

计算机512可以使用到诸如远程计算机544之类的一个或多个远程计算机的逻辑连接来在联网环境中操作。远程计算机544可以是个人计算机、服务器、路由器、网络PC、对等设备或其他常见的网络节点，并且通常包括许多或所有以上相对于计算机512所描述的元件，但在图3中仅示出了存储器存储设备546。远程计算机544可经由通信连接550逻辑地连接。网络接口548涵盖诸如局域网(LAN)和广域网(WAN)这样的通信网络，但也可包括其他网络。通信连接550是指用来将网络接口548连接到总线518的硬件/软件。通信连接550可以在计算机512内或外并且包括诸如调制解调器(电话、电缆、DSL和无线)和ISDN适配器、以太网卡等内和外技术。

可以理解，所示网络连接仅是示例，并且可以使用在计算机之间建立通信链路的其他手段。本领域的普通技术人员可以理解，计算机512或其他客户机设备可作为计算机网络的一部分来部署。在这一点上，本文所公开的主题涉及具有任意数量的存储器或存储单元以及在任意数量的存储单元或卷上发生的任意数量的应用和进程的任何计算机系统。本文所公开的主题的各方面可应用于具有部署在网络环境中的具有远程或本地存储的服务器计算机和客户计算机的环境。本文所公开的主题的各方面也可应用于具有编程语言功能、解释和执行能力的独立计算设备。

图4示出集成开发环境(IDE)600和通用语言运行时环境602。IDE600可允许用户(例如，开发者、程序员、设计者、编码者等)在计算机系统中设计、编码、编译、测试、运行、编辑、调试或构建程序、程序集、网站、web应用和web服务。软件程序可包括用一个或多个源代码语言(例如，VisualBasic、VisualJ#、C++、C#、J#、JavaScript、APL、COBOL、Pascal、Eiffel、Haskell、ML、Oberon、Perl、Python、Scheme、和Smalltalk等)创建的源代码(组件610)。IDE600可提供本机代码开发环境，或者可提供在虚拟机上运行的托管代码开发，或者可提供其组合。IDE600可提供使用微软.NET^TM框架的托管代码开发环境。可使用语言专用源编译器620使用建模工具652和模型存储653从源代码组件610和本机代码组件611创建中间语言组件650，并且使用中间语言编译器660(例如，即时(JIT)编译器)从中间语言组件650创建本机代码组件611(例如，机器可执行指令)。即，当中间语言(IL)应用被执行时，其在被执行的同时被编译成适合正在其上执行它的平台的合适机器语言，藉此使代码能跨若干平台移植。替代地，在其他实施例中，程序可被编译成适合其目标平台的本机代码机器语言(未示出)。

用户可根据已知软件编程技术以及与特定源语言相关联的特定逻辑和句法规则经由IDE600中的用户接口640和源代码编辑器651来创建和/或编辑源代码组件。此后，源代码组件610可经由源编译器620被编译，借此程序的中间语言表示可被创建，诸如程序集630。程序集630可包括中间语言组件650和元数据642。

应用设计可以能够在部署前被确认。

本文所述的各种技术可结合硬件或软件，或在适当时以其组合来实现。由此，本文所公开的方法和装置或其特定方面或部分可采取包含在诸如软盘、CD-ROM、硬盘驱动器或任何其他机器可读存储介质等有形介质中的程序代码(即，指令)的形式，其中当程序代码被加载到诸如计算机等机器内并由其执行时，该机器成为用于实现本文所公开的主题的各方面的装置。如此出所用的，术语“机器可读存储介质“应被用来排除提供(即存储和/或传输)任何形式的传播信号的任何机制。在程序代码在可编程计算机上执行的情况下，计算设备通常将包括处理器、该处理器可读的存储介质(包括易失性和非易失性的存储器和/或存储元件)、至少一个输入设备、以及至少一个输出设备。可例如通过使用数据处理API等来利用域专用编程模型各方面的创建和/或实现的一个或多个程序可用高级过程语言或面向对象的编程语言来实现以与计算机系统通信。然而，如果需要，该程序可以用汇编语言或机器语言来实现。在任何情形中，语言可以是编译语言或解释语言，且与硬件实现相结合。

尽管用结构特征和/或方法动作专用的语言描述了本主题，但可以理解，所附权利要求书中定义的主题不必限于上述具体特征或动作。

Claims

1.一种系统，包括：

计算设备的至少一个处理器；

所述计算设备的存储器；以及

动画开发工具，所述动画开发工具包括被加载到所述存储器中的至少一个程序模块，所述至少一个程序模块使所述至少一个处理器：

接收应用的网页的文档闭包，所述网页包括动画；

生成表示所述动画的数据结构；

在所述动画开发工具中预览所述动画而无需运行所述应用；以及

将操纵所述动画的属性的用户手势转换成对于所述数据结构的改变。

2.如权利要求1所述的系统，其特征在于，进一步包括：

被加载到所述存储器中的至少一个程序模块，所述至少一个程序模块使所述至少一个处理器：

将对所述数据结构做出的改变应用于所述文档闭包。

3.如权利要求1所述的系统，其特征在于，进一步包括：

通过选择CSS样式规则来选择所述动画，所述CSS样式规则包括以下中的一个：标准CSS样式规则、元素的内嵌样式规则、或表示所述动画的胜出样式属性的虚拟胜出样式规则。

4.如权利要求1所述的系统，其特征在于，进一步包括：

加载到所述存储器中的至少一个模块，所述至少一个模块使所述至少一个处理器：

使用所述数据结构来构建所述动画的设计时预览而无需改变所述文档闭包中的文档。

5.如权利要求1所述的系统，其特征在于，进一步包括：

计算所述动画的胜出的keyframes规则以及所述胜出的keyframes规则内的关键帧子规则。

6.一种方法，包括：

由计算设备的处理器接收网页以及所述网页的文档闭包；

选择所述网页中的动画；

生成表示所述动画的数据结构；

在动画开发工具用户界面中预览所述动画；

接收对所述用户界面中预览的动画的至少一个修改；以及

将所述至少一个修改应用于表示所述动画的数据结构。

7.如权利要求6所述的方法，其特征在于，进一步包括：

响应于检测到对于所述文档闭包中的文档的改变，更新表示所述动画的数据结构。

8.如权利要求6所述的方法，其特征在于，进一步包括：

为所述动画计算一组胜出的动画属性。

9.如权利要求8所述的方法，其特征在于，进一步包括：

响应于检测到对所述文档闭包中的文档的改变，更新表示所述动画的数据结构。

10.一种包括计算机可执行指令的计算机可读存储介质，所述计算机可执行指令在被执行时使计算设备的至少一个处理器：

通过选择CSS样式规则来从网页中选择动画，所述CSS样式规则包括以下中的一个：标准CSS样式规则、元素的内嵌样式规则、或表示所述动画的胜出样式属性的虚拟胜出样式规则；

从所述网页的文档闭包中提取所述文档闭包的部分文档，所提取的部分与所选择的动画有关；

从所提取的部分中创建合成数据结构；

从所述合成数据结构中创建所选择的动画的完整表示；

在开发用户界面中播放所述所选择的动画的完整表示中的动画的预览而无需运行所述应用；

响应于接收到操纵所述预览的输入，将所述输入转换成对所述动画的属性的改变；以及

在所述数据结构中更新对应的属性。