跳到主要内容

Brian Birtles重新思考网络动画

Brian Birtles目前在Mozilla Japan工作他最近发布了关于网络动画的新发展,称为Web动画。在内部,他展示了一个视频,提供了该技术潜力的例子。这是网络动画的早期阶段,但我们向Birtles询问了这个想法背后的原因以及它对现有网络动画技术的意义。

.net:你觉得网络上的动画目前在哪些方面都不尽如人意?
Birtles:我认为最大的就是同步。使用CSS,无法动态生成与已经运行的动画同步的新动画 - 但这对应用程序开发来说非常重要。事实上,当基于CSS的动画开始时,这是非常不可预测的。 SVG使动画同步变得相当容易,但至少在SVG 1.1中,您无法与视频和音频等媒体同步。

在功能方面,由于定义了缓动函数的方式,您无法使用SVG或CSS轻松创建弹跳效果。此外,CSS不允许您查找动画或将独立动画添加到一起,并且SVG不支持反转。

此外,如果您需要通过脚本与动画进行交互,那将非常困难。操作CSS(CSSOM)的界面在这个领域仍然相当笨拙,虽然SVG为此提供了一些方法,但许多交互仍然是完全未定义的。

对于纯脚本动画,我们有像RequestAnimationFrame这样的接口,但是仍然让作者能够以与帧率无关的方式编写动画函数,并且它无法与CSS同步,例如CSS动画或视频。

.net:你的想法背后的基础是什么,他们取得了什么成果?
Birtles:主要关注的是将CSS动画,CSS过渡和SVG动画的可能性统一到一个模型中。 CSS技术被广泛使用但非常有限,而SVG动画提供了更复杂的模型,但由于它仅适用于SVG,因此使用得少得多。与此同时,我们也在扩展模型以解决我所描述的限制。

.net:你能举例说明设计师和开发者如何利用网络动画吗?
Birtles:具体而言,它应该意味着制作动画字幕以覆盖到视频上并且即使在被查找或反向播放时保持同步也不仅是可能的,而且是直截了当的。它应该意味着使用W3C标准技术可以轻松实现目前使用Flash实现的漫画。它应该意味着通过动画向界面添加视觉线索的一些限制。

对于那些准备编写脚本的开发人员来说,我们建议他们可以弯曲的模型中有很多功能。例如,可以提供自定义动画功能,以便可以使用同步和调度功能为字面上的任何内容制作动画,包括HTML5画布,滚动条甚至音频。

拥有CSS,SVG和脚本共有的模型使设计人员可以自由地在应用程序发生变化时更改方法,并重复使用他们的经验,尽管语法不同。

.net:更多的权力和控制可能是伟大的,但我们是否正朝着CSS正在成为面向编程的方向发展?
Birtles:我们提出的最终是CSS和SVG动画的基础模型。您无需编程即可使用它,因为所有内容都将映射到CSS和SVG语法。

也就是说,很多人会继续使用脚本来制作动画,所以我们有一个API,所以你也可以使用脚本中的Web动画。这意味着您可以使用一行代码编写同步的,帧速率独立的可逆动画。您可以使用相同的界面与CSS或SVG中创建的动画进行交互。

我认为像CSS这样的声明性方法有很多功能。在许多情况下,脚本根本无法使用,例如,由于安全限制。如果要为字体中的字形(使用SVG-in-opentype)或页面背景设置动画,那么您将需要声明性动画。这只是一个开始;声明性方法在可编辑性,性能,可访问性,重用性等方面带来了各种其他好处。

但HTML5所依据的基石之一就是认识到脚本不会消失。脚本可以让您实现新的想法,而无需等待规范编写者和实现者首先铺设路径。

.net:那些争论CSS的人现在远远超出了“演示”?那甚至重要吗?
Birtles:演示和内容之间的分离很有趣。有一些动画是视觉上的繁荣,明显符合演示的类别,而其他动画,如漫画更像内容。在模型中,我们试图迎合这两种用途。可能是作者使用CSS进行表现性的繁荣,并使用像SVG这样的角度括号语法来制作类似内容的动画 - 但这不是必需的。这可能是作者最好的区别,通过提供统一的模型,我们希望作者能够自由地尝试不同的方法。



翻译字数超限