CN110235181B - 用于生成跨浏览器兼容动画的系统和方法 - Google Patents

用于生成跨浏览器兼容动画的系统和方法 Download PDF

Info

Publication number
CN110235181B
CN110235181B CN201780085242.7A CN201780085242A CN110235181B CN 110235181 B CN110235181 B CN 110235181B CN 201780085242 A CN201780085242 A CN 201780085242A CN 110235181 B CN110235181 B CN 110235181B
Authority
CN
China
Prior art keywords
freedom
motion path
parent node
segment
animation
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.)
Active
Application number
CN201780085242.7A
Other languages
English (en)
Other versions
CN110235181A (zh
Inventor
L.科瓦
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Google LLC
Original Assignee
Google LLC
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Google LLC filed Critical Google LLC
Publication of CN110235181A publication Critical patent/CN110235181A/zh
Application granted granted Critical
Publication of CN110235181B publication Critical patent/CN110235181B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/972—Access to data in other repository systems, e.g. legacy data or dynamic Web page generation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/20—Drawing from basic elements, e.g. lines or circles
    • G06T11/203—Drawing of straight lines or curves
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/20—3D [Three Dimensional] animation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T17/00—Three dimensional [3D] modelling, e.g. data description of 3D objects
    • G06T17/005—Tree description, e.g. octree, quadtree

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Artificial Intelligence (AREA)
  • Health & Medical Sciences (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Computer Graphics (AREA)
  • Geometry (AREA)
  • Software Systems (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本公开提供了用于在所有主流浏览器中都可行并且不要求JavaScript的经由纯CSS3和HTML5的运动路径的实现方式的系统和方法。对于每个运动路径自由度(例如，x平移)，系统可向文档对象模型(DOM)中插入额外的元素来容宿其动画。在一些实现方式中，系统可应用优化过程来拟合将理想运动路径轨迹近似到预定的容限并同时最小化存储空间的CSS3关键帧规则。除了支持CSS3运动路径以外，此编写模型还保持了向变换通道供应任意标准CSS3动画的能力，这允许用户例如独立于元素沿着运动路径的进度对其尺度和旋转进行动画化。

Description

用于生成跨浏览器兼容动画的系统和方法
相关申请
本申请要求于2017年6月13日递交的标题为“Systems and Methods forAuthoring Cross-Browser HTML 5 Motion Path Animation”的美国临时申请第62/519,141号的权益和优先权，这里通过引用并入该美国临时申请的全部内容。
技术领域
本申请通常涉及用于编写跨浏览器HTML5运动路径动画的系统和方法。
背景技术
“运动路径”(motion path)是用于沿着曲线移动对象的常见动画抽象。用户通过定义曲线形状(例如，三次贝塞尔曲线)、通过定义对象沿着曲线行进地有多快(这可以像恒定速度那么简单，但也可包括加速度、减速度、暂停和瞬间移动的复杂序列)以及通过指定对象是否将自身定向为指向路径的切向(“切向跟随”)来控制动画。所有主流web浏览器天生经由CSS3关键帧规则支持动画，但没有广泛采用的用于运动路径动画的标准。希望创建跨浏览器运动路径动画的用户必须依赖于JavaScript库，JavaScript库增加了加载网页的开销并且不提供与CSS3相同的运行时性能保证。
发明内容
本文论述的系统和方法提供了在所有主流浏览器中都可行并且不要求JavaScript的经由纯CSS3和HTML5的运动路径的实现方式。只利用CSS3关键帧规则创建动画，这由于两个原因是非平凡的：1)为了在2D中跟随运动路径，x平移、y平移和z旋转必须各自被独立动画化，但CSS3不能够向单个元素的不同变换通道应用不同的动画；以及2)CSS3利用将时间与值关联的2D三次贝塞尔曲线来表示动画，并且此格式不能够表示不具有闭型表示的真实运动路径动画曲线。
相反，对于每个运动路径自由度(例如，x平移)，系统可将额外的元素插入到文档对象模型(document object model，DOM)中来容宿(host)其动画。在一些实现方式中，系统可应用优化过程来拟合将理想运动路径轨迹近似到预定的容限并同时最小化存储空间的CSS3关键帧规则。除了支持CSS3运动路径以外，此编写(author)模型还保持了向变换通道供应任意标准CSS3动画的能力，这允许用户例如独立于元素沿着运动路径的进度对其尺度和旋转进行动画化。
在一个方面中，本公开针对一种用于生成跨浏览器兼容动画的方法。该方法包括由计算设备接收包括要被动画化的元素的网页，该网页包括具有与该元素相对应的节点的文档对象模型(DOM)树。该方法包括由计算设备接收用于该元素的包括多个自由度的运动路径。该方法包括由计算设备向DOM树中插入以与该元素相对应的节点作为子节点的第一父节点，该第一父节点对应于多个自由度中的第一自由度。该方法包括由计算设备向DOM树中插入以第一父节点作为子节点的第二父节点，该第二父节点对应于多个自由度中的第二自由度。
在一些实现方式中，该方法包括为多个自由度中的每个额外的自由度向DOM树中迭代地插入额外的父节点。在一些实现方式中，该方法包括由计算设备接收用于该元素的输入尺度因子；由计算设备将第一尺度因子插入到第一父节点中；并且由计算设备将第二尺度因子插入到第二父节点中；并且第一尺度因子和第二尺度因子的总和等于输入尺度因子。
在一些实现方式中，该方法包括接收贝塞尔曲线片段；生成在第一自由度中与贝塞尔曲线片段相对应的键和键时间的第一序列；并且生成在第二自由度中与贝塞尔曲线片段相对应的键和键时间的第二序列。在进一步的实现方式中，第一贝塞尔曲线片段具有第一缓动函数(easing function)；并且该方法包括接收具有第二缓动函数的第二贝塞尔曲线片段。在再进一步的实现方式中，该方法包括将与第一缓动函数相对应的第一缓动键插入到第一父节点中，并且将与第二缓动函数相对应的第二缓动键插入到第二父节点中。在再进一步的实现方式中，该方法包括在多个采样点处将贝塞尔曲线片段迭代地细分成多个子片段并且在采样点之间进行插补以识别键和键时间的第一序列以及键和键时间的第二序列。
在该方法的一些实现方式中，多个自由度包括至少一个平移。在该方法的一些实现方式中，多个自由度包括至少一个旋转。
在一些实现方式中，该方法包括将该网页发送到第二计算设备，该第二计算设备根据第二父节点、第一父节点和与该元素相对应的节点渲染被动画化的元素。
在另一方面中，本公开针对一种用于生成跨浏览器兼容动画的系统。该系统包括计算设备，该计算设备包括执行动画器的处理器，和存储器设备。该动画器被配置为接收存储在存储器设备中的包括要被动画化的元素的网页，该网页包括具有与该元素相对应的节点的文档对象模型(DOM)树。动画器还被配置为接收用于该元素的包括多个自由度的运动路径。动画器还被配置为向DOM树中插入以与该元素相对应的节点作为子节点的第一父节点，该第一父节点对应于多个自由度中的第一自由度。动画器还被配置为向DOM树中插入以第一父节点作为子节点的第二父节点，该第二父节点对应于多个自由度中的第二自由度。
在一些实现方式中，动画器还被配置为为多个自由度中的每个额外的自由度向DOM树中迭代地插入额外的父节点。在一些实现方式中，动画器还被配置为：接收用于该元素的输入尺度因子；由计算设备将第一尺度因子插入到第一父节点中；并且由计算设备将第二尺度因子插入到第二父节点中；并且第一尺度因子和第二尺度因子的总和等于输入尺度因子。
在一些实现方式中，动画器还被配置为：接收贝塞尔曲线片段；生成在第一自由度中与贝塞尔曲线片段相对应的键和键时间的第一序列；并且生成在第二自由度中与贝塞尔曲线片段相对应的键和键时间的第二序列。在进一步的实现方式中，第一贝塞尔曲线片段具有第一缓动函数；并且动画器还被配置为接收具有第二缓动函数的第二贝塞尔曲线片段。在再进一步的实现方式中，动画器还被配置为将与第一缓动函数相对应的第一缓动键插入到第一父节点中，并且将与第二缓动函数相对应的第二缓动键插入到第二父节点中。在再进一步的实现方式中，动画器还被配置为在多个采样点处将贝塞尔曲线片段迭代地细分成多个子片段并且在采样点之间进行插补以识别键和键时间的第一序列以及键和键时间的第二序列。
在该系统的一些实现方式中，多个自由度包括至少一个平移。在该系统的一些实现方式中，多个自由度包括至少一个旋转。
在该系统的一些实现方式中，计算设备还包括被配置为将网页发送到第二计算设备的网络接口，第二计算设备根据第二父节点、第一父节点和与元素相对应的节点渲染被动画化的元素。
提及这些实现方式不是为了限制或定义本公开的范围，而是为了辅助对其进行理解。特定的实现方式可被开发来实现以下优点中的一个或多个。通过改善运动路径的描绘，用户更能够理解被描绘的运动。在描绘的对象的运动表示对象的3D运动的示例实现方式中，本文描述的特定实现方式可更准确地以2D表示3D运动。另外，本文描述的特定实现方式提供的优点是利用原生的或者通常安装的应用(例如，浏览器)来获得的，而不要求用户安装新的软件(例如，扩展)。
附图说明
一个或多个实现方式的细节在附图和以下描述中阐述。本公开的其他特征、方面和优点将从描述、附图和权利要求中变得显而易见，在附图中：
图1A是运动路径的示例实现方式的图；
图1B-1E是用于创建和编辑运动路径的动画编辑器的实现方式的屏幕截图；
图1F是二分搜索的实现方式的图示；
图1G是用于创建和编辑运动路径的动画编辑器的实现方式的另一屏幕截图；
图1H-1K是编辑运动路径的示例实现方式的图；
图1L是动画编辑器的属性检查器的实现方式的屏幕截图；
图1M是用于运动路径动画的方法的实现方式的流程图；
图2A是根据一个实现方式的动画环境的框图；以及
图2B是根据一个实现方式的图2A中所示的客户端和服务器设备的框图。
在各幅图中相似的附图标记和命名指示相似的元素。
具体实施方式
本文论述的系统和方法提供了在所有主流浏览器中都可行并且不要求JavaScript的经由纯CSS3和HTML5的运动路径或者用于沿着曲线移动对象的动画抽象的实现方式。运动路径可包括定义的曲线形状(例如，三次贝塞尔曲线)、对象沿着曲线行进地有多快的定义(这可以像恒定速度那样简单，但也可包括加速度、减速度、暂停和瞬间移动(teleportation)的复杂序列)以及对象是否将自身定向为指向路径的切向(“切向跟随”)的指示。可利用CSS3关键帧规则创建动画，这由于两个原因是非平凡的：1)为了在2D中跟随运动路径，x平移、y平移和z旋转必须各自被独立动画化，但CSS3不能够向单个元素的不同变换通道应用不同的动画；以及2)CSS3利用将时间与值关联的2D三次贝塞尔曲线来表示动画，并且此格式不能够表示不具有闭型表示的真实运动路径动画曲线。
对于由运动路径动画化的每个运动路径自由度(例如，x平移)，系统可将额外的父元素插入到文档对象模型(DOM)层次体系中来容宿必要的动画。原始元素可像通常那样被动画化(例如，为了实现像缩放或者平面外旋转的效果)，并且运动路径变换被应用在此之上。为了支持响应性内容，系统可使用媒体规则来向不同大小的屏幕应用运动路径的不同版本(比如，较小的版本和较大的版本)。由于运动路径需要的中间元素可向被编写的文档添加杂乱，并且可能会使用户困惑，所以系统在一些实现方式中可仅在生成要提供的最终文档时才显式地添加它们。
编写的CSS规则可被更新，使得应用到路径元素的最终计算样式不被改变。例如，考虑原始元素的宽度和高度两者都被设置到50％的情况，或者说其父(parent)的大小的一半。系统可调整规则，使得最先祖的中间元素的宽度和高度是50％，并且原始元素和剩余中间元素两者的宽度和高度都是100％。为了在CSS3中表示运动路径动画，系统可使用优化过程来生成近似关键帧规则。理想的运动路径动画可被认为是定义任何时间的平移和旋转的三个函数x(t)、y(t)和r(t)。系统可对这些函数采样并且用时间维严格递增的属性来拟合近似线性和三次2D贝塞尔样条；这很容易转换成类似地基于三次贝塞尔曲线的CSS3关键帧。拟合动画曲线可在样本的用户可控容限ε(eps)内；如果X(t)近似x(t)，则对于第i样本x(t_i)，|X(t_i)-x(t_i)|≤eps。系统可执行使压缩文档中的运动路径的存储空间的估计最小化的优化。
此方案的优点包括输出动画与其他CSS动画(例如，为了将元素的不透明动画化)自然同步。与之形成对照，基于JavaScript的解决方案将只在所有动画都是用JavaScript完成的情况下才保证同步性，并且CSS动画具有更好的一般性能特性。此外，优化过程保持生成的CSS尽可能紧凑(从而降低加载时间)，而不牺牲视觉保真。此外，编写时体验不受表示运动路径所需要的HTML5构造所阻碍。相反，作为准备文档以便提供的一部分，自然的编写时抽象(元素跟随的路径)被向下编译到HTML5。只要文档包含原始编写的运动路径状态(几何结构加上速度函数)，CSS3键的创建就可被推迟到运行时(即，当文档被最终用户加载时)。为了效率，优化步骤可被跳过，取而代之，运动路径可被转化成密集线性关键帧。
当前，典型的CSS动画只能沿着键之间的直线动画化。为了沿着曲线动画化，用户必须添加许多间距紧密的键来创建线段的近似序列，这编写和编辑起来是过分困难的。大多数动画编写工具改为提供创建运动路径的能力，运动路径是定义动画化的对象跟随的轨迹的曲线。图1A用动画化期间的各种时间的快照(snapshot)100A-100C示出了运动路径的示例实现方式。元素或对象102被沿着路径104的几何结构移动，并且元素的取向被约束为跟随路径切向。用户通过调整路径的形状、通过定义对象沿着路径行进地有多快(这可以像恒定速度那样简单，但也可包括加速度、减速度、暂停和瞬间移动的复杂序列)以及通过指定对象是否将自身定向为指向路径的切向来控制动画。
本文描述了用于支持运动路径的系统和方法。虽然运动路径是简单且常用的抽象，但HTML5的局限性使实现复杂化。由于不存在对运动路径的原生支持，所以系统直接使用CSS3关键帧规则。不仅关键帧规则不能够确切地表示运动路径，而且为了将运动路径应用到元素，系统必须向DOM层次体系添加额外的元素并且向它们指派一组协调的动画。在一些实现方式中，利用通过为每个相关变换通道设置独立的定制缓动(custom eases)(经由三次贝塞尔)提供的自由度，通过拟合CSS3关键帧规则，将运动路径近似到适当的容限(例如，半个像素)。这允许了在不要求定制javascript运行时的情况下创建任意运动路径动画。此外，在一些实现方式中，为了使得运动路径在编写时更容易使用，运行时需要的额外DOM结构被省略，并且关联的关键帧规则(这些规则可能是笨拙的)被存储在单独的自动生成的CSS文件中。发布过程恢复重放运动路径所需要的所有状态信息，因此同样在运行时不需要javascript。
在时间线上可以像任何其他动画那样对待运动路径，因此所有现有功能都正常运转并且不需要额外的用户界面交互，包括重定时、循环、暂停和跳到动画中的不同点的能力。在一些实现方式中，运动路径可被实现为经由requestAnimationFrame来更新元素位置和取向的javascript运行时。然而：
-基于Javascript的动画的性能可能不如CSS3动画，因为其执行线程一般也被用于其他计算。尤其，广告必须与主内容以及与其他广告共
享此线程；
-基于Javascript的动画一般不能与CSS3动画同步；并且
-为了提供与可用于标准动画的相同的控制，运行时可能需要重实现现有的编辑器功能，包括暂停和去往动作，以及为不同的视口大小范围定义不同的动画的能力，在其他情况下这是经由媒体规则来处理的。在许多情况下，定制运行时将会要求比等同的CSS3更多的存储。
工作流概述
本部分概述了用于创建和编辑运动路径的示例工作流。图1B-1E是用于创建和编辑运动路径的动画编辑器106的实现方式的屏幕截图。这些附图的用户界面是完全例示性的。
首先，如图1B中所示，用户向文档添加图像或元素102并且设置位置键。当图像被选择时，它沿着其行进的线条104以及在均匀间隔的点处的操作柄(handle)在台上可见。此线条可被认为是简单的运动路径，虽然在内部没有创建运动路径对象。在一些实现方式中，如果具有动画化位置的单个元素被选择，则其路径在台上示出。为了减少视觉杂乱，在一些实现方式中，如果多个元素被选择则这些路径不被示出。
利用选择工具，用户现在拖曳路径操作柄之一或者线条的一部分，更改其形状并且隐式地创建如图1C中所示的运动路径动画。在一些实现方式中，拖曳接近线条中的任何地方可更改路径，而拖曳点或操作柄可更改沿着路径的缓动(有时称为惯性或曲率)。动画仍在如时间线108中所示的原始时间开始和结束，并且默认地，元素以恒定速度沿着该路径行进。改变开始或结束键时间更改此速度，并且更一般而言，时间线跨度的缓动定义元素沿着路径的距离的演变；例如，缓入(ease-in)使得元素从静止加速。最终，当具有运动路径的元素被选择时，界面106右侧的属性检查器包含新的部分，带有用于设置元素相对于路径的取向的切换开关。如果此切换开关生效，并且没有额外的旋转键被设置，则元素指向路径的切向。属性检查器还包含与将CSS3关键帧拟合到运动路径有关的高级设置。
用户无法利用该选择工具添加新的控制点，因此路径形状限于单个三次贝塞尔片段。为了更多的控制，在一些实现方式中，单独的运动路径工具可被用于直接编辑底层贝塞尔曲线(虽然被称为单独的，但在一些实现方式中，运动路径工具可以是同一工具的情境敏感模式，或者同一工具的修改键控制模式)。与笔工具一样，用户可操纵切向并且添加或去除控制点，如图1D中在新的控制点110处所示。这些编辑都不影响时间线108中的键的数目。
对除了平移X/Y以外的变换通道的改变正常工作，并且独立于运动路径。这意味着，例如，可通过如下方式来创建螺旋形动画：经由运动路径在XY平面中以圆圈形式移动元素，然后单独动画化z平移。类似地，取向沿着运动路径的元素可具有沿着其局部X轴旋转它的独立动画。
虽然单个键就足以创建任意复杂度的运动路径，但在一些实现方式中只有一个缓动曲线可被应用到此路径。创建多个键允许了运动路径的不同段具有不同的缓动；例如，元素可在路径的一部分中加速，然后以恒定速度行进。多个键也可被用于插入暂停并且创建非连续路径104，如图1E中所示，其描绘了如下情况下的用户界面106：如果元素102被设置为加速直到运动中的第一弯曲，然后以恒定速度行进，然后跳到单独的段104，同时仍以恒定速度行进。非连续性是通过添加均出现在时间线中接近1.2s处并且具有不同的平移值的两个键来创建的。
删除一个键会删除结束于该键的运动路径段，如果存在的话。如果下一键也具有运动路径段，则其初始控制点的位置被设置到先前键处的值。
在一些实现方式中，可在利用时间线的快速模式的同时创建和编辑运动路径。与之前一样，如果具有动画化的位置的元素被选择，则可以用选择工具直接操纵或者用路径工具来编辑的曲线在台上示出。类似的，编辑定义运动路径的两个键之间的缓动会更改沿着路径行进的速率，并且插入键会将运动路径分割成两个而不改变其形状。
作为CSS动画的运动路径
本部分更精确地定义了CSS动画和运动路径，并且说明了运动路径如何被转换成CSS动画。
CSS关键帧规则由键(pi,vi,Ei(u))的序列构成，其中pi是键时间(表示为总动画持续时间的百分比)，vi是键值，并且Ei(u)是定义值vi和vi+1如何被插补(interpolate)的缓动曲线(最终键的缓动曲线被忽略)。每个缓动曲线E(u)是2D三次贝塞尔片段
E(u)＝(f(u),w(u)),
其中u是曲线参数，f(u)是当前键和下一键之间已逝去的分数时间量，并且w(u)是朝着下一键的值的分数进度。第一和第四贝塞尔控制点始终是(0,0)和(1,1)，因此缓动曲线只具有四个自由度。另外，第二和第三控制点的f值需要在0和1之间，这确保了f(u)严格递增，并且因此反函数u(f)是明确定义的。给定在(非归一化)时间t0和t1的具有值v0和v1的键，在中间时间t，值为：
每个关键帧规则与一CSS动画样式相关联，该CSS动画样式指定关键帧规则的名称、动画的总持续时间和在开始动画之前的延迟。后两个量用于将键时间从百分比转换成以秒为单位的绝对时间。动画样式规则还提供了默认缓动曲线，如果在特定关键帧处没有定义缓动曲线则使用该默认缓动曲线；这可被设置为线性缓动。
运动路径的几何结构由2D三次贝塞尔曲线G(u)＝(x(u),y(u))定义。贝塞尔曲线的片段不需要是连续的，甚至不需要是连接的，虽然按照默认，GWD产生具有G1连续性的曲线。
沿着路径的距离由将时间映射到弧长距离的函数s(t)控制。如果路径是非连续的，则在确定弧长时贝塞尔片段之间的间隙被忽略。在一些实现方式中，s(t)可通过将运动路径的顺序片段与对开始和结束弧长进行插补的CSS3缓动函数关联起来而构造。单个缓动函数可跨越多个片段，只要这些片段是参数上连续的。这符合现有的时间线控制，并且尤其，当沿着直线来动画化元素时，其化简到现有的GWD行为。
给定s(t)，可通过构造从弧长s到曲线参数u的映射来评估位置。虽然此映射不能被确切表示，但一种简单的近似是通过对u密集采样来将路径视为分段线性曲线，并且更高效的近似可利用高斯求积来构造。
沿着运动路径动画化的元素可被称为路径元素。可以可选地相对于路径做出路径元素的取向，这是一种被称为切向跟随的条件。如果启用了切向跟随，则元素的局部x轴被保持与路径切向对齐。在没有定义切向的点(例如，在尖端处)，使用切向方向的极限，因为是从较低的曲线参数逼近该点的(除了在开始处以外，在开始处系统可从上方逼近)。在路径是单点的极端情况下，切向被定义为x轴。
运动路径的几何结构G(u)和距离函数s(t)隐式地定义了路径元素的2D位置，并且如果切向跟随被启用还定义了作为时间的函数的取向。为了将这些轨迹表示为CSS3关键帧规则，使用类似的数学表示的近似动画曲线X(u)、Y(u)和θ(u)被拟合到这些轨迹。具体而言，每个动画曲线在如下意义上是等同于CSS缓动曲线的2D三次贝塞尔片段(t(u),v(u))的序列：1)t(u)是严格递增的，因此反函数u(t)是明确定义的，并且2)值被计算为v(t)＝v(u(t))。与CSS缓动曲线一样，第一条件是通过要求t0≤t1≤t3和t0≤t2≤t3来实施的。
一旦计算了适当的动画曲线。由运动路径设置的所有自由度被利用CSS变换来表示，即，X(u)被变换成CSS规则，并且其他通道被类似地处理。令X(u)的N个贝塞尔片段为(X0(u),…XN-1(u))，并且令(ti,0,vi,0)…(ti,3,vi,3)为Xi的控制点。动画样式指定ti,0的延迟、ti,3的持续时间以及线性默认缓动函数。在关键帧规则中，Xi的时间和值为
在时间100％的键被添加以值vN-1,3并且没有指定的缓动函数。利用合适的CSS变换串来写入值(例如，对于幅度为v的x平移的变换3d(v,0,0))。最终，通过归一化第二和第三控制点来定义Xi的缓动函数：
以及
一个技术难点在于如果动画片段开始和结束于相同值则不能创建缓动曲线(除非动画化的值是恒定的，在此情况下任何缓动都足够了)。在此情况下，动画片段在动画化的值达到与端点的最大绝对差异的点被分割成两个子片段，该点将是通过将vi(u)的导数设置为0而形成的二次方程的解之一。
优化动画曲线
与先前部分中一样，不失一般性，以下论述限于x平移，但可应用到如上所述的其他平移。动画曲线X(u)被拟合到运动路径轨迹(ti,xi)的n个样本(比如以30Hz取得)，并且限制近似的误差的控制点C的列表被确定。使用术语“限制”而不是“最小化”是因为通过添加许多控制点总是能够创建任意精确的(但在空间上效率低下的)近似；尤其，通过在每个样本处有一控制点可以创建分段线性曲线。相反，系统的目标是创建在视觉上与真实运动路径不可区分并且具有尽可能紧凑的HTML5表示的动画。通过要求动画曲线在相对于每个样本的绝对容限∈内来控制动画的保真。更确切地说，如果第i个样本的误差是
Ei＝xi-vX(uX(ti,C),C),
则|Ei|≤∈，或者等同地，
||E||∞≤∈。
这是一个极大极小目标函数，这在曲线拟合中是常见的。uX(t)和vX(t)对C的依从性被显式指示。根据测试，∈＝0.25(以像素为单位)可靠地产生准确的结果，并且在大多数情况下，甚至大得多的值(∈＝1)也产生可接受的近似。
动画曲线上的个体贝塞尔片段可被写作通用三次片段
或者被写作线性片段
t％{
transform:transform3d(x,0,0)；
}.
其他定时函数也是可能的(例如，缓入)，但它们不是数值优化的现实输出。系统试图优化动画曲线的压缩后空间，这意味着像“transform:transform3d”和“animation-timing-function:cubic-bezier”之类的经常重复的串实质上是免费的。相反，熵的主要来源是数值量：键时间、键值和缓动曲线参数(对于三次片段)。如果利用s个字节来写入数字，则单个三次片段大约花费6s个字节，并且单个线性键花费2s个字节。类似地，具有n个三次片段的关键帧规则大致花费6sn个字节。具体而言，下面是对作为动画曲线片段的总数的函数的盘上的关键帧规则大小的经验测量。
对于具有不同数目的动画片段的运动路径的估计和实际关键帧规则大小在下面示出。所有数字都是用7个字符写入的(六个数字加上一个小数点)：
估计随着片段数目增加而变得更准确，并且甚至随着压缩例程发现数字本身中的规律性(例如，两字符序列“0.”经常出现在缓动曲线中)而变得比真实略坏。
如果动画曲线的持续时间充分短到使得存在四个或更少的样本，则总是可以用单个三次片段或者线性片段的序列来对其进行确切拟合。在一些实现方式中可利用后者，因为其至少是空间有效率的(并且如果只有两个或三个样本则更有效率)，并且其避免了过冲的风险。在一些实现方式中：
1.系统将单个线性片段拟合到所有样本，并且如果其在容限内则返回它；
2.否则，系统拟合单个三次片段，并且如果其在容限内则返回它；并且
3.如果(1)和(2)两者都失败，则系统细分样本并且将动画曲线拟合到每个子集。
在一些实现方式中片段边界被要求与第一和最末样本一致，这保证了最终动画曲线是连续的，并且还保证了键控配置(其始终在曲线的边界处)被确切地匹配。
实现了此算法的一个原型并且在其几何结构由单个贝塞尔片段构成并且其定时函数是单个CSS3缓动曲线的运动路径上对其进行了测试。大多运动路径要求具有3-5个片段的动画曲线，虽然该数字可高至7(或者低至1)。当细分样本集合时，在一些实现方式中，创建了两个相等大小的子集。在其他实现方式中，可在单个片段内拟合样本的更大部分，从而提高效率；在测试中，通常节省2-4个片段。系统贪婪地选择导致用单个片段拟合最大可能子集的细分点。假定永远不能通过添加样本来使不成功的拟合成功，则这可经由二分搜索来完成，如图1F的步骤120A-120D中所示。方框表示样本的阵列，并且变灰的方框指示已经用片段拟合的样本。在第一行120A中，从左和右两者起执行二元搜索以找到分割点122A-122C；阴影指示单个片段是否能被拟合，并且数字指示出样本被测试的次序。从未被使用的那一侧起的最优样本在下一迭代期间被记住。大小为四或更小的样本集合总是能被确切拟合。
此算法在计算上比简单地将样本分成两半更昂贵，因为在搜索的每一步执行了单独的优化。在最坏情况下，当任何一个片段只能拟合几个样本时，算法要求O(n·lg(n)次优化，与样本集合始终被分成两半的情况的O(n)相对比。然而，在实践中，永远达不到这个最坏情况，因为底层样本是来自相对平滑的轨迹的，并且因此在某一点，增大n不再产生最终片段序列的复杂度的增大。
为了将三次贝塞尔动画曲线片段拟合到n个样本的集合，在一些实现方式中，样本被归一化，使得每个维度的范围从0到1，并且使用使样本与片段上的对应点之间的平方误差总和最小化的曲线拟合算法。虽然此目标函数不是上文论述的原始那个(最小二乘相对于极大极小)，但其在实践中产生可接受的结果；真实目标函数仍可被用于决定细分是否必要。如果每个样本处的u值是已知的，则最小二乘近似化简到线性方程组。给定现有曲线，系统于是可改善估计样本u并且迭代：
1.将样本视为分段线性曲线，令si为第i样本的弧长，并且最初赋值ui＝si/sn-1。
2.计算对第一和最末样本进行插补，否则最小化平方误差的贝塞尔控制点值。这可以高效地完成，因为其是线性方程Ac＝v的最小二乘解，其中A是n x 2矩阵。
3.对于每个样本，通过找出曲线上的最近点处的u的值来更新ui。这是通过利用牛顿-拉夫森迭代找出切向和到样本的向量垂直的点来完成的。
4.重复(2)和(3)。
由于优化是不受约束的，所以输出时间控制点(t1,t2,t3,t4)在必要时被箝位(clamp)以确保t1≤t2，t3≤t4。
使用这个特定的曲线拟合算法的一个动机是它实现起来是相对迅速且容易的。在一些实现方式中，可使用更通用的优化器，利用现有算法获得初始控制点值。然而，用一般优化器获得确切的导数可能是不现实的，因为计算作为时间t和控制点c1,…c4的函数的曲线参数u需要评估三次多项式的根。
在一些实现方式中，系统可以是用javascript写成的，而在其他实现方式中，为了速度并且为了使得更容易找到可使用的现存数值优化库，可利用诸如C++的其他语言。
在一些实现方式中，不是在编写时生成关键帧规则，而是系统可存储运动路径定义(几何结构控制点、定时函数、误差容限)的编码，并且在文档被最终用户加载时经由脚本生成关键帧规则。由于编码比生成的规则紧凑得多，并且由于运行时脚本是固定大小的，所以对于运动路径的充分复杂的集合，这将始终是更紧凑的表示。然而，实现大小节省所需要的复杂度有可能相当地高。即使系统放弃优化并且简单地生成线性片段的密集集合，脚本也仍必须包含贝塞尔曲线的实现，包括评估值和切向并且构造弧长参数化；其必须构造运动路径的分段线性近似并且将此转换到CSS；并且其必须支持像媒体规则和时间线暂停/标签之类的特征。保守地说，其压缩空间将至少为几KB。基于本部分中早前给出的关键帧规则的测量大小，以及关于拟合运动路径片段所需要的CSS动画片段的典型数目的实验，文档在实现任何空间节省之前将很有可能需要具有20-30个运动路径片段，并且只有几个简单路径的文档将招致不必要的花费。这在一些实现方式中可以是构造运动路径动画时的加载时延迟。
因为底层路径几何结构本身是三次贝塞尔曲线，所以可以计算出确切跟随该几何结构并且只招致定时误差的近似动画。给定几何结构G(u)＝(x(u),y(u))，系统可计算基于定时曲线给出在各种时间应当达到的u的值的样本(ui,ti)，然后找出近似这些样本的三次贝塞尔曲线t(u)。所得到的x平移和y平移曲线于是将是X(u)＝(x(u),t(u))和Y(u)＝(y(u),t(u))。时间误差在一些实现方式中可能没有位置误差那么显著，而在其他实现方式中，为了避免可见的误差可能需要相当小的误差容限(3ms)，并且为了得到可接受的近似可能需要整体上更多的片段。
在一些实现方式中，CSS3可允许运动路径动画被定义如下：
1.在CSS中通过运动路径属性设置路径几何结构，该运动路径属性可以是CSS基本形状或者定义SVG曲线的串。
2.通过运动偏移来设置沿着路径的位置，运动偏移可以以像素为单位来测量或者被测量为总弧长的百分比。将此值动画化会沿着路径移动元素。
3.元素的取向始终朝向路径，并且恒定的偏移可被应用到此取向。如果假定运动路径具有三次贝塞尔路径几何结构，并且如果可利用CSS3缓动函数来动画化弧长距离，则在许多实现方式中，上文论述的运动路径表示可被转换成原生CSS3表示，如果浏览器支持变得更广泛的话。
表示运动路径
运动路径具有在运行时和编写时不同的非平凡HTML5表示。下面描述用于运动路径的运行时结构，然后论述运动路径如何被序列化到盘(以及等同地，它们如何出现在代码视图中)。
CSS动画模型将变换考虑为单个属性，尽管一般而言它是由多个参数定义的。如果两个键使用原函数(translate3d，rotateZ等等)的相同序列，则这些函数的参量各自被第一键的缓动曲线所插补。虽然多个动画可应用到一元素，但只有一个可定义特定属性的值，并且因此独立地动画化不同变换通道——也就是说使用不同数目的键和/或不同的缓动曲线——的唯一方式是按层次体系创建多个元素，每个元素与单独的变换动画相关联。在使用运动路径时必须这么做的原因有两个：
1.不受运动路径支配的变换通道，诸如缩放和平面外旋转，必须是可单独动画化的。
2.个体运动路径通道一般具有独立构造的动画曲线。
为了说明，下面是包含没有切向跟随的运动路径的发布文档的示例DOM：
如果启用了切向跟随，则z旋转也将被该路径动画化，并且因此将存在第三中间节点和关联的动画规则。
命名约定被用于将运动路径动画与应用到其他元素属性的动画关联。对于每个动画化的元素，GWD识别动画类别，该动画类别在选择器中被用于元素的动画样式的主导规则(动画规则)。在一些实现方式中，运动路径的路径元素可具有动画类别和动画规则，即使它没有动画化的属性(并且因此没有关键帧规则，或者具有空的关键帧规则)。如上所述，每个中间节点被指派一动画类别，该动画类别是通过向元素的动画类别附加通道相关后缀来形成的。类似地，每个中间节点处的关键帧规则是通过向元素的关键帧规则的名称附加相同的后缀来命名的。
中间节点可被添加为父以确保总有效变换始终是可利用GWD的变换函数的规范序列表示的：
translate3d rotateZ rotateY rotateX scale3d
如果改为添加额外的节点作为子(children)，则在启用切向跟随的同时对尺度动画化将以剪断(shear)元素告终。
在基本CSS规则中和在媒体规则中可不同地定义运动路径，并且变体可动画化不同的变换通道。例如，可在媒体规则中但不可在基本规则中定义运动路径，或者在基本规则中可禁用切向跟随而在媒体规则中可启用切向跟随。至少一个运动路径变体所需要的任何中间节点被添加到DOM，并且如果变换通道不被生效运动路径使用，则它将具有空的关键帧规则。
每个中间节点具有绝对定位和preserve-3d的变换样式，该变换样式可利用选择器[data-gwd-motion-path-node]经由单个样式规则来实施。中间节点也被如此样式化使得如下成立：
1.如果路径元素的宽度或高度被定义为百分比，则其计算大小是基于其逻辑父的，忽略中间节点。
2.如果切向跟随被启用，则容宿z旋转的动画的节点具有与路径元素的中心一致的变换原点。这确保了当该元素被旋转时，其中心保持在路径上。
为了满足(1)，用于中间节点的全局样式规则将宽度和高度设置到100％。为了应对(2)，当切向跟随生效时，顶级中间节点可被指派以打算用于路径元素的左、上、宽度和高度值，覆盖(override)默认宽度和高度值。路径元素也可被指派以0px的左/上和到100％的宽度/高度(并且这对于其他中间节点已经成立了)。可通过设置内嵌样式来更新路径元素，但中间节点的样式必须被添加到样式表，因为它们可随着生效媒体规则而变化：
如果切向跟随被启用，则在一些实现方式中可利用这些额外的规则。注意，不可能直接设置中间节点的变换原点，因为期望的位置可能是绝对样式和基于百分比的样式的混合，如以上示例中那样。
由于可存在许多导致左/上/宽度/高度样式被设置的代码路径，并且由于这些规则不是由用户编写的，所以这些可在序列化期间被构造：
1.切向跟随需要的所有现有规则被去除。它们容易被识别，因为它们的选择器包含子句[data-gwd-motion-path-node]。
2.对于文档中的每个运动路径，对于每个范围取回主导的左、上、宽度和高度样式(如果有的话)。
3.gwd-motion-path-abcd形式的独特CSS类别被添加到顶级中间节点。为了最小化保存之间的扰动(churn)，这个类别是在运动路径最初被创建时生成的并被再使用。
4.对于设置至少一个样式的每个范围，用
[data-gwd-motion-path-node].gwd-motion-path-abcd{...}形式的选择器添加样式规则。
此方案的一个局限是代码视图中的编辑始终被不加修改地保存，因此直到下次从设计视图序列化文档为止，对路径元素的左/上/宽度/高度样式的改变不会传播到中间节点的样式。如果从代码视图发布文档，则中间节点样式可被重构建，虽然此代码路径只能够访问原始DOM，并且因此不能够利用DocumentStyleModel API。
最后，如果路径元素的宽度和/或高度被动画化，则其中心不会保持附着到路径。系统不尝试对此进行纠正，因为1)尺度动画优先于宽度/高度动画，并且在大小被动画化时被默认使用，以及2)调整尺度会保持元素居中，只要其变换原点没有被编辑。
每个运动路径生成多个关键帧规则，并且这些规则经常被复杂化，因为每个运动路径片段为了可接受的近似通常要求多个键。作为数值优化的输出，用户不太可能认为检查这些规则是有用的。另外，运动路径与本质上是实现细节的多个样式规则——即，容宿动画样式并且镜像路径元素的左/上/宽度/高度样式的规则——相关联。为了避免使代码视图杂乱，在源文档中，所有为运动路径生成的CSS被存储在单独的样式表中。当文档被加载到系统的设计视图中时，此样式表的内容被转移到默认样式表，因此正常编辑逻辑正确工作。如果规则被包含在其媒体查询不存在于默认样式表中(因为用户手动编辑了媒体查询)的媒体规则中，则显示警告，并且这些规则被留在运动路径样式表中。当文档作为进入代码视图或保存到盘的一部分被重序列化时，所有运动路径动画都被识别并且连同其父媒体规则一起(如果必要的话)被转移回到运动路径样式表。然而，当在发布时序列化文档时不这么做；相反，所有规则被留在主样式表中，并且运动路径样式表被去除。
支持运动路径动画所需要的中间节点也向文档添加杂乱，并且它们可能使用户困惑。鉴于此，当文档被存储在盘上或者显示在代码视图中时，这些节点被去除。类似地，支持切向跟随所需要的内嵌左/上/宽度/高度样式不被添加到路径元素。为了简化发布过程，重构中间节点所需要的信息作为路径元素上的定制属性被存储在编写文档中。一个属性声明路径元素的动画类别，并且另一个声明被规则用于中间节点的左/上/宽度/高度样式的类别名称。
这些属性在发布时被去除。由于每个运动路径都具有动画类别，所以data-gwd-motion-path-anim-class也可被用于识别文档中的所有路径元素。
为了支持将文档直接从文件系统加载到浏览器中，从脚本标签调用在发布时用于恢复中间节点的同一逻辑。此脚本标签可在文档被发布时被去除。
为运动路径生成的动画规则不完全捕捉原始的编写时规范，原始编写时规范包括路径控制点值、与键相对应的控制点的列表、与这些键相关联的时间和缓动值、是否启用切向跟随以及用于调节优化过程的参数。由于这些属性被链接到生成的CSS动画规则，并且因此可在媒体规则内变化，所以系统可将它们存储为与运动路径相关联的动画规则中的CSS定制变量内的JSON。始终有至少两个这种规则，一个用于x平移并且一个用于y平移，因此系统可向x平移动画规则任意地添加定制变量。为了说明，考虑图1G的运动路径104。如所示，存在三个贝塞尔片段和三个键，包括在时间0的键。前两个片段被分组在前两个关键帧之间，并且它们使用默认线性缓动。第三个片段在第二和第三关键帧之间，并且是具有缓出(ease-out)定时的直线。切向跟随被启用。该运动路径定义的示例HTML5表示如下：
这里时间是以毫秒为单位的并且控制点坐标是按次序[X1,Y1,X2,Y2,…]列出的。在一些实现方式中，此数据可被手动编辑，而在其他实现方式中，数据可被锁定或者被防止编辑或者是以其他方式不可访问的。
并非所有主流浏览器都支持CSS定制变量。作为替换，运动路径编写状态可作为路径元素的子脚本标签中的JSON块被存储在文档主体中。可通过其媒体查询在JSON中识别媒体规则：
如果对断点的集合做出编辑，则在每个运动路径的编写状态中编码的媒体查询将需要被更新，这或者要求解决精致推理问题(给定在文档中不存在的媒体查询的运动路径，找出应当被换上的现有查询)，或者要求向断点的集合可被编辑的每种方式(编辑/插入/删除一个或多个宽度/高度/取向断点)添加运动路径特定逻辑。
在加载时，从4.2节中论述的编写数据构造存储器内运动路径表示，并且使用内部API来为给定的元素取回运动路径模型。当为元素构造时间线层时，其运动路径键被与元素变换键合并，因此仍存在单个变换轨道。
在运行时使用的中间节点本质上是渲染构造，并且它们并不打算被用户查看或操纵。实际上，将它们添加到编写时DOM将会使几个基本编辑场景复杂化：
·元素选择将不再涉及严格着眼于当前编辑容器的子。相反，如果子是运动路径的中间节点，则其后代必须被遍历，直到找到该路径元素为止。同时，当拷贝/粘贴、分组或包装元素时(也可能有其他情况)，中间节点应当被考虑为是顶级选择的一部分。
·当计算元素的完整局部变换时，只检查该元素的样式将不再足够。
·如果切向跟随被启用，则对路径元素的左、上、宽度和高度样式的改变将必须改为被应用到顶级中间节点。
另一方面，由不构造运行时运动路径DOM所牺牲的唯一一件事是动画重放和时间线清除(timeline scrubbing)不再像原来那样工作。由于这是更易处理的问题，所以中间节点在编写时不被考虑，取而代之，调整对动画预览做出。
为了重放运动路径(响应于时间线的播放按钮被按压)，首先由在准备文档以便发布时使用的同一个API恢复运行时DOM。当重放被停止时，DOM被回复到其编写时状态。
时间线清除是通过利用Element.animate API计算当前时间的动画化属性值并随后将这些值应用为覆盖样式来实现的。为了支持清除运动路径，系统也可为每个中间节点计算当前时间的动画化值(这不要求将它们重添加到DOM)，然后通过将路径元素自己的变换与中间节点的那些相结合来找出覆盖变换样式。虽然运动路径变换始终是相对于元素中心的，但元素的变换可具有任意中心，并且最终变换必须相对于此。令ME和Mp分别为元素和运动路径的变换矩阵，并且令TE和Tp为将元素原点移位到变换原点的平移矩阵。
于是元素处的总变换矩阵为
TEMETE -1TPMPTP -1
将变换原点之间的差异写为TΔ＝Tp -1TE，相对于变换原点的矩阵Tp为
TΔMETΔ -1MP
用运动路径工作
如果单个元素被选择，并且如果其位置被动画化(有或没有运动路径)，则其跟随的曲线在台上示出。利用标准工作流创建动画(可能通过添加单个位置关键帧)始终产生分段线性曲线，这不被认为是运动路径。然而，用于编辑现有运动路径的几何结构的相同工具也可被用于通过将两个位置键之间的片段弯曲成非线性形状来创建新的运动路径，如上所论述。
当运动路径被创建时，元素的2D位置的所有动画随后都被解读为运动路径，包括其形状未被更改并且因此是直线的片段。然而，现有的z旋转动画被认为在运动路径之上；当路径被创建时其被保留，并且无论切向跟随是启用还是禁用它都保持(并且可被自由编辑)。作为创建运动路径的一部分，编码其编写状态的通常标签被添加到DOM，并且因此总是能够通过检查DOM来检测到运动路径的存在。类似地，对运动路径的所有编辑都立即被反映在DOM编码中。运动路径可以如下方式被回复到普通位置动画：通过将其几何结构直接操纵为充分接近分段线性曲线，或者通过从时间线中的每个键删除运动路径属性。
出于实用性的原因，在一些实现方式中，运动路径仅仅使用x和y平移，而不是左/上：
·相对于左/上动画强烈鼓励变换动画，因为其性能更好，并且因为左/上动画可具有锯齿状外观，这是由于浏览器在渲染时将值舍入到整数。
·支持左/上和平移两者可使实现方式复杂化，因为每当设置或访问样式时(这是相当经常的)系统就必须区分这两种情况，并且左/上运动路径和平移运动路径对于单个元素可同时存在。还必须通知用户两种不同类型的运动路径。
从而，在这些实现方式中，左/上动画被运动路径UI忽略。如果元素仅仅具有左/上动画，则该元素跟随的(分段线性)曲线不在UI中示出。如果元素具有左/上动画和平移动画两者，则只描绘后者引起的曲线，元素将不集中在此曲线上。最后，如果在严格的左/上模式中使用选择工具，则不示出运动路径操作柄。
动画化元素所跟随的曲线始终是贝塞尔片段的序列，这些片段可以简单地就是直线。如果当单个动画化元素被选择时选择工具生效，则操作柄被放置在每个片段的开始和结束处，并且通过按规律间距的弧长间隔对曲线采样来添加额外的操作柄。间距被选择成使得存在最多n个样本，将至少w个像素间隔开。示例渲染在图1H中示出。有三种操作柄，每个被描绘为不同的大小和/或颜色：小灰圆圈134是采样的位置，小黑圆圈132是控制点，并且大黑圆圈130是关键帧(它们也必然是控制点)。
利用鼠标拖曳操作柄会更新其曲线片段的形状，使得曲线恰好经过该操作柄，而不扰乱其端点(除非端点本身被移动)。如果存在邻近的曲线片段，并且如果其切向在接合点处(近似)连续，则其被调整以便此连续性被保留。从而，移动单个操作柄要求为多达两个片段重计算关键帧规则。
为了保持拖曳平滑，运动路径模型的状态被更改以指示出编辑在进行中，并且当时间线计算当前时间的动画化值时，其要求运动路径直接从控制点和定时函数得出确切值。虽然这仍要求在每一步重生成弧长参数化，但其必然比必须重复地生成优化的关键帧规则更迅速。当鼠标被释放时，关键帧规则被重构建，这可导致元素位置的微小移位，这取决于近似容限和当前时间(因为位置在键时间处始终是确切的)。在鼠标释放时，时间线还被通知运动路径动画已被改变，因此其可更新标签动画和其他状态。
选择工具提供简单的编辑界面，但如果需要对运动路径的底层贝塞尔表示的更完整控制，则可改为使用路径工具。路径工具提供与笔工具几乎相同的图形界面：
·可通过点击和拖曳控制点来移动它们。
·如果切向控件被移动，则相反的切向控件被强制共线(保留G1连续性)，除非修改键被按住。
·双击控制点会将其切向折叠(collapse)到同一点，创建拐角。如果切向已经被折叠，则其被展开以便其可被进一步操纵(但拐角的形状被维持)。
·现有的控制点可被删除。如果控制点也是键，则该键被删除，并且
为了与现有的时间线行为一致，来自先前键的定时函数被延伸到下一键。
·新的控制点可被插入在路径中的任何点处。当这样做时，路径的整体形状不被更改，并且新的键不被插入，因此定时函数不被改变，并且
当前时间的时间线跨度包含多个片段。
为了说明控制点插入和删除，添加一个控制点并随后删除另一个控制点的效果的示例在图1I中图示。与之前一样，较大的控制点对应于键。如图1I中在左侧140A所示，运动路径可具有两个片段(例如，控制点130A和130C之间的缓入片段；以及130C和130B之间的线性片段)。控制点132A可被插入在缓入片段的中间，如在中间140B中所示。动画不改变。如在右侧140C中所示，删除控制点130C使得动画被重计算，留下单个缓入片段。
利用路径工具，在一些实现方式中，不可能向路径的末尾附加新的控制点；这必须通过经由时间线设置新的键来完成。与选择工具一样，在一些实现方式中，在鼠标正被拖曳的同时不生成新的关键帧规则。
用户界面的时间线也可被用于将键插入到运动路径中，就像任何其他动画那样。如果在最后的现有键之后设置新的键，则控制点被附加到运动路径的几何结构的与最终控制点相同的位置处，并且(退化)新片段被指派线性定时函数。如果新的键在第一现有键之前，则发生类似的行为。如果键被改为插入在两个现有键130D-130E之间，如图1J中所示，则控制点(例如，130F)被插入到运动路径中，使得其形状不被改变。为了与现有的时间线行为一致，用于原始片段的定时函数被重应用到新的子片段。例如，如果原始路径部分具有缓动定时，则在插入新键之后，该元素将会在键时间处突然减速，然后速度回升。
简单地通过设置路径元素的位置，就也可创建新的运动路径键，并且可编辑现有的键。与用于编辑运动路径的其他机制不同，可一次编辑多个运动路径，因为可选择多个路径元素。不是向设置2D位置的每个代码路径(例如，选择工具、平移工具和PI)添加运动路径特定处理，系统而是可将对元素的变换的改变解读为运动路径编辑，如果受影响的通道只是x平移和/或y平移的话。具体而言，比如时间线接收到元素的变换已被从MO更新到MN的通知，该元素具有运动路径，并且变换改变MNMO -1是纯2D平移。这导致在该时间的运动路径位置被移动MNMO -1，从而插入新的键，如果不是已经存在键的话。在一些实现方式中，关键帧规则仅在鼠标被释放时才被重优化。影响除了x平移和y平移以外的通道的对元素的变换的编辑不被特殊处理，而只是导致对元素自己的动画的更新。这使得用户能够执行关于除了变换原点以外的点的旋转和尺度，而不影响运动路径。结果，x平移和y平移既可被运动路径动画化也可在路径元素处被动画化。
如果运动路径控制点也是时间线键，则其可通过如下方式被去除：通过时间线的情境菜单删除该键，或者去除动画化属性弹出窗口中的变换条目。从运动路径对变换动画的贡献不与路径元素自己的变换动画相区分：如果运动路径和元素的变换两者都被键控，则两个键都被去除。去除键(例如，130I)被解读为从整个跨度(例如，130G到130I)中去除运动路径，因此直到先前键为止的所有先前控制点都被删除，如图1K中所示(例如，留下从130G到130H的单个跨度)。这确保了用户可单纯通过时间线UI来去除运动路径，而不是也必须使用路径工具来去除不在键处的控制点。
运动路径的定时可通过设置跨度处的缓动来更改，这要求用于关联的路径部分的关键帧规则被重计算。也可通过在时间线UI中移动键来编辑定时，并且这只要求现有规则中的键时间序列的重缩放。例如，考虑具有在1s和2s处的时间线键的运动路径，以及生成的具有键时间阵列[0％,12％,30％,50％,70％,100％]的关键帧规则。50％和100％处的键对应于时间线键，并且其他键是通过优化生成的。如果第一时间线键被移动到1.5s，则该规则的新键时间阵列是[0％,18％,45％,75％,85％,100％]，并且键值不被改变。
时间线最终负责生成与动画有关的所有CSS，因此如果运动路径存在，则其API为每个受影响的通道提供键，并且时间线将这些转换成关键帧规则。如果时间线编辑影响动画样式规则的属性，诸如延迟、持续时间或者循环计数，则这些改变被应用到元素的样式规则和运动路径的样式规则两者。
与其他动画化的量一样，如果媒体规则生效，但当前运动路径动画是在基本规则中定义的，则编辑运动路径会导致新的关键帧规则(并且可能新的样式规则)被添加到媒体规则。类似地，当媒体规则生效时运动路径动画被考虑在内，并且系统可能希望知道时间线层是否在使用从基本规则继承的动画。这在撤消/重做期间是有用的，用于从生效媒体规则去除新的子规则/向生效媒体规则重添加新的子规则。
最后，添加或编辑时间线标签使得为该标签生成复制的关键帧和动画样式规则。运动路径规则被类似地复制。
图1L是用于运动路径的属性检查器的示例的屏幕截图。如果具有运动路径的元素被选择，则PI示出用于运动路径属性的新部分。主要条目是用于启用或禁用切向跟随的切换开关和/或下拉菜单，但用户也可进入用于控制拟合关键帧规则时的误差容限的“高级”部分。位置动画使用以像素为单位测量的一个容限，并且取向动画使用以度为单位测量的不同的容限。如果切向跟随被禁用，则取向容限被禁用。对这些属性的任何一者的改变会使得关键帧规则被重生成。为了对容限设置提供反馈，面板还将大小估计示出为只读字段；此估计可基于关键帧规则中的片段的数目和类型。如果多个元素被选择，则在一些实现方式中，运动路径部分仅在所有元素都具有运动路径的情况下被示出。这与其他专门化部分一致，诸如用于图像的那个。
运动路径可像用于拷贝/粘贴目的其他动画那样被对待：用于顶级元素的运动路径被丢弃，但对于子元素则被保留。当拷贝运动路径动画时，命名约定被保留。
当对具有运动路径的元素进行分组(取消分组)或者包装(取消包装)时，运动路径动画被更新以反映坐标系统中的改变，就像涉及变换的任何其他动画那样。如果群组被复制，或者如果实例被取消分组，则运动路径动画在必要时被拷贝。由于这与拷贝/粘贴所需要的逻辑类似，所以运动路径API可为复制运动路径提供单个入口点。
可通过向动画化的元素添加和去除类别来控制时间线暂停和去往事件。如果元素在运动路径上，则这些类别也可被添加到发布时添加的中间元素/被从发布时添加的中间元素去除。
图1M是用于运动路径动画的方法的实现方式的流程图。在步骤160，可从本地存储器、从网络位置(例如，服务器、客户端设备等等)或者经由任何其他这种手段将页面加载到编辑器或动画器中。在一些实现方式中，页面可由编辑器或动画器取回，而在其他实现方式中，页面可被提供给编辑器或动画器。
在一些实现方式中，在步骤162，编辑器或动画器可选择要动画化的元素。在一些实现方式中，动画器或编辑器可接收要动画化的元素(例如，图形、文本或其他这种元素)。在其他实现方式中，动画器或编辑器可显示用户界面，并且用户可选择要动画化的元素。该元素在网页中可由具有一个或多个属性的DOM元素来表示。
在一些实现方式中，在步骤164，编辑器或动画器可接收用于动画的路径。在一些实现方式中，编辑器或动画器可接收由用户经由用户界面描绘或选择的路径。在其他实现方式中，编辑器或动画器可接收被描绘或单独输入并被发送到编辑器或动画器的路径。例如，在一些实现方式中，路径可以被提供为：一个或多个贝塞尔曲线或形成曲线的贝塞尔曲线片段；一个或多个线性片段；一个或多个“跳跃”片段；或者任何其他这种表示。路径可包括一个或多个自由度，诸如x平移、y平移、z平移(对于三维环境)、偏航旋转、翻滚旋转和/或俯仰旋转。路径也可包括一个或多个缩放操作，包括x尺度、y尺度和/或z尺度。在许多实现方式中，路径可包括这些自由度的组合(例如，x和y平面中的第一曲线，同时向前俯仰，然后在z平面中旋转)。虽然在这里被称为偏航、翻滚和俯仰，但在许多实现方式中，这些旋转可被认为是绕x轴、y轴和z轴的旋转(从而独立于动画化的元素的运动或“脸面”的方向)。在一些实现方式中，路径可包括其他特征，诸如沿着片段的切向跟随，和/或一个或多个缓动函数，包括应用到曲线不同片段或子片段的多个缓动函数。
在一些实现方式中，在步骤166，编辑器或动画器可选择第一自由度(例如，平移或旋转)。该选择可基于任何特性。例如，在一些实现方式中，编辑器或动画器可按预定的次序选择自由度。在其他实现方式中，编辑器或动画器可基于对应方向上的运动量或者基于旋转量来选择自由度。
在一些实现方式中，在步骤168，编辑器或动画器可将路径的片段细分成多个子片段。如上所论述，片段可被细分以确定用于识别平移和/或旋转的键或控制点的最优键时间，键时间之间的运动被插补。如上所论述，细分片段可被迭代地执行以识别合适大小的片段。在一些实现方式中，在步骤170，如上所论述，编辑器或动画器可为每个贝塞尔曲线片段的控制点生成键和对应的键时间。键可包括对于所选自由度中的平移或变换的渲染指令(例如，一组坐标和对应的时间)。
在一些实现方式中，在步骤172，编辑器或动画器可生成DOM树内的动画化元素的节点的父节点。父节点可封装动画化元素的节点并且在父节点内可包括渲染指令或键和键时间。
在一些实现方式中，在步骤174，动画器或编辑器可确定动画路径是否包括额外自由度中的变换或平移。如上所论述，在许多实现方式中，树内的渲染指令可以只涉及单个自由度。因此，如果需要额外的自由度，则可以为每个额外的自由度迭代地重复步骤166-174。在这种实现方式中，在步骤172，每个新生成的父节点可封装先前生成的父节点(或节点)，先前生成的父节点可类似地封装用于元素的节点。因此，如上所论述，DOM树可包括处于父-子关系的多个节点，每个节点对应于一自由度，最低或最终子节点对应于元素。由于较低节点或子节点继承父节点的特性，所以与元素相对应的节点可呈现与每个自由度相对应的各种渲染指令的聚集。
如上所论述，在一些实现方式中，动画可包括缩放。在一些实现方式中，在步骤176，编辑器或动画器可确定路径的片段是否包括缩放函数。在一些实现方式中，如上所论述，缩放函数可应用到一个自由度(例如，在x平面中放大)。在这种实现方式中，在步骤178，编辑器或动画器可生成对应的标签，并且在步骤180，在与对应的自由度相关联的父节点处将缩放指令插入到渲染指令中。在其他实现方式中，缩放函数可应用到多个自由度(例如，将元素大小减小50％)。如上所论述，在一些这种实现方式中，动画器或编辑器可在步骤178为每个自由度确定缩放因子，并且在步骤180，动画器或编辑器可将缩放因子插入到与对应的自由度相关联的每个父节点中。从而，可为每个自由度迭代地执行步骤176-180。虽然是在步骤174之后示出的，但在一些实现方式中，步骤176-180可在步骤166和174之间(例如，在步骤172之后)执行，并且可为每个自由度迭代地重复。
类似地，如上所论述，动画可包括缓动函数或者穿过曲线的区域的速度的改变。在步骤182，动画器或编辑器可确定在动画指令或路径中是否指示了缓动函数。此外，如上所论述，在一些实现方式中，在任何DOM节点中可只包括单个缓动函数。因此，为了沿着路径应用多个缓动函数，在一些实现方式中，在步骤184，动画器或编辑器可确定是否指示多个缓动函数。如果否，则在步骤186A，动画器或编辑器可将缓动函数识别符插入到一个DOM节点(例如，在一些实现方式中，以该元素作为直接子的第一父节点；在其他实现方式中，生成的最顶部的父节点)处的渲染指令中。如果是，则在步骤186B，动画器或编辑器可将多个缓动函数插入到对应的多个DOM节点中。在渲染期间，来自多个DOM节点的缓动函数的集合可被聚集以提供要被应用到曲线的各种区域的多个缓动函数。
在一些实现方式中，路径可被划分成多个贝塞尔和/或线性片段或跳跃。在这种实现方式中，在步骤188，编辑器或动画器可确定在路径中是否存在额外的片段。如果是，则可对每个额外的片段迭代地重复步骤166-188。
在一些实现方式中，在步骤190，可提供该页面以便由第二计算设备渲染或显示。在一些实现方式中，生成的DOM指令可被提取并插入在单独的页面或数据文件中，诸如样式表，并且被该页面内的指示符所引用。在渲染期间，浏览器可识别该指示符，取回该单独的页面或数据文件，并且应用渲染指令。
图2A是根据一个实现方式的动画环境200的框图。网络205可连接一个或多个客户端设备210A-210N(统称为(一个或多个)客户端设备210)；以及动画服务212。
仍参考图2A，更详细地说，网络205可以是在客户端设备210和一个或多个动画服务212以及其他未图示的设备之间中继信息的任何形式的计算机网络或网络的组合。网络205可包括互联网和/或其他类型的数据网络，诸如局域网(local area network，LAN)、广域网(wide area network，WAN)、蜂窝网络、卫星网络或者其他类型的数据网络。网络205也可包括被配置为在网络205内接收和/或发送数据的任何数目的计算设备(例如，计算机、服务器、路由器、网络交换机，等等)。网络205还可包括任何数目的硬连线和/或无线连接。客户端设备210可与(例如，经由光缆、CAT5线缆等等)硬连线到网络205中的其他计算设备的收发器(例如，经由WiFi、蜂窝、无线电等等)无线地通信。在一些实现方式中，网络205可以是虚拟网络，诸如由单个物理机执行的多个虚拟机之间的虚拟网络，或者抽象网络，诸如经由物理上可移动的介质对数据的离线传送(例如，Sneakernet、经由磁带介质传送数据、CD-ROM、闪存介质、外部硬盘驱动器、软盘等等)。
(一个或多个)客户端设备210可被不同地称为客户端、设备、客户端设备、计算设备、用户设备或者任何其他这种术语，可以是桌面型计算机、膝上型计算机、平板计算机、智能电话、视频游戏机、智能电视或机顶盒、服务器、工作站或者能够通过网络205通信的任何其他类型和形式的计算设备。在一些实现方式中，客户端设备210可以执行应用、服务、服务器、守护进程、例程或者用于通过网络205通信的其他可执行逻辑，诸如web浏览器、邮件客户端、视频播放器、音乐播放器、视频游戏或者任何其他这种应用。这种应用可包括命令行界面、图形用户界面或者这些或其他界面的任何组合。在客户端设备是智能电视或机顶盒的实现方式中，客户端设备可经由第一接口，诸如地面、卫星或线缆广播接收内容；并且可经由网络205经由第二接口，诸如以太网或WiFi接口与受众测量服务器通信。在其他实现方式中，客户端设备210可经由网络205接收内容并且可经由网络205发送交互的标识。
内容提供者(未图示)可包括连接到网络205并且被配置用于直接地或者经由动画服务212向客户端设备210提供内容的一个或多个计算设备。内容提供者可被不同地称为内容提供者、服务器、web服务器、数据服务器、发布者、服务提供者或者其他类似的术语。在许多实现方式中，内容提供者可包括被配置为服务器场或云的多个计算设备，并且可包括路由器、负载平衡器、网络地址转换器、防火墙或者其他这种设备。内容提供者可以是计算机服务器(例如，FTP服务器、文件共享服务器、web服务器，等等)或者服务器的组合(例如，数据中心、云计算平台等等)。内容提供者可提供任何类型和形式的内容，包括文本、图像、视频、音频、多媒体或者其他数据，或者这些的任何组合。内容可包括实况媒体内容、预记录的媒体内容、渲染的内容、电影、电视节目、播客、视频博客、视频游戏或其他交互式内容、任何格式的广告、社交媒体或者任何其他类型和形式的内容。
图2B是根据一个实现方式的图2A中所示的客户端和服务器设备的框图。首先参考客户端设备210，客户端设备可以是实况媒体流的客户端或受众成员的计算设备。客户端设备210可以是任何数目的不同类型的被配置为经由网络205通信的用户电子设备，包括但不限于膝上型计算机、桌面型计算机、平板计算机、智能电话、数字视频记录器、用于电视的机顶盒、视频游戏机或者任何其他类型和形式的计算设备或设备的组合。在一些实现方式中，客户端设备210的类型可被分类为移动设备、桌面型设备或者打算保持静止或者被配置为主要经由局域网接入网络205的设备，或者另一类别的电子设备，诸如媒体消费设备。
在许多实现方式中，客户端设备210包括处理器222和存储器224。存储器224可存储机器指令，这些机器指令当被处理器222执行时使得处理器222执行本文描述的一个或多个操作。处理器222可包括微处理器、ASIC、FPGA等等，或者这些的组合。在许多实现方式中，处理器222可以是多核处理器或者处理器的阵列。存储器224可包括但不限于能够向处理器222提供程序指令的电子的、光的、磁的或者任何其他的存储设备。存储器224可包括软盘、CD-ROM、DVD、磁盘、存储芯片、ROM、RAM、EEPROM、EPROM、闪存、光介质或者处理器222可从其读取指令的任何其他适当的存储器。指令可包括来自任何适当的计算机编程语言的代码，诸如但不限于C、C++、C#、Java、JavaScript、Perl、HTML、XML、Python和Visual Basic。
客户端设备210可包括一个或多个网络接口226。网络接口226可包括任何类型和形式的接口，包括以太网，包括10Base T、100Base T或1000Base T(“千兆比特”)；802.11无线的任何变体，诸如802.11a、802.11b、802.11g、802.11n或802.11ac；蜂窝，包括CDMA、LTE、3G或4G蜂窝；蓝牙或其他短程无线连接；或者这些或用于与网络205通信的其他接口的任何组合。在许多实现方式中，客户端设备210可包括不同类型的多个网络接口226，允许经由不同的子网络连接到各种网络205或诸如互联网的网络205。客户端设备210还可包括用于接收地面、卫星或线缆模拟或数字广播的其他接口，如上所论述。
客户端设备210可包括一个或多个用户接口设备228。用户接口设备228可以是通过生成感观信息(例如，显示器上的可视化、一个或多个声音、触觉反馈等等)来向用户传达数据和/或将从用户接收到的感观信息转换成电子信号的任何电子设备(例如，键盘、鼠标、指点设备、触摸屏显示器、麦克风等等)。根据各种实现方式，一个或多个用户接口设备可在客户端设备210的壳体的内部，诸如内置显示器、触摸屏、麦克风等等，或者在客户端设备210的壳体的外部，诸如连接到客户端设备210的监视器、连接到客户端设备210的扬声器等等。
客户端设备210可在存储器224中包括应用230或者可以用处理器222执行应用230。应用230可以是应用、小应用程序、脚本、服务、守护进程、例程或者用于接收内容并且经由客户端设备的输出接口228(例如，显示器、扬声器等等)显示或以其他方式输出内容的其他可执行逻辑。在一个实现方式中，应用230可以是web浏览器。应用230可包括用于显示经由网络接口226接收的和/或由处理器222在本地生成的内容的功能。在一些实现方式中，应用230可以是媒体播放器或者包括嵌入式媒体播放器，诸如web浏览器内的插件或原生媒体播放器。应用230可提供用于与媒体播放器中播放的内容交互的用户界面，诸如跳过控件、不喜欢按钮或者任何类似的界面。
客户端设备210可包括设备识别符234或者可被用设备识别符234来识别。设备识别符234可以是字母数字串、数据串、序列号、介质访问控制(media access control，MAC)地址、互联网协议(internet protocol，IP)地址、用户名或账户名、全局唯一识别符(globally unique identifier，GUID)、cookie、随机或伪随机数或者任何其他类型和形式的识别符，包括这些或其他识别符的组合。在一些实现方式中，设备识别符234可固定到设备或者是在设备中预配置的，诸如制造商序列号或MAC地址，而在其他实现方式中，设备识别符234可以是由内容提供者、流媒体服务器、应用230或其他实体动态设置的，诸如cookie或用户名。在一些实现方式中，可以为向内容提供者和/或受众测量服务器的每个通信设置唯一或新的设备识别符234，而在其他实现方式中，设备识别符234可不被改变，或者可被周期性地(例如，每小时、每日、每周等等)改变或者按其他间隔(例如，在客户端设备重启时、在登录到互联网服务时等等)改变。在一些实现方式中，设备识别符234可与一个或多个其他设备识别符234(例如，用于移动设备的设备识别符、用于家庭计算机的设备识别符等等)相关联。在许多实现方式中，如上所论述，设备识别符234可由内容提供者生成和/或发送到客户端设备210。在其他实现方式中，如上所论述，客户端设备210可请求来自测量服务或内容提供者的设备识别符或cookie 234，并且可与对内容或测量数据的请求相关联地将设备识别符或cookie 234发送给测量服务或内容提供者。
图2B中还图示了动画服务212的设备或服务器的实现方式的框图。与客户端设备210一样，动画服务212可包括一个或多个处理器222、存储器或存储设备224、网络接口226和用户界面228。在被称为无外设服务器(headless server)的一些实现方式中，动画服务212可不包括用户界面228，而是可经由网络205与具有用户界面228的客户端设备210或面板提供者通信。在一些实现方式中，存储器224可存储一个或多个应用供服务器的处理器222执行，所述服务器包括FTP服务器、web服务器、邮件服务器、文件共享服务器、对等服务器或者用于递送内容或重定向命令以允许客户端访问内容提供者处的内容的其他这种应用。动画服务212可执行如上所论述的用于计算运动的动画器。
本说明书中描述的主题和操作的实现方式可以用数字电子电路实现，或者用计算机软件、固件或硬件—包括本说明书中公开的结构及其结构等同物—实现，或者用它们中的一个或多个的组合来实现。本说明书中描述的主题的实现方式可实现为一个或多个计算机程序，即计算机程序指令的一个或多个模块，其被编码在一个或多个计算机存储介质上，以供数据处理装置执行或者控制数据处理装置的操作。替代或附加地，程序指令可被编码在人工生成的传播信号上，例如机器生成的电、光或电磁信号上，该信号被生成来编码信息以便发送到适当的接收机装置，以供数据处理装置执行。计算机存储介质可以是计算机可读存储设备、计算机可读存储基板、随机或串行访问存储器阵列或设备或者它们之中的一个或多个的组合，或者可被包括在计算机可读存储设备、计算机可读存储基板、随机或串行访问存储器阵列或设备或者它们之中的一个或多个的组合中。另外，虽然计算机存储介质不是传播的信号，但计算机存储介质可以是编码在人工生成的传播信号中的计算机程序指令的源或目的地。计算机存储介质也可以是一个或多个单独的组件或介质(例如，多个CD、盘或其他存储设备)，或者可被包括在一个或多个单独的组件或介质(例如，多个CD、盘或其他存储设备)中。因此，计算机存储介质可以是有形的。
本说明书中描述的操作可实现为由数据处理装置对存储在一个或多个计算机可读存储设备上的或从其他源接收的数据执行的操作。
术语“客户端”或“服务器”包括所有种类的用于处理数据的装置、设备和机器，诸如可编程处理器、计算机、片上系统或前述这些项中的多个或组合。装置可包括专用逻辑电路，例如FPGA(现场可编程门阵列)或ASIC(专用集成电路)。除了硬件外，装置还可包括为所关注的计算机程序创建执行环境的代码，例如，构成处理器固件、协议栈、数据库管理系统、操作系统、跨平台运行时环境、虚拟机或它们中的一个或多个的组合的代码。装置和执行环境可实现各种不同的计算模型基础设施，诸如web服务、分布式计算和网格计算基础设施。
计算机程序(也称为程序、软件、软件应用、脚本或代码)可以用任何形式的编程语言来编写，所述语言包括经编译或解释的语言、声明性或过程式语言，并且计算机程序可按任何形式来部署，包括被部署为独立程序或被部署为模块、组件、子例程、对象或者适合用在计算环境中的其他单元。计算机程序可以但不是必须对应于文件系统中的文件。程序可被存储在保存其他程序或数据的文件的一部分中(例如，存储在标记语言文档中的一个或多个脚本)、存储在专用于所关注程序的单个文件中或者存储在多个协调的文件(例如，存储一个或多个模块、子程序或代码部分的文件)中。计算机程序可被部署来在一个计算机或多个计算机上执行，所述多个计算机位于一个地点或跨多个地点分布并由通信网络互连。
本说明书中描述的过程和逻辑流可通过执行一个或多个计算机程序的一个或多个可编程处理器来执行以通过对输入数据进行操作并生成输出而执行动作。过程和逻辑流也可由专用逻辑电路来执行，并且装置也可实现为专用逻辑电路，专用逻辑电路例如是FPGA(现场可编程门阵列)或ASIC(专用集成电路)。
适用于执行计算机程序的处理器包括通用和专用微处理器两者，以及任何种类的数字计算机的任何一个或多个处理器。一般地，处理器将从只读存储器或随机访问存储器或者这两者接收指令和数据。计算机的基本元件是用于按照指令执行动作的处理器和用于存储指令和数据的一个或多个存储器设备。一般地，计算机还将包括一个或多个大容量存储设备，或者操作性地耦合到一个或多个大容量存储设备以便从其接收数据或向其传递数据，或者既包括也操作性地耦合到一个或多个大容量存储设备，所述大容量存储设备用于存储数据，例如是磁盘、磁光盘或光盘。然而，计算机不是需要具有这种设备。另外，计算机可被嵌入在另一设备中，另一设备举例来说例如是移动电话、个人数字助理(personaldigital assistant，PDA)、移动音频或视频播放器、游戏机、全球定位系统(GlobalPositioning System，GPS)接收机或者便携式存储设备(例如，通用串行总线(universalserial bus，USB)快闪驱动器)。适用于存储计算机程序指令和数据的设备包括所有形式的非易失性存储器、介质和存储器设备，例如包括半导体存储器设备，例如EPROM、EEPROM和快闪存储器设备；磁盘，例如内部硬盘或可移除盘；磁光盘；以及CD-ROM和DVD-ROM盘。处理器和存储器可被专用逻辑电路所补充，或者被包含在专用逻辑电路中。
为了提供与用户的交互，本说明书中描述的主题的实现方式可在计算机上实现，该计算机具有显示设备，例如CRT(阴极射线管)、LCD(液晶显示器)、OLED(有机发光二极管)、TFT(薄膜晶体管)、等离子体、其他柔性配置或者用于向用户显示信息的任何其他监视器，以及用户可用来向计算机提供输入的键盘、指点设备(例如鼠标、轨迹球等等)或者触摸屏、触摸板等等。其他种类的设备也可用于提供与用户的交互；提供给用户的反馈可以是任何形式的感官反馈，例如视觉反馈、听觉反馈或触觉反馈；并且来自用户的输入可按任何形式被接收，包括声响、话音或触觉输入。此外，计算机可通过向用户使用的设备发送文档并从该设备接收文档来与用户交互；通过响应于从用户的客户端设备上的web浏览器接收的请求而向该web浏览器发送网页来与用户交互。
本说明书中描述的主题的实现方式可在计算系统中实现，该计算系统包括后端组件，例如作为数据服务器，或者包括中间件组件，例如应用服务器，或者包括前端组件，例如具有用户可通过其来与本说明书中描述的主题的实现方式交互的图形用户界面或Web浏览器的客户端计算机，或者一个或多个这种后端、中间件或前端组件的任何组合。系统的组件可由任何形式或介质的数字数据通信(例如通信网络)互连。通信网络可包括局域网(“LAN”)和广域网(“WAN”)，互联网络(例如，因特网)和对等网络(例如，自组织对等网络)。
虽然本说明书包含许多具体实现细节，但这些细节不应被解释为对任何发明的范围或可请求保护的范围的限制，而是被解释为对特定发明的特定实现方式所特有的特征的描述。本说明书中在分开的实现方式的上下文中描述的某些特征也可在单个实现方式中组合实现。相反，在单个实现方式的上下文中描述的各种特征也可分开地或者按任何适当的子组合在多个实现方式中实现。另外，虽然以上可将特征描述为按某些组合来动作，或者甚至最初声称是这样的，但来自要求保护的组合的一个或多个特征在一些情况下可被从该组合中删去，并且要求保护的组合可指向子组合或子组合的变体。
类似地，虽然操作在附图中是按特定次序描绘的，但这不应当被理解为为了实现期望的结果要求这种操作按所示出的特定次序或按顺序次序执行，或者要求所有示出的操作都被执行。在某些情况中，多任务和并行处理可能是有利的。另外，在以上描述的实现方式中各种系统组件的分离不应当被理解为在所有实现方式中都要求这种分离，并且应当理解所描述的程序组件和系统一般可被一起集成在单个软件产品中或被封装到多个软件产品中。
从而，已描述了主题的特定实现方式。其他实现方式在所附权利要求的范围内。在一些情况下，权利要求中记载的动作可按不同的次序执行，而仍实现期望的结果。此外，附图中描绘的过程要实现期望的结果并非必然要求所示出的特定次序或者顺序次序。在某些实现方式中，可利用多任务或并行处理。

Claims (20)

1.一种用于生成跨浏览器兼容动画的方法，包括：
由计算设备接收包括要被动画化的元素的网页，所述网页包括具有与所述元素相对应的节点的文档对象模型DOM树；
由所述计算设备识别与用于所述元素的运动路径对应的片段，所述片段包括多个自由度，所述多个自由度包括沿所述片段的运动路径的第一自由度和第二自由度；
由所述计算设备向所述DOM树中插入以与所述元素相对应的节点作为子节点的第一父节点，所述第一父节点对应于沿用于所述元素的运动路径的片段的第一自由度；以及
由所述计算设备向所述DOM树中插入以所述第一父节点作为子节点的第二父节点，所述第二父节点对应于沿用于所述元素的运动路径的片段的第二自由度。
2.如权利要求1所述的方法，还包括为所述多个自由度中的每个额外的自由度向所述DOM树中迭代地插入额外的父节点。
3.如权利要求1或2所述的方法，还包括：
由所述计算设备接收用于所述元素的输入尺度因子；
由所述计算设备将第一尺度因子插入到所述第一父节点中；以及
由所述计算设备将第二尺度因子插入到所述第二父节点中；
其中，所述第一尺度因子和第二尺度因子的总和等于所述输入尺度因子。
4.如权利要求1或2所述的方法，
其中，所述片段是贝塞尔曲线片段；
其中，向所述DOM树中插入所述第一父节点还包括生成在所述第一自由度中与所述贝塞尔曲线片段相对应的键和键时间的第一序列；并且
其中，向所述DOM树中插入所述第二父节点还包括生成在所述第二自由度中与所述贝塞尔曲线片段相对应的键和键时间的第二序列。
5.如权利要求4所述的方法，其中，第一贝塞尔曲线片段具有第一缓动函数；以及所述方法还包括接收具有第二缓动函数的第二贝塞尔曲线片段。
6.如权利要求5所述的方法，还包括将与所述第一缓动函数相对应的第一缓动键插入到所述第一父节点中，以及将与所述第二缓动函数相对应的第二缓动键插入到所述第二父节点中。
7.如权利要求4所述的方法，还包括在多个采样点处将所述贝塞尔曲线片段迭代地细分成多个子片段并且在采样点之间进行插补以识别所述键和键时间的第一序列以及键和键时间的第二序列。
8.如权利要求1或2所述的方法，其中，所述多个自由度包括至少一个平移。
9.如权利要求1或2所述的方法，其中，所述多个自由度包括至少一个旋转。
10.如权利要求1或2所述的方法，还包括将所述网页发送到第二计算设备，所述第二计算设备根据所述第二父节点、第一父节点和与所述元素相对应的节点渲染被动画化的元素。
11.一种用于生成跨浏览器兼容动画的系统，包括：
计算设备，该计算设备包括执行动画器的处理器，和存储器设备；
其中，所述动画器被配置为：
接收存储在所述存储器设备中的包括要被动画化的元素的网页，所述网页包括具有与所述元素相对应的节点的文档对象模型DOM树，
识别与用于所述元素的运动路径对应的片段，所述片段包括多个自由度，所述多个自由度包括沿所述片段的运动路径的第一自由度和第二自由度；
向所述DOM树中插入以与所述元素相对应的节点作为子节点的第一父节点，所述第一父节点对应于沿用于所述元素的运动路径的片段的第一自由度，以及
向所述DOM树中插入以所述第一父节点作为子节点的第二父节点，所述第二父节点对应于沿用于所述元素的运动路径的片段的第二自由度。
12.如权利要求11所述的系统，其中，所述动画器还被配置成为所述多个自由度中的每个额外的自由度向所述DOM树中迭代地插入额外的父节点。
13.如权利要求11或12所述的系统，其中，所述动画器还被配置为：
接收用于所述元素的输入尺度因子；
将第一尺度因子插入到所述第一父节点中；以及
将第二尺度因子插入到所述第二父节点中；
其中，所述第一尺度因子和第二尺度因子的总和等于所述输入尺度因子。
14.如权利要求11或12所述的系统，其中，所述片段为贝塞尔曲线片段，并且所述动画器还被配置为：
生成在所述第一自由度中与所述贝塞尔曲线片段相对应的键和键时间的第一序列；以及
生成在所述第二自由度中与所述贝塞尔曲线片段相对应的键和键时间的第二序列。
15.如权利要求14所述的系统，其中，第一贝塞尔曲线片段具有第一缓动函数；以及其中所述动画器还被配置为接收具有第二缓动函数的第二贝塞尔曲线片段。
16.如权利要求15所述的系统，其中，所述动画器还被配置为将与所述第一缓动函数相对应的第一缓动键插入到所述第一父节点中，以及将与所述第二缓动函数相对应的第二缓动键插入到所述第二父节点中。
17.如权利要求14所述的系统，其中，所述动画器还被配置为在多个采样点处将所述贝塞尔曲线片段迭代地细分成多个子片段并且在采样点之间进行插补以识别所述键和键时间的第一序列以及键和键时间的第二序列。
18.如权利要求11或12所述的系统，其中，所述多个自由度包括至少一个平移。
19.如权利要求11或12所述的系统，其中，所述多个自由度包括至少一个旋转。
20.如权利要求11或12所述的系统，其中，所述计算设备还包括被配置为将所述网页发送到第二计算设备的网络接口，所述第二计算设备根据所述第二父节点、第一父节点和与所述元素相对应的节点渲染被动画化的元素。
CN201780085242.7A 2017-06-13 2017-12-14 用于生成跨浏览器兼容动画的系统和方法 Active CN110235181B (zh)

Applications Claiming Priority (3)

Application Number Priority Date Filing Date Title
US201762519141P 2017-06-13 2017-06-13
US62/519,141 2017-06-13
PCT/US2017/066510 WO2018231276A1 (en) 2017-06-13 2017-12-14 Systems and methods for authoring cross-browser html 5 motion path animation

Publications (2)

Publication Number Publication Date
CN110235181A CN110235181A (zh) 2019-09-13
CN110235181B true CN110235181B (zh) 2023-09-29

Family

ID=60955403

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201780085242.7A Active CN110235181B (zh) 2017-06-13 2017-12-14 用于生成跨浏览器兼容动画的系统和方法

Country Status (4)

Country Link
US (2) US11069110B2 (zh)
EP (1) EP3559912A1 (zh)
CN (1) CN110235181B (zh)
WO (1) WO2018231276A1 (zh)

Families Citing this family (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110235181B (zh) 2017-06-13 2023-09-29 谷歌有限责任公司 用于生成跨浏览器兼容动画的系统和方法
US20210390754A1 (en) * 2018-10-03 2021-12-16 Dodles, Inc Software with Motion Recording Feature to Simplify Animation
WO2021080580A1 (en) * 2019-10-23 2021-04-29 Google Llc Content animation customization based on viewport position
US11335051B2 (en) * 2019-10-25 2022-05-17 Disney Enterprises, Inc. Parameterized animation modifications
US10984574B1 (en) 2019-11-22 2021-04-20 Adobe Inc. Generating animations in an augmented reality environment
CN111381821B (zh) * 2020-03-06 2023-10-20 南方电网科学研究院有限责任公司 一种电网逻辑接线图生成方法和相关装置
US11644941B1 (en) * 2020-08-10 2023-05-09 Apple Inc. Manipulation of animation timing
CN113209626B (zh) * 2021-05-21 2023-03-21 珠海金山数字网络科技有限公司 一种游戏画面渲染方法及装置
CN113268301B (zh) * 2021-05-25 2024-02-13 北京北大方正电子有限公司 动画生成方法、装置、设备及存储介质
CN113360121B (zh) * 2021-07-09 2022-06-03 帆软软件有限公司 分页展示及页间动画的可视化设计方法
CN114167811B (zh) * 2021-10-29 2023-09-08 北京航星机器制造有限公司 一种ug后置处理线性优化方法
CN114201566B (zh) * 2021-12-10 2024-06-04 重庆中科云从科技有限公司 运动目标的静态轨迹播放方法、系统及装置

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102142016A (zh) * 2010-01-29 2011-08-03 微软公司 跨浏览器交互活动记录、回放以及编辑
CN102253979A (zh) * 2011-06-23 2011-11-23 天津海量信息技术有限公司 基于视觉的web页面萃取方法
US8212821B1 (en) * 2011-10-14 2012-07-03 Google Inc. Decomposing animations into primitives for browser-dependent rendering
CN103345522A (zh) * 2013-07-18 2013-10-09 北京润通丰华科技有限公司 数据的展示处理、展示方法及装置
WO2014022981A1 (en) * 2012-08-08 2014-02-13 Google Inc. Animating movement of a graphical representation on a display
CN105094804A (zh) * 2015-06-18 2015-11-25 北京奇虎科技有限公司 在页面中添加动画的方法和装置

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060274070A1 (en) * 2005-04-19 2006-12-07 Herman Daniel L Techniques and workflows for computer graphics animation system
US9208054B2 (en) 2011-02-14 2015-12-08 Fujitsu Limited Web service for automated cross-browser compatibility checking of web applications
US8164596B1 (en) * 2011-10-06 2012-04-24 Sencha, Inc. Style sheet animation creation tool with timeline interface
US9305386B2 (en) * 2012-02-17 2016-04-05 Autodesk, Inc. Editable motion trajectories
WO2013159171A1 (en) * 2012-04-24 2013-10-31 Cast Group Of Companies Inc. System and method for providing three-dimensional paths
US9892205B2 (en) * 2012-06-25 2018-02-13 Microsoft Technology Licensing, Llc Declarative show and hide animations in markup languages
KR20140117122A (ko) * 2013-03-26 2014-10-07 삼성전자주식회사 전자장치에서 동적으로 변하는 웹페이지 내용을 제어하는 방법 및 장치
CN110235181B (zh) 2017-06-13 2023-09-29 谷歌有限责任公司 用于生成跨浏览器兼容动画的系统和方法

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102142016A (zh) * 2010-01-29 2011-08-03 微软公司 跨浏览器交互活动记录、回放以及编辑
CN102253979A (zh) * 2011-06-23 2011-11-23 天津海量信息技术有限公司 基于视觉的web页面萃取方法
US8212821B1 (en) * 2011-10-14 2012-07-03 Google Inc. Decomposing animations into primitives for browser-dependent rendering
WO2014022981A1 (en) * 2012-08-08 2014-02-13 Google Inc. Animating movement of a graphical representation on a display
CN103345522A (zh) * 2013-07-18 2013-10-09 北京润通丰华科技有限公司 数据的展示处理、展示方法及装置
CN105094804A (zh) * 2015-06-18 2015-11-25 北京奇虎科技有限公司 在页面中添加动画的方法和装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
Erik Dahlström等.Scalable Vector Graphics (SVG) 1.1 (Second Edition).《https://www.w3.org/TR/SVG11/animate.html#PathAttribute》.2011, *

Also Published As

Publication number Publication date
EP3559912A1 (en) 2019-10-30
US11854135B2 (en) 2023-12-26
CN110235181A (zh) 2019-09-13
US20200005532A1 (en) 2020-01-02
US20210335027A1 (en) 2021-10-28
US11069110B2 (en) 2021-07-20
WO2018231276A1 (en) 2018-12-20

Similar Documents

Publication Publication Date Title
CN110235181B (zh) 用于生成跨浏览器兼容动画的系统和方法
US12079626B2 (en) Methods and systems for creating applications using scene trees
KR101143095B1 (ko) 컴퓨터 디스플레이 출력시의 애니메이션 및 매체 조정
US8982132B2 (en) Value templates in animation timelines
US20130076757A1 (en) Portioning data frame animation representations
Ren et al. Stardust: Accessible and transparent gpu support for information visualization rendering
US20130097552A1 (en) Constructing an animation timeline via direct manipulation
US20130132840A1 (en) Declarative Animation Timelines
US20060232589A1 (en) Uninterrupted execution of active animation sequences in orphaned rendering objects
US8739120B2 (en) System and method for stage rendering in a software authoring tool
US7636093B1 (en) Parameterized motion paths
US20130127877A1 (en) Parameterizing Animation Timelines
US8674998B1 (en) Snapshot keyframing
US20120280991A1 (en) Employing mesh files to animate transitions in client applications
US20140049547A1 (en) Methods and Systems for Representing Complex Animation using Style Capabilities of Rendering Applications
US20130076756A1 (en) Data frame animation
US10304225B2 (en) Chart-type agnostic scene graph for defining a chart
US20180190000A1 (en) Morphing chart animations in a browser
US11086498B2 (en) Server-side chart layout for interactive web application charts
Vanderdonckt Animated transitions for empowering interactive information systems
Mishchenko et al. Distributed visualization framework architecture

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant